Preparing the environment

preparing the environment

At the beginning, we have to prepare the environment.

I will lead you through every step. You will be surprised how easy it is.

Don't worry if it sounds mysterious for you. Everything will become clear when we start to code.


I. Node.js installation

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast and scalable network applications.

Step 1.

Go to nodejs.org and download node.js

Step 2.

Launch installation and install it with all default settings (that means - click "next" until it gets installed :) ).

Done!


II. Git BASH installation

Git BASH provides a BASH emulation used to run Git from the command line.

Step 1.

Go to git-scm.com and depending on your operating system, download the proper version.

Step 2.

Launch installation and install it with all default settings (similar to node.js - click "next" until it gets installed).

Done!


III. Live server installation

Live server is a little development server with live reload capability.

Step 1.

Launch Git Bash

Step 2.

In the command line type:

npm install -g live-server

and click "enter"

Installation can take a while so for the moment it may seem that nothing happened.

After some time you should see the process has been ended successfully.

Done!


IV. Test Template downloading

I've prepared a simple HTML mockup which we'll use for the learning purpose of this tutorial.

That's the easiest part. Just click on the button below and unzip the package.

Download

Of course, if you prefer you can work directly on your production website. It's completely up to you.


V. BrandFlow account

BrandFlow is a tag manager which allows creating automation algorithms.

It's also a child's play.

Go to BrandFlow.net/app/ and create a free account.

You can sign up by using your Google account or by regular email registration.

VI. Final check

Let's see if everything works as expected.

Step 1.

Right click on Test Template directory (that's the directory where you have unzipped the downloaded package from point IV)

Step 2.

Choose " Git bash here"

Step 3.

Type " live-server"" and click enter.

If a new window of your browser has been opened and you can see a welcome message of our application - that means everything works fine. Well done!


Previous lesson Next lesson

Spread the word:
Do you need help?: Use our support forum

About author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits