Skip to content

Compiling Features

Before we compile our application, please take a last look at the console. There you will find the following messages:

Starting Vanilla Button
Starting jQuery Button
Starting Bootstrap Button
Starting Vue Button

Now you can stop the running server in the terminal and start the build with:

npm run build

A folder named dist will be created. In there you will find a file index.html and all the files needed to run your application. This folder can be deployed to a webserver or even loaded locally and everything will work.

Load now the file index.html into a browser to run the application. Here we briefly list some useful compiling features:

Debuging Messages

Firtsly and open the console. You will see that there are no messages anymore.

This is because we have used console.debug() for the output. In the basic development mode (starting with npm start or compiling with npm run build:dev) these lines will be left included. Whenever you package your code for production with npm run build these lines will be removed from your code.

License Header

Look into the files walkthrough-lib.js and walkthrough-lib.css in a text editor. You will see a license banner which was build from the informations of the package.json. The default banner will look like:

${} ${PACKAGE.version}
Copyright (c) ${new Date().getFullYear()} ${}
License: ${PACKAGE.license}`

By the way: when you add a file LICENSE or AUTHORS in the root folder they will be copied also into the build results.

CDN Compilation

You see in the dist folder a subfolder named vendor. In there you will find all libraries and assets needed by your application. They are linked in the index.html file directly.

Now execute the following command and look again into the dist folder:

npm run build:cdn

Now you will see that there is no vendor anymore. This is because all libraries and assets will be loaded from a content delivery network.

Loading the index.html file directly in a browser will not work, because of the used protocol file://. But loading the index.html from a webserver will work. You do not have a webserver? Just run one with docker:

docker run -dit -p 9080:80 -v "$PWD"/dist:/usr/local/apache2/htdocs/ httpd:2.4

Now you can run the application calling the url http://localhost:9080/.