joeldenning
commented
3 years ago But each environment has its own bucket. So how would one cdn url point to different bucket?
I don't understand this question. The example file you linked to uses a separate CDN for each environment, and uses the PUBLIC_CDN_URL environment variable to change which CDN is used for each environment. The PUBLIC_CDN_URL environment variable is generally different for each environment. For example, the QA environment is usually something like https://qa.example.com/ and for stage it is https://stage.example.com.
If you want to use the same CDN for all environments, you could put change the PUBLIC_CDN_URL to have a suffix for the environment name. For example, instead of https://example.com, you could have https://example.com/qa/ and https://example.com/stage/ as the PUBLIC_CDN_URL variables.
In root-config we have to specify cdn url to download import-map.json. So do we have any example how different cdn url can be configured in root config for different environment?
If your root config is a static html file, then you can either make the import map page-relative, or build the root config differently for each environment, using html-webpack-plugin's syntax for changing the index.ejs file for each environment. I much prefer the first solution of making it page relative, and you can have it do an HTTP 302 redirect to the correct URL if the app is hosted on a different url than the import map.
<!-- Solution 1: preferred -->
<script type="systemjs-importmap" src="/main.importmap"></script>
<!-- Solution 2: not good because it does not create portable artifacts -->
<% if (isQa) { %>
<script type="systemjs-importmap" src="https://qa.example.com/main.importmap"></script>
<% } else if (isStage) { %>
<script type="systemjs-importmap" src="https://stage.example.com/main.importmap"></script>
<% } else if (isProd) { %>
<script type="systemjs-importmap" src="https://app.example.com/main.importmap"></script>
<% } %>If you do solution 2, you have to specify the isQa and isStage variables in your package.json scripts section, similar to how isLocal is set there.
@joeldenning
https://github.com/single-spa/import-map-deployer/blob/main/examples/ci-for-javascript-repo/gitlab-aws-no-import-map-deployer/.gitlab-ci.yml
I am trying to implement deploy process for our single spa apps. Above example has same CDN URL's for all environment. But each environment has its own bucket. So how would one cdn url point to different bucket?
And if that is not the case and cdn url's are supposed to be different, then it takes me to another question. In root-config we have to specify cdn url to download import-map.json. So do we have any example how different cdn url can be configured in root config for different environment?
Way I am doing right now is when I build the app, I pass environment variable for cdn url and that gets replaced in index.html for importmap.json.
To do that, I will have to build my apps again for other environment (qa, prod) before deploying to s3.