Week # 03: DevOps Learning Journey - Deploying a MERN CRUD Application:

In this blog post, I’ll walk you through deploying a MERN (MongoDB, Express.js, React.js, Node.js) stack CRUD (Create, Read, Update, Delete) application. We’ll cover setting up the frontend on Netlify, deploying the backend with Railway, and using MongoDB Atlas for our database.

Prerequisites

Before we start, ensure you have the following:

1. A MERN stack CRUD application ready for deployment.

2. MERN CRUD Application Frontend

3. MERN CRUD Application Backend

4. Accounts on Netlify, Railway, and MongoDB Atlas.

Step 1: Setting Up MongoDB Atlas

1. Create a MongoDB Atlas Account: If you don’t have one, sign up at MongoDB Atlas.

2. Create a Cluster: Follow the prompts to create a new cluster.

3. Database Access: Set up a database user with a strong password.

4. Network Access: Whitelist your IP address or set it to allow access from anywhere.

5. Connect to Cluster: Obtain your connection string. It should look like this:

    mongodb+srv://<username>:<password>@cluster0.mongodb.net/<dbname>?retryWrites=true&w=majority
   

6. Update Environment Variables: Add this connection string to your backend environment variables (.env file):

    MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/<dbname>?retryWrites=true&w=majority
   

Step 2: Deploying the Backend on the Railway

1. Create a Railway Account: Sign up at Railway.

2. New Project: Create a new project and link it to your GitHub repository containing your backend code.

3. Environment Variables: Add your environment variables, including the MongoDB connection string, to Railway.

4. Deploy: Click deploy and wait for Railway to build and deploy your backend. Note the URL provided by Railway for your backend.

Step 3: Deploying the Frontend on Netlify

1. Create a Netlify Account: Sign up at Netlify.

2. New Site: Create a new site and link it to your GitHub repository containing your frontend code.

3. Build Settings:

   • Build Command: npm run build (or your specific build command)

   • Publish Directory: build

4. Environment Variables: Add any necessary environment variables (e.g., API URLs).

5. Deploy: Click deploy and wait for Netlify to build and deploy your frontend. Netlify will provide you with a URL for your live site.

Step 4: Connecting Frontend to Backend

1. Update API URLs: Ensure your frontend code points to the correct backend URL provided by Railway.

2. Test Functionality: Go through your app to ensure all CRUD operations work seamlessly from frontend to backend.

Sample Deployed Application link

Conclusion

Deploying a MERN stack application involves setting up various services for each part of the stack. With MongoDB Atlas handling our database, Railway deploying our backend, and Netlify hosting our frontend, we have a robust, scalable, and efficient deployment setup.

Final Thoughts

This deployment process ensures that our application is live and accessible, ready to handle CRUD operations efficiently. Using these modern deployment services, we can easily scale and manage our application.

Happy coding and deploying!