<p>This article introduces an experimental Vue feature called Hooks.</p>



<h2>Before you start</h2>



<p>This post is suited for developers of all stages including beginners. Here are a few things you should already have before going through this article.</p>



<p>You will need the following in your pc:</p>



<ul><li><a href="https://nodejs.org/en/" target="_blank" rel="noreferrer noopener">Node.js version 10.x</a>&nbsp;and above installed. You can verify if you do by running the command below in your terminal/command prompt:</li></ul>



<pre class="wp-block-preformatted">node -v</pre>



<ul><li>A code editor: Visual Studio Code is highly recommended</li><li><a href="https://vuejs.org/" target="_blank" rel="noreferrer noopener">Vue’s latest version</a>, installed globally on your machine</li><li><a href="https://vuejs.org/" target="_blank" rel="noreferrer noopener">Vue CLI 3.0</a>&nbsp;installed on your machine. To do this, uninstall the old CLI version first:</li></ul>



<pre class="wp-block-preformatted">npm uninstall -g vue-cli</pre>



<p>then install the new one:</p>



<pre class="wp-block-preformatted">npm install -g @vue/cli</pre>



<ul><li>Download a Vue starter project&nbsp;<a href="https://github.com/viclotana/vue-canvas" target="_blank" rel="noreferrer noopener">here</a></li><li>Unzip the downloaded project</li><li>Navigate into the unzipped file and run the command to keep all the dependencies up-to-date:</li></ul>



<pre class="wp-block-preformatted">npm install</pre>



<h2>Introduction: Hooks</h2>



<p>Initially, React components that contain state logic must be a class component. Even though there were already stateless functional components in React there was a need to create components that accommodate state logic without being classes. That was when Hooks was born. Hooks are a way to use state logic inside functional components, thereby eliminating the need for writing classes.</p>



<h2>What is wrong with classes?</h2>



<p>There is nothing wrong with classes, to begin with, but the React team found out that&nbsp;<a href="https://reactjs.org/docs/hooks-intro.html#classes-confuse-both-people-and-machines" target="_blank" rel="noreferrer noopener">understanding how classes work has been a drawback to React adoption</a>. It can be difficult to understand and can become ambiguous as your project increases in size and complexity.</p>



<h3>But I don’t normally use classes in Vue JS..</h3>



<p>If you are a Vue developer, you might wonder why classes are being discussed as you do not use classes by default in your Vue projects. While this is true, Vue JS lets you use functional components that are stateless with&nbsp;<a href="https://vuejs.org/v2/guide/mixins.html" target="_blank" rel="noreferrer noopener">mixins</a>. With Vue mixins you can define logic or a functionality in a particular file and use and even re-use it in a functional component.</p>



<h2>The problem with mixins</h2>



<p>In a&nbsp;<a href="https://css-tricks.com/what-hooks-mean-for-vue/" target="_blank" rel="noreferrer noopener">blog post</a>, some months back,&nbsp;<a href="https://twitter.com/sarah_edo?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" rel="noreferrer noopener">Sarah Drasner</a>&nbsp;a very popular Vue core team member wrote about her conversation with&nbsp;<a href="https://twitter.com/youyuxi?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor" target="_blank" rel="noreferrer noopener">Evan You</a>&nbsp;the creator of Vue JS. Sarah revealed that a mixin cannot consume or use state from another mixin, which makes chaining of encapsulated logic difficult to achieve. This is the mixin limitation that the Vue Hooks solves for.</p>



<h2>Introducing Vue Hooks</h2>



<p>Vue Hooks are basically an enhanced version of mixins, if you do not know what mixins are, they are a platform in Vue used to re-use logic between components (you will see a quick demo of mixins in this post). Vue Hooks lets you pass logic from one Hook to another and you can also use state in a Hook from another Hook. So just like in React, Hooks in Vue are defined in functions which can be a cleaner and more flexible way to define and share logic and can return state.</p>



<h2>Demo A: Vue mixins</h2>



<p>If you have followed this post from the start, you must have downloaded&nbsp;<a href="https://github.com/viclotana/vue-canvas" target="_blank" rel="noreferrer noopener">the starter project file</a>&nbsp;and opened it up in your VS Code application. We are going to create a mixin that contains a counter logic and then import it into any component of choice. First, create a folder called mixins in the root directory and create a new file, call it&nbsp;<code>clickMixin.js</code>&nbsp;and copy the code block below inside it:</p>



<pre class="wp-block-preformatted">export default { 
    data (){
      return{
        count: 1,
        double: 2
      }
    },
    methods: {
      clicked(){
       this.count++; 
       this.double = this.count*2;
      }
    }
  }</pre>



<p>This mixin contains counter logic and also contains a variable that returns double the count, you see the export statement because it has to be imported into your component of choice. Open your&nbsp;<code>Test.vue</code>&nbsp;component and copy the code block below inside it:</p>



<pre class="wp-block-preformatted">&lt;template&gt;
  &lt;div&gt; 
    &lt;button v-on:click="clicked()"&gt;Button 1&lt;/button&gt;
    &lt;h2&gt;{{this.count}}&lt;/h2&gt;
    &lt;h2&gt;{{this.double}}&lt;/h2&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import clickMixin from '../Mixins/clickMixin'
export default {
  name: 'Test',
  mixins: [clickMixin]
}
&lt;/script&gt;</pre>



<p>Here you see how mixins are imported and registered under the name, it is a Vue instance property just like data or methods or computed properties. You also see that inside the template that you have access to this in JavaScript as it relates to the mixins (almost like the mixin was defined right inside the component). If you run the application in your dev server it should look like this:</p>



<div class="wp-block-image"><figure class="aligncenter"><img src="http://ec2-13-127-91-65.ap-south-1.compute.amazonaws.com/wp-content/uploads/2019/09/vuebutton1and2-1024x394.png" alt="" class="wp-image-453"/></figure></div>



<p>When you click button 1, the counter is increased by 1 and the lower figure is double the counter figure just as the template in your code suggests.</p>



<h2>Demo B: Vue Hooks</h2>



<p>You can recreate this logic with Vue Hooks easily, the point of the Hooks is to potentially replace mixins in the future. First of all, you have to install the vue-Hooks package with the node package manager. Open a new terminal in VS Code and run:</p>



<pre class="wp-block-preformatted">npm install vue-Hooks</pre>



<p>Then open up your&nbsp;<code>main.js</code>&nbsp;file and initialize Hooks with a line of command before the new Vue statement:</p>



<pre class="wp-block-preformatted">Vue.use(Hooks);</pre>



<p>Open the components folder and create a new file inside it, call it&nbsp;<code>Modal.vue</code>&nbsp;then navigate back to the root directory and create a new folder called Hooks. Inside the Hooks folder create a new file called&nbsp;<code>Hooks.js</code>&nbsp;and copy this code block below into it:</p>



<pre class="wp-block-preformatted">import { useData, useMounted, useEffect, useComputed, useUpdated} from 'vue-Hooks'
export default function clickedHook(){
const data = useData({ count:1 })
const double = useComputed(() =&gt; data.count * 2)
useMounted(()=&gt; {console.log('mounted')});
useUpdated(()=&gt; {console.log('updated')});
useEffect(()=&gt; {
     console.log('DOM re-renders....')
 });
return {
     data, double
   }
}</pre>



<p>Just like in React, Vue Hooks borrows the use-prefix syntax and uses it in the Vue way. You also notice that the lifecycle Hooks available for every Vue instance is accessible inside Vue Hooks, some of them are:</p>



<ul><li><code>useData</code>: handles initialization of data inside your Hook, so the count is initialized inside it</li><li><code>useComputed</code>: this is more like computed properties inside your Hook, so the double computation is done inside it</li><li><code>useMounted</code>: acts exactly like the mounted lifecycle Hook in your Vue instance but for Hooks</li><li><code>useUpdated</code>: acts exactly like the updated lifecycle Hook in your Vue instance but for Hooks</li><li><code>useEffect</code>: this handles logic on DOM re-render</li></ul>



<p>There are other properties you can import, the whole list can be found <a href="https://github.com/yyx990803/vue-hooks" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">here</a> on GitHub. You will notice it is exported as a function, open the <code>modal.vue</code> file you created earlier and copy this code block below inside it:</p>



<pre class="wp-block-preformatted">&lt;template&gt;
  &lt;div&gt; 
    &lt;button v-on:click="data.count++"&gt;Button 2&lt;/button&gt;
    &lt;h2&gt;{{data.count}}&lt;/h2&gt;
    &lt;h2&gt;{{double}}&lt;/h2&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import clickedHook from '../Hooks/Hooks'
export default {
  name: 'Modal',
  Hooks(){
    return clickedHook();
  }
}
&lt;/script&gt;</pre>



<p>Notice that after importing the Hooks file, you can access the data and the double constants earlier defined in the Hook inside this component. We also see that Hooks registration has the same syntax with data registration, with the function set up and the return object inside it.</p>



<figure class="wp-block-image"><img src="http://ec2-13-127-91-65.ap-south-1.compute.amazonaws.com/wp-content/uploads/2019/09/resizedvuebuttons.gif" alt="" class="wp-image-454"/></figure>



<h3><br>It is important to note that…</h3>



<ul><li>You can go ahead and use Vue Hooks right away (your Vue version must be 2.x)</li><li>There is&nbsp;<a href="https://css-tricks.com/what-hooks-mean-for-vue/#article-header-id-5" target="_blank" rel="noreferrer noopener">speculation that Vue version 3.0 will ship with Vue</a>&nbsp;Hooks officially</li><li>It is experimental and so should not be used in production yet</li><li><a href="https://css-tricks.com/what-hooks-mean-for-vue/" target="_blank" rel="noreferrer noopener">Read the Sarah Drasner blog post here</a>&nbsp;which contains even more examples too</li></ul>



<p>You can use npm or just go to&nbsp;<a href="https://github.com/yyx990803/vue-hooks" target="_blank" rel="noreferrer noopener">GitHub with this link</a>&nbsp;to get the project repository.</p>



<h2>Conclusion</h2>



<p>This has been a quick overview of Hooks in Vue JS and how they might differ from the React Hooks that inspired it. We also highlighted mixins for readers who have not been introduced to the concept and we looked at an illustration using Hooks. Are you excited about Vue Hooks?</p>

This article introduces an experimental Vue feature called Hooks.



Before you start



This post is suited for developers of all stages includi...

Hooks are coming to Vue.js version 3.0 - TCMHACK

Hooks are coming to Vue.js version 3.0

<p>React's&nbsp;<code>useEffect</code>&nbsp;hooks combines&nbsp;<code>componentDidMount</code>,&nbsp;<code>componentDidUpdate</code>&nbsp;and&nbsp;<code>componentWillUnmount</code>&nbsp;lifecycle methods. This is very useful for the following reasons: it reduces the amount of code, simplifies the code and allows for multiple&nbsp;<code>useEffect</code>&nbsp;hooks to be called in a single component.</p>



<p>You can read more about the <code>useEffect</code> hook here: <a href="https://reactjs.org/docs/hooks-effect.html" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">React docs</a></p>



<p>Sometimes, we'd like only a single of those lifecycle methods to run. The following cheat-sheet will help you achieve the "effect" you're looking form.</p>



<h2>componentDidMount eqivalent</h2>



<p>In order to have this hook run only once (when a component is mounted), we need to set an empty array as a hook dependency.</p>



<pre class="wp-block-code"><code>useEffect(() => {
  /* ComponentDidMount code */
}, []);</code></pre>



<h2>componentDidUpdate eqivavlent</h2>



<p>In order to have this hook run when the component is updated (this includes mounting), we need to set at least one variable as hook's dependency (in this case,&nbsp;<code>var1</code>&nbsp;and&nbsp;<code>var2</code>).</p>



<pre class="wp-block-code"><code>useEffect(() => {
  /* componentDidUpdate code */
}, [var1, var2]);</code></pre>



<h2>componentWillUnmount eqivavlent</h2>



<p>In order to have this hook run when the component is unmounted, we need to return a function from the hook. Dependency array doesn't affect this functionality.</p>



<pre class="wp-block-code"><code>useEffect(() => {
  return () => {
   /* componentWillUnmount code */
  }
}, [var1, var2]);</code></pre>



<h2>All three combined</h2>



<pre class="wp-block-code"><code>useEffect(() => {

  /* componentWillMount code + componentDidUpdate code */

  return () => {
   /* componentWillUnmount code */
  }
}, [var1, var2]);</code></pre>



<p>Thank you for taking the time to read this post. If you've found this useful, please share and feel free to comment.</p>

React's&nbsp;useEffect&nbsp;hooks combines&nbsp;componentDidMount,&nbsp;componentDidUpdate&nbsp;and&nbsp;componentWillUnmount&nbsp;lifecycle meth...

React: useEffect explained with lifecycle methods - TCMHACK

React: useEffect explained with lifecycle methods

Do you want to learn about and discover the differences between React vs. Angular? Then keep on reading! I am going to explain to you the similar...

React vs. Angular: The Complete Comparison - TCMHACK

React vs. Angular: The Complete Comparison

<p>With the release of the&nbsp;<a href="https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md">VueJS 3 "Request for Comment" documentation</a>&nbsp;about two weeks ago, Evan You introduced the VueJS function-based API and has set the VueJS community ablaze. These new ideas are still in the "Request for Comments" stage, so they're far from set in stone, but because the RFC introduces such significant changes, I made a quick summary of what you need to know.</p>



<p><strong>NB: All this information and much more is in the RFC, so I do suggest you read that.</strong></p>



<h2>Setup</h2>



<p>VueJS 3 departs from the option-based API we've grown to love and introduces the&nbsp;<code>setup()</code>&nbsp;function, which will be where all the magic happens. This function single-handedly sets up the the logic for our component and returns data that's exposed to the template. The option-based API will continue to work even in VueJS 3, but this new function-based API will be the new standard.</p>



<p>For all the functionality we're used to from VueJS like reactive data, computed values, methods and watchers, we&nbsp;<code>import</code>&nbsp;functions from&nbsp;<code>vue</code>&nbsp;and use them in our&nbsp;<code>setup()</code>&nbsp;function. Here's a basic example from the RFC:</p>



<pre class="wp-block-code"><code>&lt;template>
  &lt;div>
    &lt;span>count is {{ count }}&lt;/span>
    &lt;span>plusOne is {{ plusOne }}&lt;/span>
    &lt;button @click="increment">count++&lt;/button>
  &lt;/div>
&lt;/template>

&lt;script>
import { value, computed, watch, onMounted } from 'vue'

export default {
  setup() {
    // reactive state
    const count = value(0)
    // computed state
    const plusOne = computed(() => count.value + 1)
    // method
    const increment = () => { count.value++ }
    // watch
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is NULL`)
    })
    // lifecycle
    onMounted(() => {
      console.log(`mounted`)
    })
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment
    }
  }
}
&lt;/script></code></pre>



<h2>But why?</h2>



<p>If that example doesn't make it clear why this change was introduced, or if it feels like a step back in terms of usability, I understand. I had the same initial reaction and it took me a bit of time to figure out why this change was necessary. The v2.x API is widely loved and is often the reason why people move to VueJS from other frameworks like ReactJS or AngularJS, so a change this drastic seems like a strange idea.</p>



<h3>Encapsulation is king</h3>



<p>The component API was created in part to make it easier to reuse code across your application. While VueJS is seriously modular and uses components, the current option-based API doesn't allow for an easy extraction of functionality that relates to a single piece of functionality or data. You need to define your data(/state), computed values and methods separately, while they might all be related. This gets confusing when components grow and methods deal with different pieces of data.</p>



<p>This is where the new function-based API comes in. It allows you to extract all code related to a piece of logic and put it together in what they call a "composition function", which returns reactive state. An example given in the RFC uses one of those composition functions to&nbsp;<a href="https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md#logic-composition">extract the logic of listening to the mouse position</a>:</p>



<pre class="wp-block-code"><code>function useMouse() {
  const x = value(0)
  const y = value(0)
  const update = e => {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  return { x, y }
}

// in consuming component
const Component = {
  setup() {
    const { x, y } = useMouse()
    return { x, y }
  },
  template: `&lt;div>{{ x }} {{ y }}&lt;/div>`
}</code></pre>



<p>If we compare this to how we would write this functionality in the v2.x API, we can see that the functionality related to using the mouse position is all over the place, where in the v3.x API, it's quite nicely grouped in a singular function:</p>



<pre class="wp-block-code"><code>&lt;template>
    &lt;div>
        {{ x }} {{ y }}
    &lt;/div>
&lt;/template>

&lt;script>
export default {
  data() {
    return {
      x: 0,
      y: 0,
    };
  },
  mounted() {
    window.addEventListener('mousemove', this.update);
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.update);
  },
  methods: {
    update(e) {
      this.x = e.pageX;
      this.y = e.pageY;
    },
  },
};
&lt;/script></code></pre>



<h3>And more</h3>



<p>Encapsulation isn't the only reason why these changes are useful, so here are two other reasons why this change might be what VueJS needs.</p>



<p>The current option-based API in VueJS has an issue in that it doesn't properly support TypeScript type inference. The proposed changes fix this issue, and achieve full typing support, with TS code looking almost the same as JS code as a cherry on top of an already very useful pie.</p>



<p>VueJS is loved for its extremely small bundle size and this change shrinks that bundle even more. Since function and variable names can be shortened with standard minification (while object/class methods and properties can't), the code simply compresses better.</p>

With the release of the&nbsp;VueJS 3 "Request for Comment" documentation&nbsp;about two weeks ago, Evan You introduced the VueJS function-based A...

VueJS is dead, long live VueJS! - TCMHACK

VueJS is dead, long live VueJS!

<p><strong>Node.js</strong>&nbsp;is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Latest version&nbsp;<a href="https://deb.nodesource.com/setup_12.x" target="_blank" rel="noreferrer noopener">node.js ppa</a>&nbsp;is maintaining by its official website. We can add this PPA to your&nbsp;<strong>Ubuntu 19.04, 18.04 LTS, 16.04 LTS (Trusty Tahr) and 14.04 LTS (Xenial Xerus)</strong>&nbsp;systems and install node.js on Linux VPS with easy commands.</p>



<p>To install specific nodejs version, Visit our tutorial <a href="/how-to-install-and-manage-node-js-via-nvm/">Install Specific Nodejs Version with NVM</a>.</p>



<h2>Step 1 – Add Node.js PPA</h2>



<p>Node.js package is available in LTS release and the current release. It’s your choice to select which version you want to install on the system as per your requirements. Let’s add the PPA to your system to install Nodejs on Ubuntu.</p>



<p><strong>Use Current Release:</strong>&nbsp;At te last update of this tutorial, Node.js 12 is the current Node.js release available.</p>



<pre class="wp-block-preformatted">sudo apt-get install curl python-software-properties
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
</pre>



<p><strong>Use LTS Release :</strong>&nbsp;At the last update of this tutorial, Node.js 10.15.3 is the LTS release available.</p>



<pre class="wp-block-preformatted">sudo apt-get install curl python-software-properties
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
</pre>



<p>For this tutorial,&nbsp;<strong>I am using the latest current release</strong>&nbsp;and added their PPA to my system.</p>



<h2>Step 2 – Install Node.js on Ubuntu</h2>



<p>You can successfully add Node.js PPA to Ubuntu system. Now execute the below command install Node on and Ubuntu using apt-get. This will also install NPM with node.js. This command also installs many other dependent packages on your system.</p>



<pre class="wp-block-preformatted">sudo apt-get install nodejs
</pre>



<h2>Step 3 – Check Node.js and NPM Version</h2>



<p>After installing node.js verify and check the installed version. You can find more details about current version on node.js&nbsp;<a href="https://nodejs.org/download/" target="_blank" rel="noreferrer noopener">official website</a>.</p>



<pre class="wp-block-preformatted"><strong>node -v </strong>

v12.1.0
</pre>



<p>Also, check the npm version</p>



<pre class="wp-block-preformatted"><strong>npm -v </strong>

v12.3.1
</pre>



<h2>Step 4 – Create Demo Web Server (Optional)</h2>



<p>This is an optional step. If you want to test your node.js install. Let’s create a web server with “Hello World!” text. Create a file&nbsp;<strong>server.js</strong></p>



<pre class="wp-block-preformatted"><strong>vim server.js</strong>
</pre>



<p>and add the following contentserver.js</p>



<pre class="wp-block-preformatted">var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(3000, "127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');
</pre>



<p>Now start the Node application using the command.</p>



<pre class="wp-block-preformatted"><strong>node server.js</strong>

debugger listening on port 5858
Server running at http://127.0.0.1:3000/
</pre>



<p>You can also start the application with debugging enabled with the following commands.</p>



<pre class="wp-block-preformatted"><strong>node --inspect server.js</strong>

Debugger listening on ws://127.0.0.1:9229/8976a32b-cf99-457c-85fb-e7288cbadac6
For help see https://nodejs.org/en/docs/inspector
Server running at http://127.0.0.1:3000/
</pre>



<p>The web server has been started on port 3000. Now access&nbsp;<strong>http://127.0.0.1:3000/</strong>&nbsp;URL in browser. Now you will need to configure a front-end server for your app.</p>



<ul><li>Read: <a href="/how-to-setup-nginx-as-frontend-server-for-node-js/">How to Setup Nginx as Frontend Server for Node.js</a></li></ul>

Node.js&nbsp;is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Latest version&nbsp;node...

How to Install Latest Node.js and NPM on Ubuntu with PPA - TCMHACK

How to Install Latest Node.js and NPM on Ubuntu with PPA

<p>NGINX is a powerful and widely used for web server. It also used as frontend proxy server for multiple web application servers runs behind this. This tutorial will help you to setup your Nginx server as fronted proxy server for your Node.js application.</p>



<h2>1. Install Node.js</h2>



<p>First install the required packages for node.js installation and add PPA of nodejs available on launchpad. Afer that install nodejs with following commands.</p>



<pre class="wp-block-preformatted">$ sudo apt-get install python-software-properties python g++ make
$ sudo add-apt-repository ppa:chris-lea/node.js
$ sudo apt-get update
$ sudo apt-get install nodejs
</pre>



<h2>2. Install Nginx</h2>



<p>Now install Nginx web server using apt-get. Nginx is available under default repositories.</p>



<pre class="wp-block-preformatted">$ sudo apt-get install nginx
</pre>



<h2>4. Create Test Node Server</h2>



<p>Now create a test node server app and run it on port 3000 on host 127.0.0.1. To create a node server create file&nbsp;<strong>~/MyApp/myapp.js</strong>&nbsp;.</p>



<pre class="wp-block-preformatted">$ cd ~/MyApp/
$ vi myapp.js
</pre>



<p>and add following content in javascript file.</p>



<pre class="wp-block-preformatted">var http = require('http');

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello Worldn');
}).listen(3000, "127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');

</pre>



<p>Now use the following command to start nodejs in background</p>



<pre class="wp-block-preformatted">$ node myapp.js &amp;
</pre>



<p>and access this in browser. You will see result like below screenshot.</p>



<div class="wp-block-image"><figure class="aligncenter"><img src="http://ec2-13-127-91-65.ap-south-1.compute.amazonaws.com/wp-content/uploads/2019/05/nginx-with-nodejs-1.png" alt="" class="wp-image-382"/></figure></div>



<h2>4. Configure NGINX</h2>



<p>After starting a demo server with node.js. Now start configuration with Nginx. Create a virtual host configuration file for your domain under<strong>&nbsp;/etc/nginx/conf.d/</strong>&nbsp;directory.</p>



<pre class="wp-block-preformatted">$ sudo vim /etc/nginx/conf.d/example.com.conf
</pre>



<p>and add the following content.</p>



<pre class="wp-block-preformatted">upstream myapp {
    server 127.0.0.1:3000;
    keepalive 8;
}

# the nginx server instance
server {
    listen 0.0.0.0:80;
    server_name example.com www.example.com;
    access_log /var/log/nginx/example.com.log;

    location / {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_set_header X-NginX-Proxy true;

      proxy_pass http://myapp/;
      proxy_redirect off;
    }
 }

</pre>



<p>After making all configuration, let’s restart Nginx web server using following command.</p>



<pre class="wp-block-preformatted">$ sudo /etc/init.d/nginx restart
</pre>



<h2>5. Verify Setup</h2>



<p>Now access your server using domain name, you will see the same page shows on&nbsp;<strong>http://127.0.0.1:3000/</strong>&nbsp;.</p>



<div class="wp-block-image"><figure class="aligncenter"><img src="http://ec2-13-127-91-65.ap-south-1.compute.amazonaws.com/wp-content/uploads/2019/05/nginx-with-nodejs-2.png" alt="" class="wp-image-383"/></figure></div>

NGINX is a powerful and widely used for web server. It also used as frontend proxy server for multiple web application servers runs behind this. ...

How to Setup Nginx as Frontend Server for Node.js - TCMHACK

How to Setup Nginx as Frontend Server for Node.js

<p><a href="https://github.com/creationix/nvm" target="_blank" rel="noreferrer noopener">NVM</a>&nbsp;is known as Node Version Manager, Similarily to RVM (Ruby Version Manager) for Ruby language. NVM provides an option for easy installation of Node.js. You can also install specific Node.js version or multiple Node.js versions on the same system using nvm and use the required version for application. This tutorial will help you to&nbsp;<strong>Install and Manage Node.js using NVM</strong>.</p>



<p>The default NVM installs under current users home directory, So nvm installation with one user will not be accessible to another user. Windows users can visit our other tutorial to install Nodejs on Windows system.</p>



<h2>Step 1 – Install NVM</h2>



<p>First of all, You need to install NVM on your system. A bash script is available to install nvm on your system. Use the following command to install NVM on your Linux system.</p>



<pre class="wp-block-preformatted">curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
</pre>



<p>Reload system environment using this command. It will set the required environment variables to use nvm on the system.</p>



<pre class="wp-block-preformatted">source ~/.profile     ## Debian based systems 
source ~/.bashrc      ## CentOS/RHEL systems 
</pre>



<h2>Step 2 – Find Available Node.js Version</h2>



<p>At this point, you have installed nvm on your system for the current user. Now find out the available version of Node.js to install. Use&nbsp;<code>ls-remote</code>&nbsp;option to list versions.</p>



<pre class="wp-block-preformatted">nvm ls-remote
</pre>



<p>You will see a long list of available versions.</p>



<pre class="wp-block-preformatted">  ...
  ...
       v10.12.0
       v10.13.0   (LTS: Dubnium)
       v10.14.0   (LTS: Dubnium)
       v10.14.1   (LTS: Dubnium)
       v10.14.2   (LTS: Dubnium)
       v10.15.0   (Latest LTS: Dubnium)
        v11.0.0
        v11.1.0
        v11.2.0
        v11.3.0
        v11.4.0
        v11.5.0
        v11.6.0
        v11.7.0
        v11.8.0
</pre>



<h2>Step 3 – Node.js Installation with NVM</h2>



<p>Now install the node.js version you need to use for running node.js application. Below command will install node.js&nbsp;<strong>v8.10.0</strong>&nbsp;the LTS release on your system.</p>



<pre class="wp-block-preformatted">nvm install v10.15.0
</pre>



<p>You can have also installed the latest version of Node.js.</p>



<pre class="wp-block-preformatted">nvm install v11.8.0
</pre>



<p>Repeat the above command with the different-2 node.js versions to install multiple versions of node.js on your system.</p>



<h2>Step 4 – Set Node.js Default Version</h2>



<p>As you have installed multiple node.js versions, You can select the specific version of node.js as default version used by system and load in the environment. Use below command to list currently installed version and default set version.</p>



<pre class="wp-block-preformatted"><strong>nvm list</strong>

       v10.15.0
        v11.8.0
-&gt;       system
node -&gt; stable (-&gt; v11.8.0) (default)
stable -&gt; 11.8 (-&gt; v11.8.0) (default)
iojs -&gt; N/A (default)
unstable -&gt; N/A (default)
lts/* -&gt; lts/dubnium (-&gt; v10.15.0)
lts/argon -&gt; v4.9.1 (-&gt; N/A)
lts/boron -&gt; v6.16.0 (-&gt; N/A)
lts/carbon -&gt; v8.15.0 (-&gt; N/A)
lts/dubnium -&gt; v10.15.0
</pre>



<p>You can see that Node.js version 11.8.0 is set as the default version. You can change the default Node.js version. Below command will set 10.15.0 as default Node.js version.</p>



<pre class="wp-block-preformatted">nvm use v10.15.0
</pre>



<p>Now verify current active version of node.js</p>



<pre class="wp-block-preformatted">node --version

v10.15.0
</pre>



<h2>Step 5 – Run Applition with Specific Version</h2>



<p>If you have multiple node.js applications on your system and want to run each with a specific version of node.js. NVM provides you an option to use node.js version for running any application. For example</p>



<pre class="wp-block-preformatted">nvm run v10.15.0 app.js
</pre>



<h2>Step 6 – Remove Unused Node.js Version</h2>



<p>This command will provide a list of installed versions of node.js on your system.</p>



<pre class="wp-block-preformatted">nvm list
</pre>



<p>Now remove any version installed on your system using the following command. Below command will remove Node.js version 10.15.0 from your system.</p>



<pre class="wp-block-preformatted">nvm remove v10.15.0</pre>