How to Configure Static Assets in Express JS to deploy a Vue application

In this post we are going to see how to configure a Vue js app to run within Express js.

Step One: Get the dist of your Vue app

First thing, we need to build the vue js front end. In my configuration, the command to be executed is

npm run build

(to know more about this, take a look at project’s package.json, under the scripts section).

Now, in the dist folder we have all the static files needed by the browser to execute the Vue application.
In my case, I got an index.html and a static folder, containing js and css files.

Step Two: Copy the Dist files to the Express project folder

Now lets move to the back end.
Within our Express js project, create a “public” folder, and have the Vue files copied there (please note that this step can be automated by configuring the build process to copy the production files wherever we want).

Step Three: Configuring the Express JS backend

In the following lines of code, we are serving the index.html file every time the root of the application is browsed.
The index.html file has links to the static resources that are the front-end application itself.

Leave a Reply

Your email address will not be published. Required fields are marked *