Creating Frontend Build

[00:00 - 00:08] To make our application work in production, we need to create a production build of our react application. This build will be hosted from our API server.

[00:09 - 00:17] We need to make some changes before we make a production build. Let's start with the agent.ts file.

[00:18 - 00:25] As you can see here, we have hardcoded the base URL. We are going to have different base URLs depending on development or production .

[00:26 - 00:34] So we need to store it in a way that it should use this in development. And if there is a different production URL, it should use that.

[00:35 - 00:44] And this is where the environment variables come into the picture. We can use .env files to store protected values such as the secret keys or the URLs.

[00:45 - 00:52] We can secure them once and use it anywhere in our application. This file should be located inside the root client folder.

[00:53 - 01:04] So here, so now we can create two files. One file will be .env.development.

[01:05 - 01:16] And another one being .env.production. Let's start with the development file.

[01:17 - 01:37] And here, all the keys should be prefixed with react_app. So we can write react_app_base_url is equal to HTTP localhost 5000/api.

[01:38 - 01:47] And inside the .env files, we don't have to mention the values inside quotation marks. Now, let's write the same base URL inside our production.

[01:48 - 02:00] So I can copy this value and go to .env.production file. And now this will be equal to /api/ Now we can go back to agent.tas file.

[02:01 - 02:21] And instead of using this, we can use the values from .env files. To use them, we need to use process.env followed by the key, which in our case is react_app_base_url.

[02:22 - 02:29] This value will be taken depending on the environment. If we are in production, we will use value from .env.production.

[02:30 - 02:40] And if we are in development, we will use value from .env.development file. Now, in .NET applications, our frontend is served from the API project.

[02:41 - 02:53] And inside API project, there is another folder which is called wwwroot. So all our frontend code is located inside wwwroot folder, which will be inside the API project.

[02:54 - 03:07] So by default, the .NET application looks for the frontend code inside that particular folder. So what we need to do is we will write a script so that when we build our react code, it gets located inside API project inside the wwwroot folder.

[03:08 - 03:16] For this, we will have to go to the package.json file. So I will close everything and open package.json.

[03:17 - 03:29] And inside scripts, we have a build script. Now, inside this build script, we need to mention our build path so I can write build_path.

[03:30 - 03:49] This will be, and now we can mention API/wwwroot. So whenever we will run this command, the build code will be automatically stored inside the API project inside a new folder.

[03:50 - 03:55] A new folder which will be created when we build this. And that folder will be wwwroot.

[03:56 - 04:08] So let's open the terminal and let's shut the server and now we can run npm run build command. It will take some time to finish.

[04:09 - 04:13] Let's wait for that and come back. Welcome back.

[04:14 - 04:25] As you can see, we have a wwwroot folder with our frontend build files. It will also tell us the file sizes it has created after compressing and min ifying the code.

[04:26 - 04:39] So here we can see that our application is approximately 300 KB which will make it very easy for the browsers to cache the code and run it at a good speed. Our terminal also tells us how to serve it.

[04:40 - 04:45] We will do it after we configure it in our package. So let's configure this in our API project next.