Modern Frontend Web App

Configure and install a modern frontend application.

Nodejs and npm

Follow the steps below to ensure you are on the latest version of node and npm.

Install Nodejs

Download and install Nodejs: Nodejs website.

Update Nodejs

Install n to manage node versions. It needs to be installed globally.

npm install -g n

Install the LTS version of node.

n lts

Remove previously installed versions.

n prune

Update NPM

Ensure NPM is on the latest version available for you current Nodejs installation.

npm install -g npm@latest

Yarn

Enable Corepack

Corepack is included by default with all Node.js installs, but is currently opt-in. To enable it, run the following command.

corepack enable

Updating the global Yarn version

Ensure yarn on the latesd stable version.

corepack prepare yarn@stable --activate

Initializing your project

Just run the following command. It will generate some files inside your current directory; add them all to your next commit, and you'll be done!

yarn init -2

Webpack

Install webpack

Add webpack and webpack-cli on your project.

yarn add webpack webpack-cli --dev

Get started

Create those new files. Get the content of the files on the project.

  modern-web-app
  ...
+ |- index.html
+ |- /src
+   |- index.js

Now update the package.json file.

 {
   "name": "modern-web-app",
+  "private": true,
   "packageManager": "yarn@3.6.1",
   "devDependencies": {
     "webpack": "^5.88.1",
     "webpack-cli": "^5.1.4"
   }
 }

Let's get back to index.js file, extracted this quote from the original documentation so feel free to explore it:

In this example, there are implicit dependencies between the <script> tags. Our index.js file depends on lodash being included in the page before it runs. This is because index.js never explicitly declared a need for lodash; it assumes that the global variable _ exists.

There are problems with managing JavaScript projects this way:

It is not immediately apparent that the script depends on an external library. If a dependency is missing, or included in the wrong order, the application will not function properly. If a dependency is included but not used, the browser will be forced to download unnecessary code. Let's use webpack to manage these scripts instead.