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.
I get an error trying to use baseUrl:
src/lib/todoServices.js:5 2 | 3 | export const getTodos = () => { 4 | return fetch(baseUrl)
5 | .then(res => res.json()) 6 | } 7 | 8 | export const createTodo = (name) => {
Great course...But why not separate actions to separate file?
Thanks!
I find that having actions, action creators and reducers in separate files makes it a little more difficult to add or change code because you end up going to several source files to do it.
I also thought this approach would make following along through videos easier, as you don't have to try to keep track of quite as many file changes.
This choice really comes down to personal preference, so you should follow whatever approach works for you and your team.
Nearly there...
I've managed to authenticate with now.sh, but when attempting to push, I receive the output held at https://gist.github.com/paulspencerwilliams/ab607b740f5b4dfd18cf58b1b1568a3a
Paul,
Looks like a problem with permissions when json-server tries to create the default db.json file. Maybe try putting a db.json file in your build folder with the json predefined as:
{
todos: []
}
Hope this works for you.
Great course! Thanks a lot Andrew! I was stuck setting the .env variable, I found that any property on these files must be prefixed REACT_APP... in order to be available in the process object.
I've just tried with empty db.json file as suggested, and with no db.json file, and neither worked with the same error message :-/
Hey Paul,
I've just tried with empty db.json file as suggested, and with no db.json file, and neither worked with the same error message :-/
When you run your npm script to start json-server which user owns the process? It should be you your user.
This is an exceedingly well structured course, which leads you incrementally through successive designs from first principles to best practice. This gave me a deeper understanding of the concepts and techniques I was previously using in 'idiot savant' mode. Thanks Andrew, good job.
Thank you for this course. I also like the approach to keep the reducer and actions in one file.
This is an exceedingly well structured course, which leads you incrementally through successive designs from first principles to best practice. This gave me a deeper understanding of the concepts and techniques I was previously using in 'idiot savant' mode. Thanks Andrew, good job.
Thank you, glad you found it valuable!
Awesome work. I like the incremental approach followed by the instructor.
Great course. How would one go about testing a component that is connected to react-redux?
After running "now", the deployment shows a directory listing. Don't we need a now.json?
Enviroment variable mapping does not work. Even if I use name starting with REACT_APP.
Great course...But why not separate actions to separate file?