Setting Up Project Frontend

Parcel setup

Important: Node.js must be installed as we are required to install some important Javascript needed in the project.

Initializing project

While in the bookapp/client/ folder, we first need to initialize npm:

npm init

This will ask a series of questions, mostly related to general information about the project. Just using the defaults is OK, but feel free to update the information.

Installing JavaScript libraries

Let’s install the required JavaScript libraries we’ll use as part of our development toolchain:

npm install parcel-bundler parcel-plugin-transcrypt --save-dev

npm install parcel-plugin-bundle-visualiser --save-dev

npm install express http-proxy-middleware --save-dev

Before we can use the Transcrypt plug-in, we need to manually update one of the plug-in’s JavaScript files as a workaround for a Parcel version incompatibility.

Updating the parcel-plugin-transcrypt module

The file that needs to be updated is located at:

./node_modules/parcel-plugin-transcrypt/asset.js

In that file, we’ll change line 2, which loads the Parcel Logger module, from the following:

const logger = require('parcel-bundler/src/Logger');

We’ll change it to this:

const logger = require('@parcel/logger/src/Logger');

Once this modification is made, the Transcrypt plug-in for Parcel should be working.

Installing more JavaScript libraries

Now, we’ll install some of the JavaScript libraries that we know we’ll be using in the application itself:

npm install react@16 react-dom@16 react-ga

npm install @material-ui/core @material-ui/icons

npm install @babel/polyfill deepcopy

Modifying package.json

Next, we need to add our build scripts. We can add these scripts to the existing “scripts” section in package.json file (once again, mind where the commas go):