Create Project

We will be using Node Package Manage to manage our libraries.

Create the project

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

Example

Download Libraries

Open the project in VS Code. Press ctrl+` to display the terminal, which will be used to install the libraries using npm.

Required for Application

• DataTables - A plugin for tables.
  • jquery - Required for the datatables.net library.
  • Bootstrap 4 Plugin - Styles the table using Bootstrap classes.
• gd-sprest-bs - The gd-sprest-bs library is used to interact with the SharePoint REST API and provide Bootstrap components designed for SharePoint.
  • gd-sprest-bs-vue - The gd-sprest-bs-vue VueJS components.
• VueJS - JavaScript framework we will be using to build this application.
  • Vue Router - The official router for VueJS.
  • Vuex - A state management pattern for VueJS.

npm i --save datatables.net datatables.net-bs4 jquery gd-sprest-bs gd-sprest-bs-vue vue vue-router vuex

The 'i' is for "install" The '--save' will update the package.json file's "dependencies" property.

Required for Packaging Solution

We will be using webpack and babel to compile and bundle the solution.

npm i --save-dev @babel/core @babel/preset-env webpack webpack-cli webpack-dev-server ts-loader babel-loader vue-loader vue-template-compiler style-loader css-loader sass-loader node-sass

The '--save-dev' will update the package.json file's "devDependencies" property.

Babel

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

Webpack

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 webpack-dev-server ts-loader babel-loader vue-loader vue-template-compiler

SASS

As an option, you can bundle CSS or SASS. We will use plugins to pass the files defined in the webpack configuration file, created in the next step.

npm i --save-dev style-loader css-loader sass-loader node-sass

Next Step