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:
From Run menu click on “Start Debugging” to pen the browser window:
