Import packages from arbitrary URL

[gyoshev]

This is a feature request as an extension of https://github.com/stackblitz/core/issues/36 . It would be great if we could load packages that are not yet published to NPM, but are built and hosted locally.

More specifically, while developing NPM packages, our team is using SystemJS in Plunker, and using localhost URLs to fetch specific packages from the local machine (which hosts them). This allows us to author documentation and test that the examples run in StackBlitz before publishing changes to a package. More generally, this allows StackBlitz to be used during the development of the package, not only when consuming one.

Do you think that this workflow can be achieved with StackBlitz?

[EricSimons]

This definitely could be achieved in stackblitz- we actually had it enabled for the first few months we were online, but had to turn it off after some bundler upgrades :)

One thing that's been an issue w/ stackblitz<->local is that most folks don't have https set up for their localhost, which is a problem bc stackblitz domains are all https and thus can't access unsecured resources (i.e. http). Would this also be a blocker for you in the use case you described?

[gyoshev]

That’s not too inconvenient, I guess. Self-signed certificates have worked fine so far, and this can even be automated, if it is a repetitive step. It’s a small price to pay for the opportunity to test out packages before they are published :)

[gyoshev]

@EricSimons sorry to be a bother, but would this make it on the backlog? We would love to integrate this, as it will seriously simplify our code, and let us use StackBlitz on a daily basis.

If I can lend a hand in any way, please let me know. If I understand correctly this requires a change to the turbo-resolver to support local packages, but it appears that one cannot run StackBlitz locally and experiment at this point.

[EricSimons]

@gyoshev definitely- we're actually taking this use case into consideration as we've been refactoring our bundler this month. Hoping to have this all online sometime in June 👍

In the meantime, one short term solution would be manually adding a pointer to the local UMD in your stackblitz project:

SystemJS.config({
  map: {
    '@stackblitz/sdk': 'https://cdn.jsdelivr.net/npm/@stackblitz/sdk@1.2.0'
  }
})

SystemJS.import('@stackblitz/sdk').then((sdk) => {
  // Run code that requires your lib here!
  console.log('loaded SDK', sdk)
})

Lmk if you have any q's about the above & I'll keep you in the loop as we get closer to our new bundler going online!

[askbeka]

any news?

[oliviertassinari]

On MUI, we could use this feature with codesandbox CI. For instance, in https://deploy-preview-32779--material-ui.netlify.app/material-ui/react-button/#basic-button

compare the behavior of the button when we try to use this dependency:

  "@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/a1d45cd1/@mui/material",