Compiling Features

please take a last look at the console when you start the application in your browser with npm start. There you will find the following messages:

Starting Vanilla Button
Starting jQuery Button
Starting Import Button
Starting Dynamic Button
Starting Variable Button
Starting Vue Button

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

1	`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 and Production Code

First 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.

If you want to exclude more code in production environments you can use the following construct:

if (process.env.NODE_ENV === "development") {
  /* This code will not be included in production environments */
}

License Header

Look into the files walkthrough-env.js and walkthrough-env.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.name} ${PACKAGE.version}
Copyright (c) ${new Date().getFullYear()} ${PACKAGE.author}
License: ${PACKAGE.license}`

Now let's add the folowing file BANNER to our project directory:

BANNER

1 2	`License: MIT Copyright (c) 1973 Example Corp`

Now execute the following command and look again into the files walkthrough-env.js and walkthrough-env.css:

1	`npm run build`

As you can see the banner have changed to something like:

walkthrough-env 0.0.0
License: MIT
Copyright (c) 1973-2025 Example Corp

All parts with "Copyright (c) (some digits)" will be replaced and the current year will be added.

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:

1	`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/.