In this tutorial, I will show you step by step to integrate Vue.js project with Node.js Express Rest API so that we can serve/combine Vue App with Express. You will also know how to configure Vue SPA Routing to avoid 404 on refresh.
Vue.js & Node.js Express Application Overview
Assume that we have 2 separated projects: Vue & Node.js Express like this-
For example, if we run them separately:
- Express Server exports Rest Apis at Url:
http://localhost:8080/ - Vue Client runs at url:
http://localhost:8081/
Using Vue.js Client to call Express Rest API:
Otherwise, when deploying Vue production-build with Node.js Express project, we only need to run Node Project for the fullstack (Vue + Node) system.
In this example, we access http://localhost:8080/.
Technology Stack
- Node.js
- Express
- Vue 2.6.10
- Vue Router 3
- Vue Cli Service 4
Setup Vue Client
You can use your own Vue Project, or just download the source code on Github, or follow these steps to create a new one.
Open cmd at the folder you want to save Project folder, run command:
vue create vue-js-client-crud
You will see some options, choose default (babel, eslint).
After the process is done. We create new folders and files like the following tree:
public
— index.html
src
— components
— — AddTutorial.vue
— — Tutorial.vue
— — TutorialsList.vue
— services
— — TutorialDataService.js
— App.vue
— main.js
package.json
Because I want to keep this tutorial simple and brief, please continue to develop this App with instruction in the post:
Vue.js 2 CRUD Application with Vue Router & Axios
Setup Express Server
You can use your own Node.js Project, or just download the source code on Github, or follow these steps to create a new one.
First, we create a folder:
$ mkdir vue-js-node-js-express-mysql $ cd vue-js-node-js-express-mysqlNext, we initialize the Node.js App with a package.json file:
npm init name: (vue-js-node-js-express-mysql)
version: (1.0.0) description: Integreate Vue with Express, Serve Vue app with Express on same Server/Port
entry point: (index.js) server.js
test command:
git repository:
keywords: vue, nodejs, express, sequelize, rest, api
author: bezkoder
license: (ISC)
Is this ok? (yes) yesThe instruction can be found in one of the posts:
— Node.js Rest APIs example with Express, Sequelize & MySQL
— Node.js Rest APIs example with Express, Sequelize & PostgreSQL
— Node.js Rest APIs example with Express, Sequelize & MongoDb
Let’s continue to the most important part.
Combine Vue and Express
Build Vue App
Currently Vue Client and Express server work independently on ports 8081 and 8080.
The first thing we need to do is to build Vue App for production.
Open package.json file, modify the scripts so that output files and folders will be stored in build folder:
{
...
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --dest build",
"lint": "vue-cli-service lint"
},
...
}Run command: npm run build
PS D:\Projects\VueProjects\vue-js-client-crud> npm run build> vue-js-client-crud@0.1.0 build D:\Projects\VueProjects\vue-js-client-crud
> vue-cli-service build --dest build
\ Building for production...Browserslist: caniuse-lite is outdated. Please run next command `npm update`
- Building for production... DONE Compiled successfully in 6166ms 4:54:37 PM
File Size Gzipped build\js\chunk-vendors.6a5b8348.js 115.12 KiB 40.60 KiB
build\js\chunk-1b8a9a30.37814895.js 17.45 KiB 6.13 KiB
build\js\chunk-24926a39.dbd26b18.js 8.95 KiB 3.51 KiB
build\js\chunk-7d82c670.cf3aa735.js 7.73 KiB 3.25 KiB
build\js\app.0634cc5c.js 4.81 KiB 2.07 KiB
build\js\chunk-29724baf.89c3a7e4.js 2.98 KiB 1.10 KiB
build\css\chunk-29724baf.1ae50cfb.css 0.05 KiB 0.07 KiB
build\css\chunk-7d82c670.465f69d9.css 0.04 KiB 0.06 KiB
build\css\chunk-24926a39.2d561e0d.css 0.04 KiB 0.06 KiB Images and other types of assets omitted. DONE Build complete. The build directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
Now you can see new build folder with content as following:
Integrate Vue production into Node.js Project
In app folder of Node.js Express Project, let’s create views folder.
app
— config
— controllers
— models
— routes
— views
— index.js
package.json
server.js
Now we need to copy all files from Vue build folder to app/ views folder above.
The final Node.js Project folder structure will be like this:
Serve Vue App with Express
We’re gonna serve static files such as HTML files, CSS files and JavaScript files in app/ views folder using the express.static() built-in middleware function.
const express = require("express");const path = __dirname + '/app/views/';
const app = express();app.use(express.static(path));
Now, we can load the files in the static directory:
http://localhost:8080/index.html
http://localhost:8080/static/css/2.47e06e2e.chunk.css
http://localhost:8080/static/js/2.8091b331.chunk.jsThe final step is to deliver index.html file using res.sendFile(). We will need to pass in a path to the file.
// const path = __dirname + '/app/views/';app.get('/', function (req,res) {
res.sendFile(path + "index.html");
});
Now content in server.js file is like this-
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");const path = __dirname + '/app/views/';const app = express();app.use(express.static(path));var corsOptions = {
origin: "http://localhost:8081"
};app.use(cors(corsOptions));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));const db = require("./app/models");db.sequelize.sync();app.get('/', function (req,res) {
res.sendFile(path + "index.html");
});require("./app/routes/turorial.routes")(app);// set port, listen for requests
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}.`);
});
Run Vue & Express on same Port
Run the Node.js Express server (including Vue client) with commands:
node server.js
Open browser with url: http://localhost:8080/.
Now you can see the result:
Vue Router Refresh — Not found 404 error
Oh yeah! Everything looks good.
But wait, let’s try to refresh the page.
What happened?
To handle this error, we’re gonna re-enable hash(#) in Vue App Routing. It will keep the UI route in hash part of the URL, which should not make the server return 404.
The default mode for Vue Router is hash mode. It uses a URL hash to simulate a full URL so that the page won’t be reloaded when the URL changes. In the source code, we already set Vue Router to history mode to get rid of the hash.
So, in Vue Project, let’s open router.js file and comment or remove mode: "history":
import Vue from "vue";
import Router from "vue-router";Vue.use(Router);export default new Router({
// mode: "history",
routes: [
{
..
}
]
});
Don’t forget to rebuild the Vue App and copy all files and folders in build directory (Vue project) into views (Node.js Express project).
Now Our Url is hashed(#) after port number: http://localhost:8080/#/tutorials
Now you can refresh the page without worrying about 404.
Conclusion
Today we’ve learned how to integrate Vue with Node.js Express on same Server/Port. We also handle the case Vue Router 404 Not found on Refresh by adding hash(#) to the urls.
There are many Vue + Express examples that you can apply this approach to integrate:
— Vue.js + Node.js + Express + MySQL example
— Vue.js + Node.js + Express + PostgreSQL example
— Vue.js + Node.js + Express + MongoDB example
— Vue.js + Node.js Express: JWT Authentication & Authorization example
Or Serverless with Firebase:
— Vue Firebase Realtime Database: CRUD example
— Vue Firestore: Build a CRUD App example
Happy Learning! See you again.
Further Reading
- https://www.npmjs.com/package/express
- https://cli.vuejs.org/guide/build-targets.html
- https://router.vuejs.org/guide/essentials/history-mode.html
Source Code
You can find the complete source code for this tutorial at Github.
Originally published at https://bezkoder.com on November 17, 2019.
