{"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-08-14T04:18:32","modified_gmt":"2026-08-14T04:18:32","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 class=\"intercom-content-link\" href=\"https:\/\/www.hostinger.com\/support\/1583571-what-are-the-available-operating-systems-for-vps-at-hostinger\/\" target=\"_blank\" rel=\"noopener\">Ubuntu 22.04 VPS template<\/a><\/b> with <b>MEVN stack pre-installed<\/b>. Once you <b><a class=\"intercom-content-link\" href=\"https:\/\/www.hostinger.com\/support\/4965922-how-to-change-the-operating-system-of-your-vps-at-hostinger\/\" target=\"_blank\" rel=\"noopener\">install this template<\/a><\/b> on your server, follow the steps below<\/p><h2 id=\"h_e3dec1d952\">Step 1 &mdash; Set up your project<\/h2><p class=\"no-margin\">Open your <b><a class=\"intercom-content-link\" href=\"https:\/\/www.hostinger.com\/support\/7978544-how-to-use-the-browser-terminal-in-hostinger\/\" target=\"_blank\" rel=\"noopener\">terminal<\/a><\/b> and <b>create a new directory<\/b> for your MEVN stack project:<\/p><pre><code>mkdir mevn-stack-app\r\ncd mevn-stack-app<\/code><\/pre><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');\r\nconst app = express();\r\nconst port = 3000;\r\n\r\napp.get('\/', (req, res) =&gt; {\r\n res.send('Hello MEVN Stack!');\r\n});\r\n\r\napp.listen(port, () =&gt; {\r\n console.log(`Server is running on port ${port}`);\r\n});\r\n<\/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><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><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');\r\nconst path = require('path');\r\nconst app = express();\r\nconst port = 3000;\r\n\r\n\/\/ Serve Vue app\r\napp.use(express.static(path.join(__dirname, 'vue-app\/dist')));\r\n\r\n\/\/ Handle all other routes\r\napp.get('*', (req, res) =&gt; {\r\n res.sendFile(path.join(__dirname, 'vue-app\/dist\/index.html'));\r\n});\r\n\r\napp.listen(port, () =&gt; {\r\nconsole.log(`Server is running on port ${port}`);\r\n});\r\n<\/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><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 class=\"intercom-content-link\" href=\"https:\/\/www.hostinger.com\/support\/5139756-how-to-find-your-vps-ip-address-at-hostinger\/\" target=\"_blank\" rel=\"noopener\">IP address of your server<\/a><\/b><\/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":3,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/530\/revisions"}],"predecessor-version":[{"id":15634,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/530\/revisions\/15634"}],"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}]}}