# Step 03 — Installing Frontend and Linter Dependencies

In this step, you will install the JavaScript dependencies needed on the frontend of energy tracker application. They include:

• React Router, for handling navigation in a React application.
• Redux is a predictable state container for JavaScript apps.
• react-redux
• 'redux-localstorage', store enhancer that syncs (a subset) of Redux store state to localstorage.
• 'fontawesome'

$ npm install react-redux redux react-router-dom redux-localstorage
+ react-redux@7.2.0
+ redux@4.0.5
+ react-router-dom@5.1.2
+ redux-localstorage@0.4.1
added 97 packages from 80 contributors, removed 49 packages, updated 1028 packages and audited 13678 packages in 109.771s

38 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

$ npm i --save @fortawesome/fontawesome-svg-core
+ @fortawesome/fontawesome-svg-core@1.2.28
added 2 packages from 6 contributors, removed 8 packages, updated 10 packages and audited 13680 packages in 13.078s

38 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

$ npm i --save @fortawesome/free-solid-svg-icons
+ @fortawesome/free-solid-svg-icons@5.13.0
added 1 package from 6 contributors, removed 8 packages and audited 13682 packages in 9.35s

38 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

$ npm i --save @fortawesome/react-fontawesome
+ @fortawesome/react-fontawesome@0.1.9
added 2 packages from 12 contributors and removed 8 packages in 14.188s

38 packages are looking for funding
  run `npm fund` for details

Setup Bootstrap

$ $ npm install bootstrap popper.js jquery

+ bootstrap@4.4.1
+ popper.js@1.16.1
+ jquery@3.5.0
added 131 packages from 81 contributors, removed 451 packages and updated 1128 packages in 91.656s

53 packages are looking for funding
  run `npm fund` for details

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

const webpack = require("webpack")

environment.plugins.append("Provide", new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default'],
}));

module.exports = environment;

app/assets/stylesheets/application.css

*= require font-awesome
*= require bootstrap
*= require_tree
*= require_self

Add custom css file

app/assets/stylesheets/custom.css.scss

@import 'bootstrap/dist/css/bootstrap';
@import "font-awesome";

$blue: #42B5E8;
$gray: #acafb4;
$green: #22C65B;
$grey: #313944;

.bg-blue {
  background-color: $blue;
}

.bg-grey {
  background-color: $grey;
}

nav {
  h1 {
    color: white;
    font-weight: 600;
  }
}

.navbar-brand.abs {
  text-align: center;
  width: 100%;
}

.text-content {
  margin-top: 70px;
}

#sticky-footer {
  flex-shrink: none;
  height: 50px;
}

.nav-pills 
.nav-link.active,
.nav-pills
.show > .nav-link {
	color: #fff;
	background-color: $blue !important;
}

.tablist {
  .col {
    padding-left: unset;
    padding-right: unset;
  }
}

.nav-pills .nav-link {
  border-radius: 0 !important;
  color: $gray;
  i {
    font-size: 1.5em;
    line-height: 1.3;
  }
  p {
    font-size: 13px;
    line-height: 17px;
  }
}

.nav-link {
  padding: 0 !important;
}

.sign-in-up .left-inner-addon {
  position: relative;
}

.sign-in-up .left-inner-addon input {
  padding-left: 30px;
}

.sign-in-up .left-inner-addon i {
  position: absolute;
  padding: 10px 12px;
  pointer-events: none;
}

.sign-in-up .right-inner-addon {
  position: relative;
}

.sign-in-up .right-inner-addon input {
  padding-right: 30px;
}

.sign-in-up .right-inner-addon i {
  position: absolute;
  right: 0px;
  padding: 17px 12px;
  pointer-events: none;
}

.sign-in-up .click2select {
  text-align: center;
  margin-top: 1em;
}

.sign-in-up .paywith {
  padding: 12px 12px 0 0;
  margin: 0;
  font-weight: bold;
}
.btn-danger, .btn-danger:hover {
  background-color: $green;
  border-color: $green;
}
.btn-primary, .btn-primary:hover {
  background-color: $blue;
  border-color: $blue;
}
  input[type="text"], input[type="password"], .btn {
  border-radius: 0px;
}

Setup Font Awesome

Let Webpacker handle everything for you. Import the fontawesome.scss directly into your application.js file. Webpack will copy the font and reference it correctly.

$ npm installv @fortawesome/fontawesome-free
.
.

Create a new folder & file below;

app/javascript/src/font-awesome.js

import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
import '@fortawesome/fontawesome-free/scss/regular.scss';
import '@fortawesome/fontawesome-free/scss/solid.scss';

Add the following in existing file;

app/javascript/packs/application.js

import '../src/font-awesome.js';

and

<!-- app/views/layouts/application.html.erb -->
<%= stylesheet_pack_tag "application" %>
<%= javascript_pack_tag "application" %>

Setup Linters

1. Run npm install eslint eslint-config-airbnb --save-dev (not sure how to use npm? Read this).

$ npm install eslint eslint-config-airbnb --save-dev
+ eslint-config-airbnb@18.1.0
+ eslint@6.8.0
added 73 packages from 60 contributors, removed 8 packages and audited 13961 packages in 12.574s

44 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

2. Run npx eslint --init.

3. Make sure you select the following options when prompted.

   ? How would you like to use ESLint? To check syntax, find problems, and enforce code style

   ? What type of modules does your project use? JavaScript modules (import/export)

   ? Which framework does your project use? React

   ? Does your project use Typescript No

   ? Where does your code run? Browser

   ? How would you like to define a style for your project? Use a popular style guide

   ? Which style guide do you want to follow? Airbnb

   ? What format do you want your config file to be in? JSON

   The config that you've selected requires the following dependencies: ? Would you like to install them now with npm? Yes

4. Copy the contents of .eslintrc.json to the newly generated .eslintrc.json overwritting the previous content.

5. Do not make any changes in config files - they represent style guidelines that you share with your tem - which is a group of all Microverse students.

   • If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.

6. Double check your ./src folder for any extra unnecesary .eslint config files that might have been generated as this might cause an issue with stickler when you create your Pull Request later on.

Set-up Rubocop in your local env - it will help you to find style errors

1. Add gem 'rubocop' to Gemfile (not sure how to use Gemfile? Read this).

2. Run bundle install.

$ bundle install
.
.
Fetching rubocop 0.82.0
Installing rubocop 0.82.0
.
.
Bundle complete! 18 Gemfile dependencies, 84 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

3. Copy .rubocop.yml to the root directory of your project

4. Do not make any changes in config files - they represent style guidelines that you share with your team - which is a group of all Microverse students.

   • If you think that change is necessary - open a Pull Request in this repository and let your code reviewer know about it.

5. Run rubocop.

6. Fix linter errors.

7. IMPORTANT NOTE: feel free to research auto-correct options for Rubocop if you get a flood of errors but keep in mind that correcting style errors manually will help you to make a habit of writing a clean code!

$ yarn install --check-files
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 80.23s.