How to Use the MEAN Stack VPS Template
TheMEAN stackis a popular full-stack development framework that comprisesMongoDB,Express.js,Angular, andNode.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 ourMean Stack VPS template, you will also findPM2,Certbot, andNginxpre-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.<code>mkdir mean-stack-appcd mean-stack-app</code>
Step 2 Set Up the Backend With Express.js and Node.js
First,initialize a Node.js project. Run the following command to initialize apackage.jsonfile:
<code>npm init -y</code>
Then,install Express.js, a web application framework for Node.js:
<code>npm install express</code>
Now,create a basic Express server. Create a file namedserver.jsand set up a basic Express server:
<code>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}`);});</code>Finally, start your Express server by using this command:
<code>node server.js</code>
Open your browser and visithttp:///your_vps_ip:3000to see theHello MEAN Stack!message. Make sure to replaceyour_vps_ipwith theIP address of your server.
Step 3 Set Up Frontend With Angular
Install the Angular CLI globallyusing the following command:
<code>npm install -g @angular/cli</code>
Inside your project directory, run the following command togenerate a new Angular app:
<code>ng new angular-app</code>
Follow the prompts to configure your app. After that, go to the Angular app directory:
<code>cd angular-app</code>
And start the Angular development server:
<code>ng serve</code>
Open your browser and visithttp:///your_vps_ip:4200to see your Angular app. Make sure to replaceyour_vps_ipwith theIP address of your server.
Step 4 Connect Express.js and Angular
Update your Express server (server.js) to serve the Angular app:
<code>const express = require('express');const path = require('path');const app = express();const port = 3000;// Serve Angular appapp.use(express.static(path.join(__dirname, 'angular-app/dist/angular-app')));// Handle all other routesapp.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}`);});</code>Build your Angular app for production:
<code>ng build</code>
This will create adistfolder inside the Angular app directory.
Finally, go back to the root project directory and run your updated Express server:
<code>node server.js</code>
Visithttp://your_vps_ip:3000to see your MEAN stack app with Angular.
Congratulations! Youve 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.
