Create Frontend Development Environment Fast

By | January 10, 2022

I wrote this post for myself as quick reminder how to create web frontend ADE from scratch. Two components must be install VSCode and Node.js with npm (Node Package Manager). Both components may be installed on different operating systems: Windows, Mac or Linux. I was using Mac OSX. VSCode may be downloaded from https://code.visualstudio.com/download and Node.js from https://nodejs.org/en/download
After Node.js installation check version of node and npm:


% node -v
v16.13.1
% npm -v
8.1.2

Start “npm install” without additional argument to install all the dependencies in the project.
This command creates node_modules directory and 2 json files: package-lock.json and package.json:


% ls -l
total 16
drwxr-xr-x 5 alex.ermolaev staff 160 10 Jan 15:03 node_modules
-rw-r–r– 1 alex.ermolaev staff 1595 10 Jan 15:03 package-lock.json
-rw-r–r– 1 alex.ermolaev staff 54 10 Jan 14:57 package.json

Adding additional bootstrap module, running “npm install bootstrap”. New bootstrap subdirectory will be created:


% ls -l node_modules/bootstrap
total 64
-rw-r–r– 1 alex.ermolaev staff 1131 10 Jan 15:03 LICENSE
-rw-r–r– 1 alex.ermolaev staff 13617 10 Jan 15:03 README.md
drwxr-xr-x 4 alex.ermolaev staff 128 10 Jan 15:03 dist
drwxr-xr-x 4 alex.ermolaev staff 128 10 Jan 15:03 js
-rw-r–r– 1 alex.ermolaev staff 9453 10 Jan 15:03 package.json
drwxr-xr-x 47 alex.ermolaev staff 1504 10 Jan 15:03 scss

Start vscode, open folder with node_modules, package-lock.json and package.json, create new file index.html:
vscode
From Run menu click on “Start Debugging” to pen the browser window:
index.html

Leave a Reply

Your email address will not be published. Required fields are marked *