Setup

In this walkthrough we will build a small library that can be used in other projects. The goal of this walkthrough is to learn the CodeCoupler Webpack development environment @codecoupler/cc-webpack that will be used also in all following walkthroughs.

Please make sure that you have installed the following extensions in your Visual Code environment:

• eslint
• prettier
• stylelint
• Volar

Start your project in a new folder and create a folder named walkthrough-lib (later on we will create folders for ui, api and setup). Please open now the folder walkthrough-lib in Visual Code, open a terminal and initialize the project with:

npm init @codecoupler/cc-webpack
git init -b main
npm i

Go to the file index.js in the folder src and put your first line of code:

src/index.js

document.write("Hello World");

Please start now watching your changes with npm start. This will start browser and all modifications in your code from now will reload the page automatically. From now on we will call this terminal with the running server the watching terminal. You can cancel the server with Ctrl+C.

You should see now the ingenious sentence "Hello World" in a browser window. Now add an exclamation mark at the end and save the file again:

src/index.js

document.write("Hello World!");

In the watching terminal you will see a new compilation starting, then the browser reloads and you will see the changes.