This video is available to students only

Externalizing Frontend Configuration

Externalizing Frontend Configuration

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:

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:

Then add an API_ROOT constant:

Then add the replace plugin to the existing list of plugins. To nest variables under process: {env: { API_ROOT, we need to use JSON.stringify:

Here's the full rollup.config.js file with all the changes:

 

This page is a preview of Fullstack Svelte

No discussions yet