Learn How you develop and build with an example project

Bhargav Bachina

Follow

Sep 8, 2020 · 8 min read

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
• Prerequisites
• Example Project
• Just Enough NodeJS For This Project
• Development Phase
• How To Build Project For Production
• How To Package Project For Production
• Summary
• Conclusion

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 index.html (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.

If you look at the above diagram, all the web requests without the /api 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.

• NodeJS
• Typescript
• Vue CLI
• VSCode
• BootstrapVue

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.

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.

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 12, 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.

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.

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 different ports. It’s easier and faster to develop that way. If you look at the following diagram the Vue app is running on port 8080 with the help of a webpack dev server and the nodejs server is running on port 3080.

Project Structure

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

If you look at the above project structure, all the Vue app resides under the my-app 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 package.json of nodejs API.

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

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.

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

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.

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.

Interaction between Vue UI and Node API

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

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.

With this in place, all the calls start with /api will be redirected to http://localhost:3080 where the nodejs API running.

Once this is configured, you can run the Vue app on port 8080 and nodejs API on 3080 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 8080 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 dist folder.

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

1. We have to use express.static at line number 27 to let express know there are a dist folder and assets of the Angular build.
2. Load index.html for the default route / at line number 33

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

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 8080 and NodeJS server on port 3080.
• 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.