Externalizing Configuration#

You probably noticed in the last lesson that we made a network call to http://localhost:3000/api/lunch-week, but we hard-coded the API route in our frontend component.

In this lesson, we'll use @rollup/plugin-replace to externalize configuration via Rollup to avoid hard-coding routes. This will make our app deployable to different servers and/or domains without having to change any source code.

Rollup is a module bundler for JavaScript that compiles our Svelte files into a JavaScript bundle that can be run by a web browser.

To get started, we need to install the plugin as a dev dependency in the Svelte frontend:

$ npm install --save-dev @rollup/plugin-replace

Then update rollup.config.js. We need to import the plugin and configure process.env.API_ROOT depending on whether we are running in production or not.

Import the replace plugin:

import replace from '@rollup/plugin-replace'

Then add an API_ROOT constant:

const API_ROOT = production ? '' : 'http://localhost:3000'