{"id":530,"date":"2024-03-14T11:40:59","date_gmt":"2024-03-14T11:40:59","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2024\/03\/14\/9070856-how-to-use-the-mevn-stack-vps-template-at-hostinger\/"},"modified":"2026-03-16T12:12:00","modified_gmt":"2026-03-16T12:12:00","slug":"9070856-how-to-use-the-mevn-stack-vps-template-at-hostinger","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/9070856-how-to-use-the-mevn-stack-vps-template-at-hostinger\/","title":{"rendered":"How to Use the MEVN Stack VPS Template at Hostinger"},"content":{"rendered":"<p class=\"no-margin\">The <b>MEVN stack<\/b> is a collection of JavaScript-based technologies used for building<b> web applications<\/b>. It consists of four main components:<\/p><ul>\n<li>\n<p class=\"no-margin\"><b>M<\/b>ongoDB, a flexible NoSQL <b>database<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>E<\/b>xpress.js, a <b>web application framework<\/b> for Node.js<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>V<\/b>ue.js, a progressive JavaScript <b>framework for building user interfaces<\/b><\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>N<\/b>ode.js, a JavaScript runtime for <b>server-side execution<\/b><\/p>\n<\/li>\n<\/ul><p class=\"no-margin\">At Hostinger, we offer the <b><a href=\"\/support\/1583571-what-are-the-available-operating-systems-for-vps#h_ea21916da6\" target=\"_blank\" class=\"intercom-content-link\">Ubuntu 22.04 VPS template<\/a><\/b> with <b>MEVN stack pre-installed<\/b>. Once you <b><a href=\"\/support\/4965922-how-to-change-the-operating-system-for-your-vps\" target=\"_blank\" class=\"intercom-content-link\">install this template<\/a><\/b> on your server, follow the steps below &#128071;<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_e3dec1d952\">Step 1 &mdash; Set Up Your Project<\/h2><p class=\"no-margin\">Open your <b><a href=\"\/support\/7978544-how-to-use-the-browser-terminal\" target=\"_blank\" class=\"intercom-content-link\">terminal<\/a><\/b> and <b>create a new directory<\/b> for your MEVN stack project:<\/p><pre><code>mkdir mevn-stack-app<br>cd mevn-stack-app<\/code><\/pre><p class=\"no-margin\">\n<\/p><h2 id=\"h_3f2ec05ecf\">Step 2 &mdash; Set Up the Backend With Express.js and Node.js<\/h2><p class=\"no-margin\">Initialize a <b>Node.js project<\/b>. Run the following command to initialize a package.json file:<\/p><pre><code>npm init -y<\/code><\/pre><p class=\"no-margin\">Create a basic <b>Express server<\/b>. Create a file named server.js and set up a basic Express server:<\/p><pre><code>const express = require('express');<br>const app = express();<br>const port = 3000;<br><br>app.get('\/', (req, res) =&gt; {<br> res.send('Hello MEVN Stack!');<br>});<br><br>app.listen(port, () =&gt; {<br> console.log(`Server is running on port ${port}`);<br>});<br><\/code><\/pre><p class=\"no-margin\">Now, <b>start your Express server<\/b> by using this command:<\/p><pre><code>node server.js<\/code><\/pre><p class=\"no-margin\">\n<\/p><h2 id=\"h_1f4aa47354\">Step 3 &mdash; Set Up Frontend With Vue.js<\/h2><p class=\"no-margin\">Inside your<b> project directory<\/b>, run the following command to <b>generate a new Vue app<\/b>:<\/p><pre><code>vue create vue-app<\/code><\/pre><p class=\"no-margin\">Follow the prompts to configure your app. After that, go to the <b>Vue app directory<\/b>:<\/p><pre><code>cd vue-app<\/code><\/pre><p class=\"no-margin\">And start the <b>Vue development server<\/b>:<\/p><pre><code>npm run serve<\/code><\/pre><p class=\"no-margin\">\n<\/p><h2 id=\"h_e8a1292d4c\">Step 4 &mdash; Connect Express.js and Vue.js<\/h2><p class=\"no-margin\">Update your Express server (server.js) to serve the Vue app:<\/p><pre><code>const express = require('express');<br>const path = require('path');<br>const app = express();<br>const port = 3000;<br><br>\/\/ Serve Vue app<br>app.use(express.static(path.join(__dirname, 'vue-app\/dist')));<br><br>\/\/ Handle all other routes<br>app.get('*', (req, res) =&gt; {<br> res.sendFile(path.join(__dirname, 'vue-app\/dist\/index.html'));<br>});<br><br>app.listen(port, () =&gt; {<br>console.log(`Server is running on port ${port}`);<br>});<br><\/code><\/pre><p class=\"no-margin\">Build your Vue app for production:<\/p><pre><code>npm run build<\/code><\/pre><p class=\"no-margin\">This will create a <code>dist<\/code> folder inside the Vue app directory.<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_70bf25f77d\">Step 5 &mdash; Run Your MEVN Stack App<\/h2><p class=\"no-margin\">Finally, go back to the<b> root project directory<\/b> and run your updated Express server:<\/p><pre><code>node server.js<\/code><\/pre><p class=\"no-margin\">Finally, visit <b><code>http:\/\/your_vps_ip:3000<\/code><\/b> to see your MEVN stack app with Vue. Make sure to replace <b><code>your_vps_ip<\/code><\/b> with the actual <b><a href=\"\/support\/5139756-how-to-find-your-vps-ip-address\" target=\"_blank\" class=\"intercom-content-link\">IP address of your server<\/a><\/b> &#128161; <\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Congratulations! You&rsquo;ve 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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Getting started with the MEVN Stack VPS template at Hostinger<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[206],"tags":[],"class_list":["post-530","post","type-post","status-publish","format-standard","hentry","category-vps-os-and-templates"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/9070856-how-to-use-the-mevn-stack-vps-template-at-hostinger\/","default":1}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/530","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=530"}],"version-history":[{"count":0,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/530\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}