The MEAN stack is a popular full-stack development framework that comprises MongoDB, Express.js, Angular, and Node.js:
MongoDB is a NoSQL database
Express.js is a server-side web application framework
Angular is a front-end framework for building dynamic user interfaces
Node.js is a server-side JavaScript runtime
The stack enables end-to-end JavaScript development, facilitating seamless communication between the server and client. Known for its flexibility and scalability, the MEAN stack is widely used to create modern, real-time web applications.
By using our Mean Stack VPS template, you will also find PM2, Certbot, and Nginx pre-installed to simplify the development and deployment process further.
Step 1 — Set Up Your Project
Open your terminal and create a new directory for your MEAN stack project. For convenience, inside the VPS, you can find the directory /root/application, which is pre-created and already has Express.js and Angular.
mkdir mean-stack-app
cd mean-stack-app
Step 2 — Set Up the Backend With Express.js and Node.js
First, initialize a Node.js project. Run the following command to initialize a package.json file:
npm init -y
Then, install Express.js, a web application framework for Node.js:
npm install express
Now, create a basic Express server. Create a file named server.js and set up a basic Express server:
const express = require('express');
const app = express();
const port = 3000;
app.get('/', (req, res) => {
res.send('Hello MEAN Stack!');
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});Finally, start your Express server by using this command:
node server.js
Open your browser and visit http:///your_vps_ip:3000 to see the Hello MEAN Stack! message. Make sure to replace your_vps_ip with the IP address of your server.
Step 3 — Set Up Frontend With Angular
Install the Angular CLI globally using the following command:
npm install -g @angular/cli
Inside your project directory, run the following command to generate a new Angular app:
ng new angular-app
Follow the prompts to configure your app. After that, go to the Angular app directory:
cd angular-app
And start the Angular development server:
ng serve
Open your browser and visit http:///your_vps_ip:4200 to see your Angular app. Make sure to replace your_vps_ip with the IP address of your server.
Step 4 — Connect Express.js and Angular
Update your Express server (server.js) to serve the Angular app:
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;
// Serve Angular app
app.use(express.static(path.join(__dirname, 'angular-app/dist/angular-app')));
// Handle all other routes
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'angular-app/dist/angular-app/index.html'));
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});Build your Angular app for production:
ng build
This will create a dist folder inside the Angular app directory.
Finally, go back to the root project directory and run your updated Express server:
node server.js
Visit http://your_vps_ip:3000 to see your MEAN stack app with Angular.
Congratulations! You've set up a basic MEAN stack application. From here, you can expand and enhance your application by adding database functionality using MongoDB and integrating additional features with Express.js and Angular.