Deploy your full stack MERN project for FREE!!!!
Hi guys, so this is my third article in Hashnode, and I am excited to share with you my modest knowledge about deploying the MERN project.
1- deploy the backend project
So to deploy your backend project, there are multiple options the one I use personally is Render it's so simple and efficient platform, first of all, you have to create an account using your Github and give access to Render to your repositories, then in your dashboard, you click new and choose web service
after that, you connect the repository of your project in my case "MERNProducts"
if you didn't find your repo then go to configure account and give access to Render to that repo
then you fill out the form
Name: choose whatever name you want
Region: leave it as default
Branch: choose your branch
Root directory: the root of your backend project in my case it's "server"
build command: Choose Yarn
start command: depends on your config but in most cases, it's either "npm start" or "npm run dev"
add your env variables in the advanced section
after that, you click on Create web service and congrats your backend project is live
🎉
2- deploy your front-end project
to deploy your front-end project there are multiple choices but the one I use personally is Netlify which is simple, fast and efficient.
First, you have to create a Netlify account using your GitHub and choose "import an existing project"
choose "Deploy with GitHub"
finally, you fill out this form:
Base directory: directory of your front-end code which is usually in client
publish directory: the directory where your built project is placed in, if you are using a vite setup change it to "dist".
and add your env variables
Organize your env files (optional):
if you have a vite setup create two env files, one call it ".env.development" where you store your local env variables for example, your VITE_API_LINK equals to "localhost:5000", and the second one name it ".env.production" where your VITE_API_LINK equals to the API production link for example "myproject.render.com"
so that's it, your MERN project is deployed 🎉.
like and comment if you like the article