1. Overview
The MERN stack combines MongoDB, Express, React, and Node.js to create a full-stack JavaScript environment for building Web applications. While developing a MERN application can be exciting, deploying it correctly is very important. A well-executed deployment ensures that the application runs smoothly, securely, and efficiently in a production environment.
In this tutorial, we explore ways to properly deploy a MERN application to a hosting service.
2. Preparing the MERN Application for Deployment
Before we can deploy an application, we need to make sure it’s ready for the production environment. This preparation phase involves three steps:
- optimizing the React frontend
- configuring the Express backend
- setting up the MongoDB connection
Let’s break down each of these crucial steps.
2.1. Optimizing the React Frontend
To begin with, we optimize a React frontend by removing any unnecessary dependencies and minimizing the bundle size. One effective approach is to use tools like the production mode of Webpack to automatically apply optimizations:
// webpack.config.js
module.exports = {
mode: 'production',
// other configurations...
};
Implementing this configuration sets Webpack to production mode, which automatically applies several optimization tools to the code. In particular, these include minification and tree shaking, resulting in a smaller, more efficient bundle that loads faster in the browser.
Furthermore, we ensure that the React components are efficiently rendered. To achieve this, we can utilize React’s built-in performance optimization techniques like memorization:
import React, { useMemo } from 'react';
function ExpensiveComponent({ data }) {
const processedData = useMemo(() => {
// Expensive computation here
return data.map(item => item * 2);
}, [data]);
return <div>{processedData.join(', ')}</div>;
}
In the code example above, we demonstrate how we can leverage the useMemo hook to memorize expensive computations, thereby preventing unnecessary re-renders and improving performance.
2.2. Configuring the Express Backend
Now that we’ve optimized the front end, let’s explore the Express backend.
Here, we ensure Express is configured correctly for production. This includes setting appropriate error handling and enabling compressions:
const express = require('express');
const compression = require('compression');
const app = express();
app.use(compression());
// Error handling middleware
app.use((err, req, res, next) => {
console.error(err.stack);
res.status(500).send('Something went wrong!');
});
// Other routes and middleware...
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
In this example, we added compression middleware to reduce the size of the server responses, and we’ve included basic error-handling middleware. Additionally, the PORT variable is set to use the hosting service-provided port or default to 3000, which is crucial for proper deployment.
2.3. Setting up MongoDB Connection
Lastly, we ensure the MongoDB connection is secure and efficient.
To accomplish this, we can use environment variables to store sensitive information and implement connection pooling:
const mongoose = require('mongoose');
const MONGODB_URI = process.env.MONGODB_URI || 'mongodb://localhost/myapp';
mongoose.connect(MONGODB_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
poolSize: 10 // Adjusted based on the application needs
});
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'MongoDB connection error:'));
db.once('open', () => console.log('Connected to MongoDB'));
This code sets up a connection to MongoDB using environment variables for the URI and implements connection pooling for better performance. In this way, the hosting service provides the connection string to the application.
3. Choosing a Suitable Hosting Service
Now that the application is prepared, the next step is selecting an appropriate hosting service.
The choice of hosting service can significantly impact the application’s performance, scalability, and ease of management.
When it comes to evaluating hosting options for MERN applications, we usually consider several factors:
- support for Node.js and MongoDB
- scalability options
- deployment ease and CICD integration
- cost and pricing structure
- performance and reliability
Among the popular hosting services for MERN applications are Heroku, DigitalOcaen, and AWS. Notably, each has its strengths, so we should choose based on specific requirements.
Once the hosting platform is decided, we can then move on to the actual deployment process.
4. Deploying the Frontend
With the hosting service selected, we can now deploy the React frontend. The process typically involves building the application, configuring static file serving, and setting up environment variables. Let’s walk through each of these steps in detail.
4.1. Building the React Application
To begin with, we create a production build of the React application:
$ npm run build
This simple command creates optimized static files in the build directory, which the hosting service serves.
4.2. Configuring Static File Serving
Following the build process, we configure the server to serve the static files in the build directory. When using Express, we can add some basic code:
const path = require('path');
const express = require('express');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
This code serves the static files from the build directory and routes all requests to index.html, thereby enabling client-side routing.
4.3. Setting up Environment Variables
Lastly, let’s set up environment variables for the frontend. Environment variables enable us to manage configuration settings that may change between different deployment environments, such as development, staging, and production.
It’s worth noting that many hosting services provide ways to configure environment variables through their dashboard or CLI.
As an example, on Heroku, we can set environment variables via the config:set subcommand:
$ heroku config:set REACT_APP_API_URL=https://my-api.herokuapp.com
Once set, we can access these variables in the React application through precess.env:
const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:3000/api';
console.log(`API requests will be sent to: ${API_URL}`);
// We can then use API_URL in our fetch requests
fetch(`${API_URL}/users`)
.then(response => response.json())
.then(data => console.log(data));
In this instance, we set a default value of http://localhost:3000/api to be used if the environment variable isn’t set. This approach is particularly useful for local development.
Moreover, for security reasons, React only exposes environment variables prefixed with REACT_APP_. This precaution prevents accidentally exposing sensitive environment variables to the client-side code. For instance:
- REACT_APP_API_URL will be accessible in the React code
- SECRET_API_KEY will not be accessible, protecting sensitive information
By leveraging environment variables, we can easily switch between different API endpoints or configuration settings without changing the code, thus making the deployment process more flexible and secure.
5. Deploying the Backend
With the frontend ready to go, we can move on to deploying the Express backend.
5.1. Containerizing the Express Server
To begin with, containerization can make the deployment more consistent and easier to manage. For this purpose, we can use Docker to containerize the Express server:
FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]
This Dockerfile sets up a Node.js environment, installs the dependencies, and starts the server.
5.2. Configuring Server Environment
Following the containerization, we should ensure the server is configured correctly for the production environment. This step includes setting appropriate headers and using secure cookies:
const express = require('express');
const helmet = require('helmet');
const app = express();
app.use(helmet());
app.use(express.json());
app.use(session({
secret: process.env.SESSION_SECRET,
cookie: { secure: true, httpOnly: true, sameSite: 'strict' }
}));
// Routes and other middleware...
In this code snippet, we’ve added the helmet middleware for setting secure headers and configured the session cookies to be secure.
5.3. Handling Database Connections
Finally, we ensure the database connections are handled correctly in the production environment. To achieve this, we must use connection pooling and implement retry logic:
const mongoose = require('mongoose');
const connectDB = async () => {
try {
await mongoose.connect(process.env.MONGODB_URI, {
useNewUrlParser: true,
useUnifiedTopology: true,
poolSize: 10
});
console.log('MongoDB connected');
} catch (error) {
console.error('MongoDB connection failed:', error.message);
process.exit(1);
}
};
connectDB();
// Implement connection event listeners
mongoose.connection.on('disconnected', connectDB);
This code sets up a connection to MongoDB with pooling and implements a retry mechanism in case of disconnections. By doing so, we ensure robust and efficient database connectivity in the production environment.
6. Setting up Continuous Integration and Deployment (CICD)
To further streamline the deployment process, we should implement a CICD pipeline. This automates the testing, building, and deployment processes, ensuring consistent and reliable updates to the application.
6.1. Implementing Automated Testing
Firstly, we set up automated testing. We can use tools like Jest for both frontend and backend testing:
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
This code snippet demonstrates a basic test for a React component.
6.2. Configuring Deployment Pipelines
Following the setup of automated testing, we can set up a deployment pipeline using a tool like GitHub Actions:
name: Deploy
on:
push:
branches: [ main ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Use Node.js
uses: actions/setup-node@v2
with:
node-version: '14'
- run: npm ci
- run: npm test
- run: npm run build
- name: Deploy to Heroku
uses: akhileshns/[email protected]
with:
heroku_api_key: ${{secrets.HEROKU_API_KEY}}
heroku_app_name: "your-app-name"
heroku_email: "[email protected]"
This workflow runs the tests, builds the application, and deploys it to Heroku whenever we push to the main branch.
7. Securing the Deployed Application
Indeed, security is paramount for any deployed application. Especially in a production environment, we usually need to implement HTTPS, set up firewalls and access controls, and handle authentication and authorization properly.
7.1. Implementing HTTPS
To begin with, it’s worth noting that most hosting services provide HTTPS by default. However, if this isn’t the case, we can use services like Let’s Encrypt to obtain free SSL certificates.
After that, we consider the respective stack when configuring the certificate for use.
7.2. Setting up Firewalls and Access Controls
Following the implementation of HTTPS, we configure the server’s firewall to only enable necessary traffic. If utilizing a cloud provider, we can use their security group features to control access.
If using bare metal machines or virtual instances, the application and access restrictions depend on the respective OS and platform.
7.3. Handling Authentication and Authorization
For authentication and authorization, we can use middleware like Passport.js:
const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
passport.use(new LocalStrategy(
function(username, password, done) {
User.findOne({ username: username }, function (err, user) {
if (err) { return done(err); }
if (!user) { return done(null, false); }
if (!user.verifyPassword(password)) { return done(null, false); }
return done(null, user);
});
}
));
app.post('/login', passport.authenticate('local', {
successRedirect: '/',
failureRedirect: '/login'
}));
This code snippet sets up a local authentication strategy using Passport.js.
By implementing such security measures, we ensure that the deployed application is protected against common vulnerabilities and unauthorized access attempts.
8. Monitoring and Scaling
Once the application is deployed and secured, we focus on monitoring and scaling.
8.1. Setting up Application Monitoring
We can use tools like New Relic or Datadog for comprehensive application monitoring. These platforms provide insights into the application’s performance and help identify bottlenecks.
8.2. Implementing Logging and Error Tracking
For logging and error tracking, we can use services like Sentry:
const Sentry = require("@sentry/node");
Sentry.init({ dsn: "SENTRY_DSN" });
app.use(Sentry.Handlers.requestHandler());
// Routes here
app.use(Sentry.Handlers.errorHandler());
The code above initializes Sentry and sets up error-handling middleware.
9. Conclusion
In this article, we talked about how we can deploy a MERN stack application properly.
In conclusion, deploying a MERN application is a multifaceted process that requires careful planning and execution, considering the technologies used at every step.