This video is available to students only

Creating Frontend Build

In this lesson, we're going to create build for frontend

Creating frontend build#

To make our application work in production, we need to create a production build for our react application. This build will be hosted from our API server. We need to make some changes before we make a production build, so let's start with agent.ts file. As you can see, we have hardcoded base url. It's also for development so we need to store it in a way that it should use this in development and if there's a different production url, it should use that.

This is where environment variables come into the picture. We can use .env files to store protected values such as the secret keys or the url. We can secure them once and use them anywhere in our application. This file should be located inside the root client folder, so we can create two files called .env.development for our development related values and .env.production for production related values. Make sure you spell it exactly as I do otherwise the application won't be able to read the values from here.

Let's write the base url value inside development file. All the keys should be prefixed with REACT_APP, so we can write REACT_APP_BASE_URL=http://localhost:5000/api. We don't need to mention the values inside quotation marks. Inside production file, it will be /api. Now we can go back to the agent file and use these values. To use these values, we need to use process.env first. This will use the file depending on the environment. If the application is in development, it will use development env file. If process.env has value production, it will use the production file. So we can write process.env.REACT_APP_BASE_URL.

client/.env.development

Start a new discussion. All notification go to the author.