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:
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:
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
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
Look into the files
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
1 2 3
By the way: when you add a file
AUTHORS in the root folder they will be copied also
into the build results.
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
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.
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:
Now you can run the application calling the url http://localhost:9080/.