Setting up Bower and Bootstrap

bower

Overview

In the previous post we have build ASP.NET Core Web App, then Simple REST Service and refactored it to “Microservice“. All of this on Ubuntu. Now it’s time to add a bit of fronted, so this post will be about Bower and Bootstrap. Two things that every web developer should now.

Bower

Bower is package manager, something like NPM, or NuGet. It means that you can use it of getting packages done by other developers. It will handle installation and updates.

Bower vs NPM vs NuGet

There is a lot of questions like this, so there is no point of coping and pasting. I approach it this way:

  • NuGet is .NET thing. It has a lot of drawbacks and is not used that much in Open Source community. Forget about it for now, even Microsoft since VS 2015 supports bower and npm.
  • NPM is for server side. Reason behind is how it handles all dependencies: npm is nesting dependencies vs bower is flat. This means that npm can have more then 1 version of the same library in the project and bower can have only one. On front end you shouldn’t use more then one framework, on server you may need.
  • Bower is for front end from reasons mentioned above.

Using Bower

This is described here: Getting started with Bower. Shortening quick start it’s tough but here are steps:

    1. $ bower init
    2. Press Enter all the time and don’t care (referring to Chris Klug from Wroc# 2016)

I don’t like when I’m told what to do something without explanation, but this is a generator that has to be a separate post. This is the easiest thing, because only thing that this command will do is to create bower.json.

Bootstrap

Bootstrap is “default layout for your web app”. It contains all styles that you may need for any device that you are planning to support. It’s a tool that every developer who is not a designer would love from start. If you have created a web page that after hours of work still looked ugly, you would love bootstrap. If you can do pretty stuff, you still take a look on it. It makes life easier for everyone. @mdo and @fat should get Nobel prize for it.

Bower and Bootstrap

Here is a power of bower.

$ bower install bootstrap

It’s almost only thing that you need to do and care about.

Now we will follow KISS principle and do things which are not recommended. You should have your build pipeline for frontend, but this is first step to set it up.
Bootstrap is installed in your project, but you need to include Bootstrap files. You need to modify your head in index.html:

<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
Zaznaczenie_005
bootstrap and bower

All magic is done.

Summary

If you don’t see major difference, take a look on my incoming posts. This is just a first step to build full frontend build pipeline. Bower and Bootstrap are the most important tools that you need to have. This is must have in your web app.

Current code is maintained under Frontend build pipeline, but I don’t promise it will be there forever. If not, please take a look on master

You can sign up to newsletter, like me on Facebook, watch on Twitter or subscribe to RSS. Want more? Drop a comment 🙂 .

One thought on “Setting up Bower and Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *