Building your own frontend framework from scratch — 2. Setup

Assuming you read the introduction, we now have a bit of a roadmap as to where we want to go with this project.

What we need now is to set up our environment. For this project to work, we need to be able to write Sass which will compile to css. If we don’t do this, this project would turn out to be horrible to produce. So we need a few things which are all cross-platform tools.

1. Hyper — A cross-platform terminal
2. VS Code — Excellent code editor
3. NPM — Node Package manager
4. Gulp — A task runner
5. Bower — A package manager

Most of the installation we are going to do is going to happen in the terminal. It’s not as scary as it sounds. You will just have to type in a few commands, and also while developing you will get comfortable with a few commands that you have to run regularly. It won’t be tough, I promise.

So assuming you’ve got NPM installed we can run a quick test. Open up Hyper and type node -v then enter and you should get output that shows you a version, like so:

➜ node -v
v8.9.4

And then do the same thing with npm -v and then enter. You should get output like so:

➜ npm -v
5.6.0

If that was successful, then we’re looking pretty damn good so far!

Now we can install Gulp. So in our terminal let’s type

npm install gulp-cli -g

and hit enter. It will install some stuff for a few seconds and end up looking like this:

➜ npm install gulp-cli -g
/Users/thabo/.nodenv/versions/8.9.4/bin/gulp -> /Users/thabo/.nodenv/versions/8.9.4/lib/node_modules/gulp-cli/bin/gulp.js
+ gulp-cli@2.0.1
added 235 packages in 28.796s

Great. Now if you type gulp -v you should get output similar to this:

➜ gulp -v
[16:12:13] CLI version 2.0.1

It’s almost too easy right?

Last thing we need is Bower. Bower has the package we need to do our development. It’s like a framework so we can build our framework :).

So lets get bower with npm install bower -g and you should get this:

➜ npm install bower -g
npm WARN deprecated bower@1.8.4: We don't recommend using Bower for new projects. Please consider Yarn and Webpack or Parcel. You can read how to migrate legacy project here: https://bower.io/blog/2017/how-to-migrate-away-from-bower/
/Users/thabo/.nodenv/versions/8.9.4/bin/bower -> /Users/thabo/.nodenv/versions/8.9.4/lib/node_modules/bower/bin/bower
+ bower@1.8.4
updated 1 package in 7.504s

We can happily ignore the warning. It’s irrelevant to what we’re trying to achieve.

Last test — you guessed it bower -v and output should be similar to:

➜ bower -v
1.8.4

And now we have all of our dependencies need to develop.

Getting the repo setup

Open up Hyper. We’re going to create a folder that will hold all our projects. Skip if you already have a folder. Enter this into Hyper:

mkdir ~/Projects

This will create a new folder called Projects in your user folder. Now lets go into that directory by typing:

cd ~/Projects

and this will take you to your newly created Projects folder. Now we can run:

bower install thabotitus/html5-boilerplate-sass-gulp

and the output should be along the lines of:

bower html5-boilerplate-sass-gulp#*       not-cached https://github.com/thabotitus/html5-boilerplate-sass-gulp.git#*
bower html5-boilerplate-sass-gulp#*          resolve https://github.com/thabotitus/html5-boilerplate-sass-gulp.git#*
bower html5-boilerplate-sass-gulp#*         download https://github.com/thabotitus/html5-boilerplate-sass-gulp/archive/master.tar.gz
bower html5-boilerplate-sass-gulp#*          extract archive.tar.gz
bower html5-boilerplate-sass-gulp#*         resolved https://github.com/thabotitus/html5-boilerplate-sass-gulp.git#ee358a8556
bower html5-boilerplate-sass-gulp#*          install html5-boilerplate-sass-gulp#ee358a8556
html5-boilerplate-sass-gulp#ee358a8556 bower_components/html5-boilerplate-sass-gulp

And now if you look in Projects you should have a folder called html-boilerplate-sass-gulp .Great! You should rename this folder to something a little better. Whatever you want to call your framework. I’ll call mine griffin-ui (because I just watched an episode of Family Guy).

Wow! We’re almost there!

Last thing we have to do is install the project dependencies. There are 2 ways we can do this.

1. In Hyper you can navigate to your project folder and then run npm install which looks like:

cd ~/Projects/griffin-ui

and then run

npm install

What’s hapenning? Well in your project folder there is a file called package.json and in there there aredependencies and devDependencies . These are the names of the other little projects that your projects needs to work. So we run npm install to install them.

2. The second option is to do all this in VS Code. VS Code is really great in that it has an integrated terminal that you can use while working on your project. Just type Ctrl+` or cmd+` depending on your operating system. This will open up a terminal at the bottom of your screen already navigated to your project. You can then run npm install .

Nice. Now we should have all our dependencies and should be ready to go.

Now we can run one last command that should bring this all together.

gulp serve

This will start a development server and automatically open up a new tab in your web browser that says Hello World! blah blah blah.

If you see that, then you’ve won!

So now we have the tools and environment ready to build our new framework. We did a lot grunt work. Now the fun starts. So lets move on to the next part — Setting up our colours!

*** You can reference the code at https://github.com/thabotitus/griffin-ui