How to Use the MEVN Stack VPS Template
TheMEVN stackis a collection of JavaScript-based technologies used for buildingweb applications. It consists of four main components:
MongoDB, a flexible NoSQLdatabase
Express.js, aweb application frameworkfor Node.js
Vue.js, a progressive JavaScriptframework for building user interfaces
Node.js, a JavaScript runtime forserver-side execution
, we offer theUbuntu 22.04 VPS templatewithMEVN stack pre-installed. Once youinstall this templateon your server, follow the steps below ?
Step 1 Set Up Your Project
Open yourterminalandcreate a new directoryfor your MEVN stack project:
<code>mkdir mevn-stack-appcd mevn-stack-app</code>
Step 2 Set Up the Backend With Express.js and Node.js
Initialize aNode.js project. Run the following command to initialize a package.json file:
<code>npm init -y</code>
Create a basicExpress server. Create a file named server.js and set up a basic Express server:
<code>const express = require('express');const app = express();const port = 3000;app.get('/', (req, res) => {res.send('Hello MEVN Stack!');});app.listen(port, () => {console.log(`Server is running on port ${port}`);});</code>Now,start your Express serverby using this command:
<code>node server.js</code>
Step 3 Set Up Frontend With Vue.js
Inside yourproject directory, run the following command togenerate a new Vue app:
<code>vue create vue-app</code>
Follow the prompts to configure your app. After that, go to theVue app directory:
<code>cd vue-app</code>
And start theVue development server:
<code>npm run serve</code>
Step 4 Connect Express.js and Vue.js
Update your Express server (server.js) to serve the Vue app:
<code>const express = require('express');const path = require('path');const app = express();const port = 3000;// Serve Vue appapp.use(express.static(path.join(__dirname, 'vue-app/dist')));// Handle all other routesapp.get('*', (req, res) => {res.sendFile(path.join(__dirname, 'vue-app/dist/index.html'));});app.listen(port, () => {console.log(`Server is running on port ${port}`);});</code>Build your Vue app for production:
<code>npm run build</code>
This will create a
distfolder inside the Vue app directory.Step 5 Run Your MEVN Stack App
Finally, go back to theroot project directoryand run your updated Express server:
<code>node server.js</code>
Finally, visit
http://your_vps_ip:3000to see your MEVN stack app with Vue. Make sure to replaceyour_vps_ipwith the actualIP address of your server?Congratulations! Youve set up a basic MEVN 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 Vue.js.
