Configure a React & Redux Application For Production Deployment and Deploy to Now
In this lesson, we’ll make a few small changes to our scripts and add some environment variables that will be used at build time to get our application ready to be deployed to a production environment using the now service. Once properly configured, we’ll use the now CLI and publish our application to a production server.
[00:00] Let's refactor our application to prepare for deployment. We'll start my making some changes to our development setup. In my package.json, I have a start script that runs react scripts start. We want to keep this and I want to use this for development. I'm going to rename this dev to free up the start command for our actual production run.
[00:20] For now, we'll just change this and we'll save our package.json. Then, in the root of my project, I'm going to add a new file and I'm going to call that .emv. Create react that comes with build and support for .m files that allow us to declare environment variables that are different between environments.
[00:41] We're going to prefix our environment variables with react_app and I'm going to call this one baseURL, and this is going to be the base URL that we use to make our api calls. I'm going to keep my development setup for now and I'm going to use localhost 8080/todos and I can save that.
[01:01] Now, we need to refactor our service code to use this baseURL. I'm going to open todoservices.js and at the top of the file, I'm going to declare a new constant, which I'm going to call baseURL, and I'm going to set that to equal process.emv.react_app_baseURL.
[01:22] With that defined, I'm going to update my api calls to use baseURL and I can do the same thing here, and then, down here, where I need to pass in an ID, I'm just going to replace this string with my baseURL constant, and then I'll do the same thing for destroy to-do. I'm going to need to make sure we keep that slash in there, so I'll fix that one, and I can save that.
[02:08] Now, when web pack builds their application, it'll detect their environment, and it will replace this process.emv.react_app_baseURL with the string that we defined in our .emv file. Now, with that done, I'm going to switch to a terminal and start my application over again.
[02:29] In one terminal window, I'm going to run yarndev-server to start up the JSON server that's going to host our api, and in another tab, I'll type yarndev to run our dev command that we just updated.
[02:46] When our application starts back up and the browser loads, it's going to load our to-dos, which tells us that our api is still working even though now we're relying on this environment variable. Now that we've verified that our refactor hasn't broken anything, let's go back to package.json, and replace the start script that we renamed earlier.
[03:08] When we're running in dev mode, we want to use react scripts because we want to take advantage of all the thing that the dev server has to offer. For our deployment, however, we want to deploy this with a single server that handles both our front end and our back end api.
[03:22] We're going to rely on JSON server and we can call it here because it's dependency of our project, and it comes with a static flag that allows us to pass a directory that we're going to serve static files from. When we run the build script, it's going to put the production version of our application in a directory called build.
[03:41] That's where we want to serve our static files from and we want to continue to serve our data from our db.json file, so add that there. I'm going to save this. Then, back in the root of my project, I'm going to add another new file and this is going to be .emv.production and this is going to supply production values when we build with the production environment flag.
[04:09] I'm going to copy my value from .emv, I'm going to paste it here, and I'm going to replace the URL with ./todos because our api server and our static file server are the same location, all we have to do is give it a relative path and I can save this. With everything set up, let's switch to a terminal, test out our build and our start scripts.
[04:39] First, I'm just going to CTRL + C and kill the react scripts server, and I'm also going to switch to the tab that's running JSON server and I'm going to stop that. Now, neither one of my servers are running. I'm going to build the application by running yarnbuild. When that's finished, I'm going to clear the screen.
[05:01] I'm going to test out my start script by running yarnstart and we'll see that this is running at localhost 3000, so I can switch back to the browser, and I'm going to reload and verify that I am now getting my production build from that JSON server instance.
[05:20] If I switch back to the terminal, we can see the JSON server has handled all of the requests to get my static files as well as my api calls. Now that we know everything is working, I'm going to shut this down, clear out my terminal and I'm going to deploy this site to NOW.
[05:39] I can install NOW using mpninstall-gnow but I already have it installed, so I'm just going to run it and I'm in the root of my directory. All I have to do is type in the NOW command. It'll create a URL, which has been copied to my clipboard.
[06:00] Once that complete, I can switch back to the browser, I can paste in the URL and we'll see our react application running in a production environment hosted on NOW. We'll see that our data is loaded from the api. We can add new to-dos. They'll be saved to the server. We can toggle them. We can delete them and our filters work.