how to to host single-spa root-config and modules on a central server during development

user_224328 0
Viewed 840

I've been experimenting with single-spa for a while, and understand the basics of the developer experience. Create a parcel, yarn start on a unique port, add the reference to the import map declaration, and so on. The challenge with this is that as my root-config accrues more and more modules managing ports and import-maps starts to get tedious. What I want is to publish these modules to a central repository and load them from there (e.g., http://someserver.com/repository/moduleA/myorg-modulea.js, etc.).

I was recently introduced to localstack and started thinking maybe a local S3 bucket would serve for this. I have a configuration where builds (yarn build) are automatically published to an s3 bucket running on localstack. But when I try to load the root config index.html from the bucket I get the following JS error:

Unable to resolve bare specifier '@myorg/root-config'

I can access the JS files for each parcel and the root-config just fine via curl, so I suppose this would be a problem with any http server used in the same way. I can flip the root config to use the standard webpack-dev-server instead (on port 9000) and it works okay. So I'm guessing there's a difference between how a production build resolves these modules vs. the local build.

Has anyone tried something like this and got it working?

single-spa localstack
2 Answers

I had a similar issue that I got to work with http-server by adding each child .js file to a sub-folder in the root-config directory and launching the web server at the root-config directory level.

"imports": {
    "@myorg/root-config": "http://someserver.com/root-config.js",
    "@myorg/moduleA": "http://someserver.com/modules/moduleA/myorg-modulea.js",
    "@myorg/moduleB": "http://someserver.com/modules/moduleB/myorg-moduleb.js",
    "@myorg/moduleC": "http://someserver.com/modules/moduleC/myorg-modulec.js",
}

Note: By default, Single-SPA has an "isLocal" check before the current import mappings. You'll need to remove this if using a production build or it won't load the correct mappings.

<% if (isLocal) { %>

In my case, I was using localhost instead of someserver so I could navigate into the 'repository' folder and run npx http-server to get everything to run correctly.

I was hung up on this for a little while so hopefully this leads you in the right direction.

user_49270000

For the record, after trying several approaches to hosting a repository as described above, I found the unresolved bare specifier problem went away. So I have to chalk that up as just not having the right URL in the import map. Measure twice, cut once.

user_2243280
Related