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 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.
This is described here: Getting started with Bower. Shortening quick start it’s tough but here are steps:
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 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">
All magic is done.
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.