How to deploy the Vue js web-pack application in Tomcat container

How to deploy the VueJs application in tomcat server.

What is your take away? In the tutorial, you will be creating a Vue Application from scratch and deploy the application into an apache tomcat server

What is Apache Tomcat® Apache tomcat software is an open-source implementation of the Java Servlet, JavaServer Pages, Java Expression Language and Java WebSocket technologies. The Java Servlet, JavaServer Pages, Java Expression Language and Java WebSocket specifications are developed under the Java Community Process. Apache Tomcat software powers numerous large-scale, mission-critical web applications across a diverse range of industries and organizations

What is VueJS, It is a Progressive JavaScript Framework

An incrementally adoptable ecosystem that scales between a library and a full-featured framework.

Vue.js is an open-source Model–view–ViewModel JavaScript framework for building user interfaces and single-page applications

Let us start.

First things first, let’s create a VueJs application using Vue CLI. Execute the command below to create a Vue App from the command line. This might take a while.

Ensure you have the latest Vue CLI installed

npm install -g @vue/cli

After installing CLI, execute the below command to create a hello-world Vue application.

vue create hello-world

You will be asked some questions in the app creation process make sure you select Vue-preset when asked.

Creating a Project | Vue CLI

Once the Vue application is created, next step is to run the application, execute the below command to start the application

$ cd hello-world
$ npm run serve

After starting the application, open a browser and hit the below URL . Your application will be rendered

http://localhost:8080/

Congrats !! You have created a Vue App successfully

Now let us create a vue.config.js file in the root of the project, vue.config.js should be created at the project root level.

Define the public path in the vue.config.js, open the vue.config.js and add the below block of code.

Add the below configuration to the vue.config.js. For this tutorial, let us configure the application context as HelloWorld. You can create different application context according to your requirement

Replace the text HelloWorld with the one you like to have for your application

publicPath: process.env.NODE_ENV === 'production'
module.exports = {
 publicPath: process.env.NODE_ENV === 'production'? '/HelloWorld/': '/'
}

Now let us create a production build, a production build can be initiated with below command.

npm run-script build

You will see below message in the console output when you run the production build, that means a prod build is initiated

Once the build is completed successfully, you can find a dist folder at the root of the project. That is nothing but the build artifacts which comprise of deployable files.

Download a Tomcat server from the below link, if you have one already downloaded we can use that.

Apache Tomcat®

Once you download unzip the bundle. Create a TOMCAT_HOME (Which is your root folder of the tomcat) . If you look at the sub-directories, there will be a webapps folder . Create a folder for your application, let’s create a folder called HelloWorld . Remember we have configured the same in the vue.config.js above

TOMCAT_HOME/webapps/HelloWorld

Copy all the files from dist folder to HelloWorld folder, which we created during the production build process in earlier step

Start Tomcat Server

TOMCAT_HOME/webapps/bin

Windows users can start the tomcat server using startup.bat

Unix / Mac users can start the server using startup.sh

Open a browser and paste the below URL

http://localhost:8080/HelloWorld

If everything goes well the Vue App will show up in the browser

You can find a youtube tutorial of the same at the below link