Push a React Query Builder API Server to Heroku With Git
Beginning the process of setting up a server to host the API
This lesson preview is part of the Building Advanced Admin Reporting in React course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Building Advanced Admin Reporting in React, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:13] If your application is still running on localhost 3000, you can go to the terminal and cancel the execution by pressing ctrl+c. We'll no longer need the development server after this lesson.
[00:14 - 00:29] To create a server that will host our application, we'll use Heroku since they have a free tier and it's easy to set up. You'll need to install the Heroku command line interface, which is linked in the transcript, and log in with your Heroku credentials.
[00:30 - 00:53] First, cd1 level to the root myapp directory, then run Heroku create. Next, provision a PostgreSQL database with the following command.
[00:54 - 01:22] Heroku addons colon create Heroku dash PostgreSQL colon hobby dash database. Next, create a file called proc file with the following command.
[01:23 - 02:00] To ignore the node modules folder in our environment variables, create a file called gitignore in the root myapp directory with the following contents. I'm just going to go back to Visual Studio Code to make this file.
[02:01 - 02:17] We're going to call it .gitignore and the contents are .env and node modules. Save that.
[02:18 - 02:35] Back in the terminal, create a package.json file using npm, except the defaults automatically by using the -y flag. So we'll do npm init -y.
[02:36 - 02:56] That creates our package.json file, which we can see here in the Visual Studio Code IDE. In the package.json file, update the script section to run our application locally when we run npm start and to build it on Heroku when we deploy it.
[02:57 - 03:20] In the script section, we'll do start or run nodemon, which we'll install in a minute. Server index.js.
[03:21 - 03:45] Post build will be cd client and npm install and npm run build. Save that.
[03:46 - 04:02] Now we need to install our dependencies for the server. We'll use the express application framework, pg for interacting with the database, react query builder to manage the SQL processing, and .env to manage our environment variables.
[04:03 - 04:23] Nodemon is the utility that will restart our server whenever source files change. So back in the terminal, we're going to run npm I express pg react because that 's a peer dependency to react query builder.
[04:24 - 04:42] React query builder and the .env package. When that's finished, we're going to run npm I --save dev nodemon because that 's a development dependency.
[04:43 - 04:51] We don't need that on the server. Press enter on that.
[04:52 - 05:15] Finally, make a folder called server cd into it and create a new file called index.js. So we'll do make their server cd server and touch index.js.
[05:16 - 05:26] Now we'll get the server to respond with our application code. The index.js file should start out with the following code.
[05:27 - 05:45] Let's open this up in Visual Studio Code. Next body parser, this will parse our request bodies.
[05:46 - 05:52] Let's see. Body parser.
[05:53 - 06:14] Express equals require express. The path is going to equal require path.
[06:15 - 06:34] And then we'll require our .env and run the config function off of that. Now configure a couple of variables.
[06:35 - 06:57] One is port and that's going to equal process.env.port or 5000 if we don't provide it. Then we'll also set up a const called dev mode.
[06:58 - 07:16] Process.env.dev mode equals equals the string true. Now make sure that's a string not the true Boolean type.
[07:17 - 07:27] This is going to read all those environment variables as a string. Now we're going to fire up our application by running the express function.
[07:28 - 07:53] And make sure we get the right working directory is going. That use express.static path.join.dername.
[07:54 - 08:14] And we're also going to app.use body parser.json. Okay, now we'll get the application to respond with our application files.
[08:15 - 08:33] So app.git and this will be the root directory. We'll pass that a function that has a request object and response objects.
[08:34 - 09:03] And we're just going to send file path.join.dername.plus. And we're going to send the function.build/index.html.
[09:04 - 09:16] And the last thing we need to do is listen on a certain port. So we're going to listen on the port variable.
[09:17 - 09:43] And when that's done, our callback function here is just going to log to the console that we are listening on which port. We either provided or 5,000 if we didn't provide it.
[09:44 - 09:52] Okay, save that off. To make sure everything is working, we'll need to build the client application and then run the server.
[09:53 - 10:01] CD back into the client folder and run npm run build. So back in the terminal, we'll cd client.
[10:02 - 10:07] Oops, sorry. Go back up to the root, then cd into the client.
[10:08 - 10:18] And run npm run build. And that'll take a few seconds to run.
[10:19 - 10:34] And once that's done, we're going to cd back up into the root directory and run npm start to start our server. Okay, that's finished.
[10:35 - 10:43] So we'll do cd back up into the root. So we're going to do the application start.
[10:44 - 10:50] And it should say listening on 5,000. And it does, which is great.
[10:51 - 11:17] So back in our application, we're going to view this application at local host port 5000. And sure enough, we get our application just like we had it before when we were running with React scripts.
[11:18 - 11:25] Let's check out everything. So our date fields get the date picker and the date keyword.
[11:26 - 11:39] Looks like everything's running smoothly. At this point, if you haven't committed your code with git, do so now.
[11:40 - 11:55] So I'm going to hit command T on the Mac to open another tab in the same working directory. And git add dot, which will add everything to the staging area.
[11:56 - 12:12] And then the next thing we're going to do is git commit dash M and give it a message. So in quotes, put your your commit message and press enter.
[12:13 - 12:35] And then the next thing you can do is deploy your application to Heroku by running git push Heroku main or git push Heroku master if your branch name is master. So git push Heroku master is what I would run since my branch name is master.
[12:36 - 12:58] [ Silence ]