Svelte: change API URLs during Development and Build

This is a frequent question that is asked how to detect whether the environment is either development or production also this is significantly helpful when apps are being frequently published and the client-side app needs API that may be different URL for local/development and during production builds.

Solution

Svelte's most adopted bundler is Rollup and the default rollup plugin config looks like this

    plugins: [
        svelte({
            dev: !production,
            css: css => {
                css.write('bundle.css');
            },
            preprocess: sveltePreprocess(),
        }),
        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),
        typescript({
            sourceMap: !production,
            inlineSources: !production
        }),
        !production && serve(),
        !production && livereload('public'),
        production && terser()
    ],

I have stripped out the comments

We need to add @rollup/plugin-replace as a dev dependency.

npm i -D @rollup/plugin-replace

General usage and more info check out the github

Now, this plugin is going to look for occurrence(s) of MYURL and destructively replace it. So consider having an unique string to be replaced.

For easier explanation here is a quick example.

import replace from 'rollup-plugin-replace';

export default {
    // ...
    plugins: [
        replace({
        'MYURL':production?'http://myhost:3000':'http://localhost:3000'
        })
    ]
};

Example App.svelte

<script>
  let url = "MYURL";
  let api = "/myendpoint";
  url += api;

//your normal fetch logic.

/* async function fetchData() {
        const response = await fetch(url)
        result = await response.json()
        return result
}
*/
</script>

<!--
check URL using your template to verify 
when your svelte app is run in dev mode your URL will be http://localhost:3000/myendpoint
when your svelte app is served after the build (production) your URL will be http://myhost:3000/myendpoint
-->


<p> {url} <p> 

<!-- template logic
{#await fetchData()}
   ...
{/await}
-->

Advantage of letting rollup replace the URLs.

Good news, we are not exposing the dev and prod API endpoints on the client-side app. We are leveraging the capabilities of rollup during the build process this makes sure that you not only have the URLs securely in your .env and has only one file you need to change the base URLs. Take a look here how to identify dev or prod the article also achieves using rollup-plugin-replace

Comments

[Paweł Kowalski]

Nice :)
That is one of those things that you just need to know if you are serious :)

Do you found a method of pulling dynamically url to CDN during runtime? Similar to webpack-require-from?

[Shriji]

Ah, this is very neat. Thank you for pointing me this and reading my article :)

For the answer, if there is a method to dynamically pull URL can be handled by async-script-loader using a small logic. But this isn't a clear equivalent of webpack-require-from.