How to clone and deploy an example MERN stack REST API in 30 minutes
Word Game DB is a read-only REST API built with the MERN stack (MongoDB, Express, React, and Node.js). It is intended to be used for educational purposes by anyone who would like to practice their coding skills by building a word game that incorporates an API.
Live Link
Here’s my live app, deployed through Heroku with a custom domain:
In this article, I will show you how to clone this application, run it locally on your computer, and deploy it to Heroku, all in as little as 30 minutes!
Run Locally
In order to run this application locally, you must have node installed on your computer. To check if you already have it installed, enter node -v in your terminal. If you do not have node, you can install it here.
Once you have confirmed that node is installed, cd into a folder on your computer and run the following command to clone the repository:
git clone https://github.com/LucasSilbernagel/wordGameDB.git
Then cd into the root folder and open it in your code editor. For Visual Studio Code:
cd wordGameDB
code .
Next, follow these steps to set up a free database with MongoDB Atlas:
https://docs.atlas.mongodb.com/getting-started
- When adding a connection IP address, click Allow Access from Anywhere.
- Make sure to save your username and password when creating a database user.
- For the connection method, I recommend clicking on MongoDB Compass. Installing and using MongoDB Compass is optional, but clicking on a connection method will show you your database connection string.
In the root folder of your app, create a new file called .env and save your connection string in it with a key of DB. Make sure to replace the password variable with your database user password. Your username should already be populated. The file should now look something like this:
DB = mongodb+srv://demoUser:12345pass@cluster0.ywxa5.mongodb.net/test
There should be no quotation marks or brackets in this file.
Next, you will need to un-comment some code in order to set up an endpoint and a form that will allow you to post new items to the database:
- routes > api.js lines 6 to 10
- client > src > components > Home > Home.js lines 1 and 8
Next, install all of the required dependencies for both the root folder and the client folder. cd into the client folder and run npm install .
Then return to the root folder and run npm install again.
To start up the app, make sure you are in the root folder and then run npm run dev in your terminal. This should start both your app's server and front end in a single terminal window, and launch the app in a new browser tab. You are now running the app locally!
On the homepage, you will see a form to add a new word to your database. Test it out, and if you view your database in MongoDB Atlas or MongoDB Compass, you should see the data there! You may have to refresh the database. You can continue using this form to add items, or you can clone your first item directly in the database and delete items as necessary.
Deploy to Heroku
Before deploying, remember that you un-commented some code earlier to be able to post new data. Don’t forget to delete or comment out that code again before deploying, otherwise anyone who uses your app will be able to add new data to your database. Alternatively, you could set up user authentication to allow users who are logged in to post new items!
To deploy the app, go to Heroku.
Register if you don’t already have an account, and log in.
Once logged into Heroku, create a new app.
Go to Deploy, and follow the on-screen instructions to deploy with Heroku CLI, or if you push your code to GitHub, you can deploy by connecting to your GitHub repository.
The .env file holding your database connection string is included in the .gitignore file of the project, so you will have to manually make that information available to Heroku. On the Settings page under Config Vars, click on Reveal Config Vars. You only need to add one: for the KEY, put DBand for the VALUE, put your connection string exactly as you have it in your .env file.
Once the Heroku deployment finishes, you should be able to view your live app! Depending on when you saved your Config Var, you may need to restart the app. To do so, click on More > Restart all dynos.
Example Implementation
I was inspired to create Word Game DB while building a hangman game with Vanilla JavaScript in the summer of 2020. I wanted to incorporate an API, but couldn’t find one that satisfied my requirements. Word Game DB meets those needs by returning a list of nouns, each of them associated with a category.
Other Resources
Before building Word Game DB, I took the Learn Node course by Wes Bos. If you would like more in-depth lessons on full-stack development while building out a more complex application, I highly recommend this course!
I also referred to this free tutorial as a starting point for my application. It’s a great example of a simplified MERN stack app.
