How To Develop and Build Vue.js App With NodeJS Backend — Typescript Version

Learn How you develop and build with an example project

Bhargav Bachina
Sep 8, 2020 · 8 min read
Photo by Scott Graham on Unsplash

There are so many ways we can build Vue.js apps and ship for production. One way is to create the Vue app with NodeJS or Java, and another way is to develop and serve that static content with the NGINX web server. With NodeJS, we have to deal with the server code as well; for example, you need to load the index.html page with node.

In this post, we will see the details and implementation with the NodeJS. We will go through step by step with an example.

Introduction

Vue.js is a Progressive JavaScript Framework for building web apps, and it doesn’t load itself in the browser. We need some mechanism that loads the (single page) of Vue application with all the dependencies(CSS and js files) in the browser. In this case, we are using node as the webserver, which loads Vue assets and accepts any API calls from the Vue UI app.

Vue with nodejs

If you look at the above diagram, all the web requests without the will go to Vue routing, and the Vue Router kicks in and loads components based on the path. The Node server itself will handle all the paths that contain /api.

In this post, we are going to develop the Vue app with NodeJS (Written in Typescript) and see how to build for production.

Prerequisites

There are some prerequisites for this article. It would help if you had nodejs installed on your laptop and know-how Http works. If you want to practice and run this on your laptop, you need to have these on your machine.

Example Project

This is a simple project which demonstrates developing and running Vue application with NodeJS. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.

Example Project

As you add users, we are making an API call to the nodejs server to store them and get the same data from the server when we retrieve them. You can see network calls in the following video.

API network calls

Here is a Github link to this project. You can clone it and run it on your machine.

// clone the project
git clone https://github.com/bbachi/vuejs-nodejs-typescript-example.git
//Vue Code
cd my-app
npm install
npm run serve
// API code
cd api
npm install
npm run start:dev

Just Enough NodeJS For This Project

If you are new to NodeJS, don’t worry. This short description is enough to get you started with this project. If you are already aware of NodeJS, you can skip this section.

NodeJS is an asynchronous event-driven javascript runtime environment for server-side applications. The current version of the nodejs is and you can install it from this link here. You can click on any LTS link, and the NodeJS package is downloaded, and you can install it on your laptop.

You can check the version of the Node with this command node -v. You can run javascript on the node REPL by typing the command node on the CLI.

Typing commands on REPL

The installation of a node is completed and you know how to run javascript. You can even run javascript files. For example, Let’s put the above commands in the sample.js file and run it with this command node sample.js.

sample.js

Development Phase

Usually, the way you develop and the way you build and run in production are completely different. Thatswhy, I would like to define two phases: The development phase and the production phase.

In the development phase, we run the nodejs server and the Vue app on completely It’s easier and faster to develop that way. If you look at the following diagram the Vue app is running on port with the help of a webpack dev server and the nodejs server is running on port .

Development Environment

Project Structure

Let’s understand the project structure for this project. We will have two package.json: one for the and another for . It’s always best practice to have completely different for each one. In this way, you won’t get merging issues or any other problems regarding web and server node modules collision.

Project Structure

If you look at the above project structure, all the Vue app resides under the folder and nodejs API resides under the api folder.

NodeJS API

We use the express and nodemon on the server-side. Express is the Fast, unopinionated, minimalist web framework for NodeJS and nodemon is the library which makes your API reloads automatically whenever there is a change in the files. Let’s install these two dependencies. nodemon is only used for development so install this as a dev dependency.

Since it is written in typescript you need some other dependencies as well. Let’s install all the dependencies.

npm install express --save
npm install @types/express nodemon ts-node typescript --save-dev
npm install webpack webpack-cli --save-dev

Here is the of nodejs API.

package.json

We need to import express and define two routes: and and the server listening on the portHere are the app.ts, routes.ts, user.ts files. We use body-parser to handle data in the http request object.

API files

We are using nodemon in the development environment. Here is the configuration nodemon.json file. Any file that ends with ts will be watched and all the node_modules are ignored.

nodemon.json

You need to start the nodejs API with this command and the moment you change any file, the server will be automatically restarted.

Development Environment

Vue UI

Now the nodejs API is running on port 3080. Now it’s time to look at the Vue UI. The entire Vue app is under the folder my-app. You can create with this command vue create my-appI am not going to put all the files here you can look at the entire files in the above Github link or here.

Let’s see some important files here. Here is the service file which calls node API. This is a service file with two async functions that use fetch API to make the API calls.

UserService.js

Here is the Dashboard component that calls this service and gets the data from the API. Once we get the data from the API we set the state accordingly and renders the appropriate components again to pass the data down the component tree. You can find other components here.

Dashboard.vue

Interaction between Vue UI and Node API

In the development phase, the Vue app is running on port with the help of a Vue CLI and nodejs API running on port .

There should be some interaction between these two. We can proxy all the API calls to nodejs API. Vue CLI provides some inbuilt functionality and to tell the development server to proxy any unknown requests to your API server in development, we just need to add this file at the root where package.json resides and configures the appropriate API paths.

vue.config.js

With this in place, all the calls start with will be redirected to where the nodejs API running.

Once this is configured, you can run the Vue app on port and nodejs API on still make them work together.

// nodejs API (Terminal 1)cd api (change it to API directory)
npm run dev
// Vue app (Terminal 2)
cd my-app (change it to app directory)
npm run serve

How To Build Project For Production

The Vue app runs on the port with the help of a Vue CLI. This is not the case for running in production. We have to build the Vue project and load those static assets with the node server. Let’s see those step by step here.

First, we need to build the Vue project with this command npm run build or vue-cli-service buildand all the built assets will be put under the folder.

Second, we need to make some changes on the server-side. Here is the modified file.

  1. We have to use at line number to let express know there are a dist folder and assets of the Angular build.
  2. Load for the default routeat line number
app.ts

Once you are done with the above changes, you can actually run the whole app with the nodejs server running on port like below as nodejs acts as a web server as well.

The whole app running on the port 3080

How To Package Project For Production

Packaging this application for production needs other tools such as webpack, gulp. We need a webpack to transpile the NodeJS API into javascript and bundle it in a single server file.

We use the gulp tool to copy all the built files and put them in the appropriate folders and finally make them a deployable artifact or zip file.

Summary

  • There are so many ways we can build Vue apps and ship for production.
  • One way is to build Vue with NodeJS.
  • We have seen how to build the NodeJS API in typescript version
  • In the development phase, we can run Vue and Nodejs on separate ports. Vue on and NodeJS server on port .
  • The interaction between these two happens with proxying all the calls to API.
  • In the production phase, you can build the Vue app and put all the assets in the dist folder and load it with the node server.
  • Nodejs act as a web server as well in the above case. You need to let express know where are all the Vue assets are.
  • We can package the application in a number of ways.
  • You can deploy the packaged zip folder in any node environment.

Conclusion

This is one way of building and shipping Vue apps. This is really useful when you want to do server-side rendering or you need to do some processing. NodeJS is non-blocking IO and it is very good for normal websites as well. In future posts, I will discuss more on deploying strategies for this kind of architecture.

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never…

Sign up for BB Tutorials & Thoughts

By Bachina Labs

Tutorials Ranging from Beginner guides to advanced on Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML. Thank you for subscribing and let me know if you want me cover anything?  Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Bhargav Bachina

Written by

Software Architect — Sharing Experiences With Examples | Frontend, Backend, Blockchain, Docker, k8s, DevOps, Cloud,AI, ML | https://www.linkedin.com/in/bachina/

Bachina Labs

Tutorials Ranging from Beginner guides to Advanced | Never Stop Learning

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store