Externalizing Frontend Configuration

[00:00 - 00:12] Welcome back. We need to tackle one more item while we're working in the front end. And we're going to externalize our configuration for our API network calls.

[00:13 - 00:56] We discussed in the last lesson that we've hard-coded localhost 3000 when we're making our API calls. And of course we don't want to do that because we wouldn't be able to use that in production. And so we're going to use a plugin called "Rollup plugin replace" to externalize config. And that'll avoid hard-coding our routes. Rollup is a module bundler for JavaScript. And it's the thing that compiles our route files into the JavaScript bundle that's run by the web browser and what would be deployed to production in a deployment scenario.

[00:57 - 01:19] So to get started, go ahead and install this plugin. So copy that over to the front end. NPM install rollup plugin replace. Now we don't need to restart the front end dev server at this point because we're working on the configuration files for the dev server itself.

[01:20 - 01:52] So we're going to be working in rollup config.js. We're going to go ahead and need to import that plugin. So back in VS code, right in the root of the project, we've got rollup config.js. So open up that file and add in the replace plugin. And what we're going to do is create a constant variable called API root.

[01:53 - 02:17] And if production is true, then we're going to return empty. Otherwise, we're going to return localhost 3000. And I'll explain this more in a bit. But essentially, if production, we won't have a root URL. So it will just refer to the domain that the app is running on.

[02:18 - 02:35] So imagine we had school lunch.com, then it would just use school lunch.com slash API slash lunch week or whatever the API endpoint is. Otherwise, in a non production environment, we'll use localhost 3000 slash API slash lunch week.

[02:36 - 02:46] Okay, so this needs to be below the production variable there. So that'll create that API root constant.

[02:47 - 03:00] And then we're going to add this into the plugins section. So let's copy this bit of code right here.

[03:01 - 03:16] So down here under plugins right before Svelch, you can add it right at the top . Add that there. And then so we'll be able to refer to process.env.api root in our production code now.

[03:17 - 03:33] And this plugin will replace it with this value that we've set up right here. Okay.

[03:34 - 03:46] So now what we need to do is actually update our production code or our source code rather with this new convention. So let's copy this right here.

[03:47 - 03:57] So what we've done right here is hard coded localhost 3000. So we're going to change it to use process.env API root.

[03:58 - 04:06] And that's going to automatically handle our dev environment versus our production environment. So we get rid of that.

[04:07 - 04:19] And basically anywhere we're going to call it back end API, we'll use this convention. So this will be our new convention moving forward.

[04:20 - 04:34] And so let's now go ahead and run the front end NPM run dev. And just give it a test and make sure that it's still working.

[04:35 - 04:43] So refreshing that page over to the network tab. We can see this network call here running and fetching the data.

[04:44 - 04:56] So everything's working, it's building this URL correctly and we're good to go. And so that's it for this lesson.

[04:57 - 05:08] And even though development tools and frameworks have come a long way, there's still a ton to learn, but we're doing great. We're making a lot of great progress and we've got kind of a back end working.

[05:09 - 05:18] We've got our front end looking good. And what we're going to do in the next module is dive into back end persistence using Postgres.

[05:19 - 05:27] And that'll make it so that our API can actually read, update and save real user created data. Thank you.

[05:28 - 05:29] We'll look forward to seeing you next time.