Step 1
We will be using Node Package Manage to manage our libraries.
Create the project folder, and navigate to it in your console. Below is the command to create the project. We will use "--y" to auto-select the default options.
npm init --y
Open the project in VS Code. Press ctrl+` to display the terminal, which will be used to install the libraries using npm.
We will be using the gd-sprest-bs library for this solution.
The gd-sprest-bs library is used to interact with the SharePoint REST API and provide Bootstrap components designed for SharePoint.
npm i --save gd-sprest-bs
The 'i' is for "install" The '--save' will update the package.json file's "dependencies" property.
We will be using webpack and babel to compile and bundle the solution.
Babel is used to compile the code into javascript. We will utilize the environment preset to ensure the solution will work in the current browser standards.
npm i --save-dev @babel/core @babel/preset-env
The '--save-dev' will update the package.json file's "devDependencies" property.
Webpack is used to bundle the assets into a single file. We will use plugins to pass the files to babel through the webpack configuration file, created in the next step.
npm i --save-dev webpack webpack-cli ts-loader babel-loader
If you want to use CSS/SASS to define custom styling, then you will need to include the webpack loaders for the library types.
CSS
npm i --save-dev style-loader css-loader
SASS
npm i --save-dev sass-loader node-sass
npm i --save-dev @babel/core @babel/preset-env webpack webpack-cli ts-loader babel-loader style-loader css-loader sass-loader node-sass
