Set Up

Step by Step installation and configuration to get started

Node.js

Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. It basically helps to develop server side JavaScript application. This is a pre-requisite to develop our application.

Installation : Click here to go the official Node.js page.Download and install it from there

NPM

NPM stands for Node Package Manager and it is a package manager for JavaScript.It is the world’s largest package manager and depending upon your application requirement you can install available packages from NPM which comes in small packages known as “node or npm modules”.

You can also create your own NPM packages and publish it to NPM which can be used by others. To know more, go to its official site.

Installation : NPM can be installed while installing Node.js or you can also install it globally from command line like this

npm install npm -g

We will be using npm to install all the dependencies going forward in this article.

Let’s begin by creating a project folder “ReactReduxSassStarterkit” and then create the package.json file for this project. We will first go inside the project folder and the run -

npm init

This command will create the package.json file after we give inputs to a series of default config options in the cli .

Image showing the package.json file inside the project folder ‘ReactReduxSassStarterkit’.

Reactjs

Reactjs is a JavaScript library to build UI and is one of the widely used and popular JavaScript library in today’s date.

To Know more about Reactjs , go to it’s official site.

Installation: Reactjs can be directly added to the HTML page or we can install its NPM package like this. --save is to save the react package as a dependency to this project.

npm install react --save

We will be needing one more package called react-dom package to render the DOM.

npm install react-dom --save

When working on an actual web application, we will be needing many more react modules as our application scope grows. But these two packages react and react-dom are sufficient for the purpose of this article.

Redux

By definition, Redux is a predictable state container for JavaScript application.As our single page application grows in size and complexity, it is very difficult to manage different state of the application. The states can be anything from server-side responses to UI layer states for toggling a UI panel.This is where Redux comes into picture to ease our application state management with its single store to hold the application state.

For the detailed concepts and its API definitions, please go to its official site.

Installation: Like React, we can directly download its pre-compiled development and production UMD builds and embed the files to the <script> tag directly. Or , we can install its NPM packages like this below-

npm install redux --save

Redux can be used with frameworks like React , Angular, jQuery ,etc. In this article, as we are demonstrating Redux with Reactjs , we need to install an additional react-redux package.

npm install react-redux --save

Sass

Sass,a.k.a, Syntactically Awesome Style Sheets, is basically a CSS preprocessor. It’s a very mature and powerful CSS extension available.In today’s world, UI/UX developers goes with CSS preprocessor like Sass instead of plain vanilla CSS.

Because of its great features like nesting, variables, functions, mixins , adding logic , etc., creating style sheets are now much simpler and less time consuming when it comes to manage your huge CSS file with thousands of CSS rule-set.Of course, to know more, visit its official site.

Installation: Let us install its npm package with the below command.

npm install node-sass --save

So far we have installed the npm packages for Reactjs, Redux, Sass as dependencies . While installing these with — -save , it creates an entry inside the ‘dependencies’ section in the package.json file as shown below. The installed npm packages can now be found under the node_modules folder.

Image showing the dependencies in package.json and also the ‘node_modules’ folder.

In this article, we will be using ES6 to write our React + Redux application.But ES6 is still not widely supported by latest browsers and for this reason we will be needing a transpiler to convert our ES6 syntax to its lower version ES5 so that it is compatible for all browsers and environment.This will lead to our next topic of discussion ‘Babel’.

Babel

Babel is a JavaScript Compiler and is mainly used to convert ECMAScript 2015+ (like ES6)code into a backwards compatible version of JavaScript in current and older browsers or environments.

As we are going to use ES6 for this project , babel is required to transpile our ES6 code to ES5 which is compatible to most browsers or environments.So, let just install it to our project.

Installation: We will be running a series of commands to install multiple packages for Babel. Below are the cli commands with its description to understand the use of each specific module.

i. Firstly, we will be installing the babel-core package.

npm install babel-core --save-dev

ii. We also need to install a few babel presets . babel presets are basically a set of plugins used to support particular language specific features,

npm install babel-preset-react babel-preset-es2015 --save-dev

We can also install multiple packages at the same time as shown below. The suffix --save-dev is to install these packages as development dependencies as we are needing these only in development environment. The production environment will not require these dependencies and will not install these dev-dependencies in production environment.

iii. The last thing to do for making babel work is to create a babel config file called .babelrc . In the .babelrc file , we have to one entry for the preset.

Image showing the dev dependencies in package.json.

Webpack

Webpack is a module bundler for JavaScript application. We can do a lot of configurations in Webpack to manage and automate our project assets.

Webpack is a vast topic and you can go to its official documentation for detailed understanding.

In this article, we will just show its basic installation and other minimal configurations to get started.

Installation: At first ,we will start installing webpack and webpack-cli to get started. webpack-cli package is the official CLI for webpack and it provides a set of commands which helps to create a custom webpack configurations . We will be needing two more webpack packages — webpack-merge to merge webpack config objects from multiple webpack config files and webpack-dev-server to locally create a development server in memory to ease development.

Like babel we will install them as --save-dev or dev dependencies.

npm install webpack webpack-cli webpack-merge webpack-dev-server --save-dev

Scaffolding: Now as we have webpack installed , we have to think about the different configurations to pick our source JavaScript files, then to do various transformations and finally put them somewhere or load it in the DOM so that our application starts accessing these files.

Before that, let us scaffold the project structure to organize our code files.Two folders src and dist has been created under ‘ReactReduxSassStarterkit’ project folder to contain the source and distribution files respectively.

Both these folders contain js folder to keep JavaScript files. Our source JavaScript files(React code in our case) will lie inside the src/js folder and after these gets transpilled these will go inside dist/js folder with the help of a Webpack .

We will also create src/sass folder to keep our .scss or sass files and dist/css folder to keep the .css files generated from .scss with the help of webpack . Finally, we will add one index.html file inside the dist folder which will load our React+ Redux Application.

Image showing the project scaffolding.

Configuration: Once our project scaffolding is completed , we can start the webpack configuration.For this purpose, we are going to create webpack config files.

Webpack config files are not mandatory to perform webpack operations.We can create one or multiple webpack config files depending on our needs.

For our purpose, we will create three webpack config files in the project root directory.

webpack.common.js :- This file will contain common webpack configurations applicable to both dev and prod environment.

webpack.dev.js :- This file will contain dev environment specific webpack configurations.

webpack.prod.js :- This file will contain prod environment specific webpack configurations.

Image showing the three webpack config files

As of now these files are empty, we will soon add config objects to these files. But before that lets discuss a few things which will come inside these files.

Basically, webpack has a few core concepts and i will just give a gist of it for the sake of this article and to give the high-level idea of our webpack configuration entries.

— Entry: This config property is to add one or more entry points which will be used by webpack to build them and its internal dependencies.

In our case, index.js and main.scss are the entry point files inside the src/js and srs/sass folder respectively.

— Output: This config property is required to tell where to generate and what to name the files.

In our case, dist folder is where the files will be emitted. dist/js will contain the generated JavaScript files.In prod environment, css file(s) will be compiled from sass and is generated inside dist/css folder.

— Loaders: Webpack ,by default, can only process JavaScript and Json files .Using this property we can enable webpack to process other types of files. Click to check out different Webpack Loaders

In our case , we are going to use the below webpack loaders.

babel-loader : A webpack loader to transpile ES2015+ code to ES5 using babel .

: A webpack loader to transpile ES2015+ code to ES5 using . sass-loader : A style loader to load and compile SASS/SCSS file.

: A style loader to load and compile SASS/SCSS file. css-loader : A style loader to load CSS file with resolved imports and return CSS code

: A style loader to load CSS file with resolved imports and return CSS code style-loader : A style loader to add exports of a module as style to DOM.

So, Let us install the npm packages for these webpack loaders.

npm install babel-loader sass-loader css-loader style-loader --save-dev

— Plugins: With the help of this property we can declare different webpack plugins for our needs. Webpack plugins can be used to perform different tasks like minification , managing assets ,etc.

In this article , we will be incorporating a few webpack plugins to the “ReactReduxSassStarterkit” that we are developing, to perform some cool stuffs.So, lets install them and we will also see what these individual plugins actually do.

html-webpack-plugin : To simplify creation of HTML files to serve your bundles. We will be needing this for dev environment.

: To simplify creation of HTML files to serve your bundles. We will be needing this for environment. html-webpack-template : It is basically a template for the html-webpack-plugin .

: It is basically a template for the . clean-webpack-plugin : To remove/clean your build folder(s) before building.

: To remove/clean your build folder(s) before building. mini-css-extract-plugin : This plugin extracts CSS into separate files.

npm install clean-webpack-plugin html-webpack-plugin html-webpack-template mini-css-extract-plugin --save-dev

So, now we can add the configurations to three webpack config files which we have already created. webpack.common.js are shared by webpack.dev.js and webpack.prod.js with the help of webpack-merge .

Lets also create our Starter Kit landing page in Reactjs and its style-sheet in sass or scss .

Below is the app.jsx file inside src/js to render the basic html markup and index.js which will import the app.jsx and render it with the help of react-dom .

And finally, this is the .scss file inside src/sass folder.

Image showing the final files and its structure under “ReactReduxSassStarterkit”

Well, we have installed all our dependencies and created all the required assets for the “ReactReduxSassStarterkit”. We are in the final stage of our set up process.

Now, to actually run and automate this build process, we are going to use some cli commands. How will we do this ? The answer to this is our next topic NPM Scripts