Setting up the frontend development

The first step is to ensure our environment is ready to work with. Certain dependencies will need to be pulled in using NPM, so it's important that this is installed and up to date. If you don't already have it installed, do so using the relevant instructions from https://www.npmjs.com/get-npm.

Once NPM is installed, run the following from the root directory of the project:

npm init

This will step through the fields that need to be set in our project's package.json file. An example file is shown here:

{
"name": "packtcoin",
"version": "1.0.0",
"description": ""Packt Token Sale ICO"",
"main": "app.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "test",
},
"author": "<your_name>",
"license": "ISC",
}

The main dependencies that we will require are as follows:

  • lite-server: A lightweight web server. Note that this should only be used for development  if you want to properly deploy your frontend, a suitable alternative should be used.
  • browser-sync: A dependency of lite-server that allows us to expose the files required by the frontend.

For the first of these, install the package using the following:

npm install --save lite-server

We can then add a new entry in the package.json file to enable us to run our web server. In the scripts section, add a dev entry:

 "scripts": {
"test": "test",
"dev": "lite-server"
},

To configure the browser-sync dependency, we need to create a new file at the root of our project, bs-config.json. In this file, add the build/contracts/ directory, as well as the src/ directory, which we will create shortly:

{
"server": {
"baseDir": ["./src", "./build/contracts"]
}
}
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset