{"id":573,"date":"2024-01-11T13:18:15","date_gmt":"2024-01-11T13:18:15","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2024\/01\/11\/8805712-how-to-use-the-mean-stack-vps-template-at-hostinger\/"},"modified":"2026-03-16T12:12:01","modified_gmt":"2026-03-16T12:12:01","slug":"8805712-how-to-use-the-mean-stack-vps-template-at-hostinger","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/8805712-how-to-use-the-mean-stack-vps-template-at-hostinger\/","title":{"rendered":"How to Use the MEAN Stack VPS Template at Hostinger"},"content":{"rendered":"<p class=\"no-margin\">The <b><a href=\"https:\/\/en.wikipedia.org\/wiki\/MEAN_(solution_stack)\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">MEAN stack<\/a><\/b> is a popular full-stack development framework that comprises <b><a href=\"https:\/\/www.mongodb.com\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">MongoDB<\/a><\/b>,<b> <a href=\"https:\/\/expressjs.com\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">Express.js<\/a><\/b>,<b> <a href=\"https:\/\/angularjs.org\/\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">Angular<\/a><\/b>, and <b><a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" class=\"intercom-content-link\" rel=\"noopener\">Node.js<\/a><\/b>:<\/p><ul>\n<li>\n<p class=\"no-margin\"><b>M<\/b>ongoDB is a NoSQL database<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>E<\/b>xpress.js is a server-side web application framework<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>A<\/b>ngular is a front-end framework for building dynamic user interfaces<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\"><b>N<\/b>ode.js is a server-side JavaScript runtime<\/p>\n<\/li>\n<\/ul><p class=\"no-margin\">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.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">By using our <b>Mean Stack VPS template<\/b>, you will also find <b>PM2<\/b>,<b> Certbot<\/b>, and<b> Nginx<\/b> pre-installed to simplify the development and deployment process further.<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_aa6edfb913\">Step 1 &mdash; Set Up Your Project<\/h2><p class=\"no-margin\">Open your terminal and <b>create a new directory<\/b> for your MEAN stack project. For convenience, inside the VPS, you can find the directory <code>\/root\/application<\/code>, which is pre-created and already has Express.js and Angular.<\/p><pre><code>mkdir mean-stack-app<br>cd mean-stack-app<\/code><\/pre><p class=\"no-margin\">\n<\/p><h2 id=\"h_a420eb37b1\">Step 2 &mdash; Set Up the Backend With Express.js and Node.js<\/h2><p class=\"no-margin\">First,<b> initialize a Node.js project<\/b>. Run the following command to initialize a <b>package.json<\/b> file:<\/p><pre><code>npm init -y<\/code><\/pre><p class=\"no-margin\">Then,<b> install Express.js<\/b>, a web application framework for Node.js:<\/p><pre><code>npm install express<\/code><\/pre><p class=\"no-margin\">Now, <b>create a basic Express server<\/b>. Create a file named <b>server.js<\/b> 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 MEAN Stack!');<br>});<br><br>app.listen(port, () =&gt; {<br> console.log(`Server is running on port ${port}`);<br>});<\/code><\/pre><p class=\"no-margin\">Finally, start your Express server by using this command:<\/p><pre><code>node server.js<\/code><\/pre><p class=\"no-margin\">Open your browser and visit <b>http:\/\/\/your_vps_ip:3000<\/b> to see the <b>Hello MEAN Stack!<\/b> message. Make sure to replace<b> your_vps_ip <\/b>with the <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>.<\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_586bf83332\">Step 3 &mdash; Set Up Frontend With Angular<\/h2><p class=\"no-margin\"><b>Install the Angular CLI globally<\/b> using the following command:<\/p><pre><code>npm install -g @angular\/cli<\/code><\/pre><p class=\"no-margin\">Inside your project directory, run the following command to <b>generate a new Angular app<\/b>:<\/p><pre><code>ng new angular-app<\/code><\/pre><p class=\"no-margin\">Follow the prompts to configure your app. After that, go to the Angular app directory:<\/p><pre><code>cd angular-app<\/code><\/pre><p class=\"no-margin\">And start the Angular development server:<\/p><pre><code>ng serve<\/code><\/pre><p class=\"no-margin\">Open your browser and visit <b>http:\/\/\/your_vps_ip:4200<\/b> to see your Angular app. Make sure to replace<b> your_vps_ip <\/b>with the <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>. <\/p><p class=\"no-margin\">\n<\/p><h2 id=\"h_f5d75f676b\">Step 4 &mdash; Connect Express.js and Angular<\/h2><p class=\"no-margin\">Update your Express server (server.js) to serve the Angular app:<\/p><pre><code>const express = require('express');<br>const path = require('path');<br>const app = express();<br>const port = 3000;<br><br>\/\/ Serve Angular app<br>app.use(express.static(path.join(__dirname, 'angular-app\/dist\/angular-app')));<br><br>\/\/ Handle all other routes<br>app.get('*', (req, res) =&gt; {<br> res.sendFile(path.join(__dirname, 'angular-app\/dist\/angular-app\/index.html'));<br>});<br><br>app.listen(port, () =&gt; {<br>console.log(`Server is running on port ${port}`);<br>});<\/code><\/pre><p class=\"no-margin\">Build your Angular app for production:<\/p><pre><code>ng build<\/code><\/pre><p class=\"no-margin\">This will create a <b>dist<\/b> folder inside the Angular app directory.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Finally, go back to the root project directory and run your updated Express server:<\/p><pre><code>node server.js<\/code><\/pre><p class=\"no-margin\">Visit <b>http:\/\/your_vps_ip:3000<\/b> to see your MEAN stack app with Angular.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Congratulations! You&rsquo;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.<\/p><p class=\"no-margin\">\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Getting started with the MEAN stack VPS Template<\/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-573","post","type-post","status-publish","format-standard","hentry","category-vps-os-and-templates"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/8805712-how-to-use-the-mean-stack-vps-template-at-hostinger\/","default":1}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/573","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=573"}],"version-history":[{"count":0,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/573\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}