Run the React App and Express API
Ryan Chenkie: [0:00] Open up the route Orbit folder and your code editor and open up a terminal window. We'll need two terminal windows to run both the application and the API.
[0:09] In the first terminal window, let's cd into orbit-app. This React app is built with create-react-app. What comes with create-react-app is an npm start command to start up the application on a dev-server. Once that starts, we can see the home page for the Orbit application.
[0:26] Open up a second terminal window. This is where we're going to run the API. Before we can successfully run it, we need to add something to our API folder here. That is, we need to come down to this .env.example file and we need to rename it. We need to essentially take off the .example from the end.
[0:48] The reason this is set up like this is that we don't want to commit our keys here, our Atlas URL which is going to contain a password and our JWT secret. We don't want to commit those to source control.
[1:00] The actual .env file here is being ignored by git, which means it does not go into source control. You have some structure for it for you to be able to work from. We include a .env.example file and then it's your responsibility to rename it and provide values here.
[1:17] The first value to provide here is going to be the Atlas URL. This is the connection string to your MongoDB Atlas cluster. The connection string example that they give you to copy over always points to this test database.
[1:29] I like to go in and rename it, to purpose this database, we're going to whatever project we're on. In this case, that is going to be Orbit. We're also going to need to provide the password for this user. That means we need to take out this password placeholder here and then paste in whatever our password is.
[1:48] Next, we'll need to put in the actual JWT secret. Again, this can just be something simple for this demo. You will want to put in a long, strong, unguessable key in production. Over here in the second terminal window, we can cd into orbit-api. Then we can run this command, npm run dev.
[2:06] Note that this is different than the command to run the React application. The command that we ran in the first terminal window was npm start. Over here for API, it's npm run dev.
[0:09] In the first terminal window, let's cd into orbit-app. This React app is built with create-react-app. What comes with create-react-app is an npm start command to start up the application on a dev-server. Once that starts, we can see the home page for the Orbit application.
[0:26] Open up a second terminal window. This is where we're going to run the API. Before we can successfully run it, we need to add something to our API folder here. That is, we need to come down to this .env.example file and we need to rename it. We need to essentially take off the .example from the end.
[0:48] The reason this is set up like this is that we don't want to commit our keys here, our Atlas URL which is going to contain a password and our JWT secret. We don't want to commit those to source control.
[1:00] The actual .env file here is being ignored by git, which means it does not go into source control. You have some structure for it for you to be able to work from. We include a .env.example file and then it's your responsibility to rename it and provide values here.
[1:17] The first value to provide here is going to be the Atlas URL. This is the connection string to your MongoDB Atlas cluster. The connection string example that they give you to copy over always points to this test database.
[1:29] I like to go in and rename it, to purpose this database, we're going to whatever project we're on. In this case, that is going to be Orbit. We're also going to need to provide the password for this user. That means we need to take out this password placeholder here and then paste in whatever our password is.
[1:48] Next, we'll need to put in the actual JWT secret. Again, this can just be something simple for this demo. You will want to put in a long, strong, unguessable key in production. Over here in the second terminal window, we can cd into orbit-api. Then we can run this command, npm run dev.
[2:06] Note that this is different than the command to run the React application. The command that we ran in the first terminal window was npm start. Over here for API, it's npm run dev.