All Collections
VPS OS and Templates
How to Use the MEAN Stack VPS Template
How to Use the MEAN Stack VPS Template

Getting started with the MEAN stack VPS Template

Updated over a week ago

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.

Did this answer your question?