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

Blog

Svelte: change API URLs during Development and Build

Shriji

Solution

I have stripped out the comments

Advantage of letting rollup replace the URLs.

Join Our Newsletter. No Spam, Only the good stuff.

Related