How to Use the MEAN Stack VPS Template

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 andcreate a new directoryfor 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-appcd 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.jsonfile:

npm init -y

Then,i nstall Express.js, a web application framework for Node.js:

npm install express

Now, create a basic Express server. Create a file named server.jsand 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 globallyusing 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.