Demystifying Deployment: A Step-by-Step Guide to Deploying Your MERN Stack App on Render
Deploying Your MERN Stack App on Render: A Step-by-Step Guide to Cost-Free Hosting
Introduction
Nowadays, the MERN stack is rapidly gaining popularity, and deploying MERN projects has become essential. In this blog, I will guide you on how to deploy your MERN projects for free using render.com.
I have divided the content into sections.
- Database Setup
- Preparing Your App for Deployment
- Backend Deployment on Render
- Frontend Deployment on Render
Database Setup
We are utilizing MongoDB Atlas for this purpose.
1. Click on Todo.
At this point, you’ll need to create a new project.
2. Click on New Project.
3. Type “Deploy”.
Here, assign a name of your choice to the project.
4. Click on Create Project.
5. Click on Create.
6. Select M0…
7. Click on Create.
8. Copy the username and password.
9. Click on Create User.
10. Type “for all IP”.
Setting MongoDB to use “0.0.0.0” as its IP address enables it to be accessed from any device.
11. Click on Add Entry.
12. Click on Finish and Close.
13. Click on Go to Overview.
Up to this point, we have created the database. Now, let’s move on to the next step
Preparing Your App for Deployment
At this juncture, I’m assuming that you possess a file structure resembling the following:
Next, you’ll need to create a package.json file with the following content:
{
"name": "todo-mern",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"install-server": "cd Server && npm install",
"start-server": "cd Server && node index.js",
"install-client": "cd client && npm install",
"build-client": "cd client && npm run build",
"start-client": "cd client && npm run start"
},
"keywords": [],
"author": "",
"license": "ISC"
}Include these lines in your package.json file.
“install-server”: “cd Server && npm install”
This script installs the necessary tools for your backend (server). It moves to the “Server” folder and runs the command to install all required components.
“start-server”: “cd Server && node index.js”
This script starts your backend server. It goes to the “Server” folder and launches the server using the “index.js” file.
“install-client”: “cd client && npm install”
This script installs what you need for your front end. It switches to the “client” folder and installs everything listed in the package file.
“build-client”: “cd client && npm run build”
This script builds your front end for deployment. It enters the “client” folder and creates an optimized version of your app that’s ready to go live.
“start-client”: “cd client && npm run start”
This script kicks off your front-end development server. It enters the “client” folder and starts a server for you to work on your app locally.
Upon completing these steps, you can proceed to render.com for the backend configuration.
Backend Deployment on Render
1. Click on New.
2. Click on Web Service.
4. Click on Connect.
At this stage, you should connect the repository that you intend to deploy.
5. Type “todo-medium-BE”.
Provide a name for the backend web service in this field.
6. Type “npm run install-server”.
7. Type “npm run start-server”.
8. Click on Advanced.
9. Add Environment Variable.
10. Add Environment value here.
mongodb+srv://uomidealize:<password>@cluster0.0qg7frn.mongodb.net/11. Click on Create Web Service.
Next, you’ll obtain the link for your backend
1. Click on todo-medium-BE.
2. Click on Copy.
Frontend Deployment on Render
1. Click on New.
2. Click on Static Site.
3. Click on Connect the repo.
4. Type “todo-medium-FE”.
Provide a name for the frontend static website e in this field.
5. Type “npm run install-client && npm run build-client”.
6. In the Publish directory Type “./client/build”.
7. Click on Advanced.
8. Click on Add Environment Variable.
9. Type “REACT_APP_API_URL”.
In this section, add the environment variable
10. In env variable Type “https://todo-medium-be.onrender.com/api/todos”.
We will retrieve this link from the backend Render URL: https://todo-medium-be.onrender.com, and then append ‘/api/todos’ as the endpoint in Node.js
11. Click on Create Static Site.
Finally, here is the link to your deployed application
1. Click on todo-medium-FE.
2. Click on Copy.
You can visit the website by following this link: https://todo-medium-fe.onrender.com
Conclusion
In conclusion, you’ve successfully navigated the deployment process of your MERN stack app on Render. From setting up the database to deploying both the backend and front end, you’ve gained hands-on experience making your app live.
To explore further or contribute, check out the complete source code on my GitHub repository: GitHub — TodoDeploy.
Armed with this knowledge, you’re ready to confidently deploy MERN apps and embark on your development journey. Thanks for joining me on this deployment adventure!
About the Author
I’m passionate about making technology accessible. Connect with me on [LinkedIn] to learn more about my work. Feel free to reach out with your feedback and questions. Happy coding!
