Twitter Bootstrap 4 : Setup Environment

The current version of rubyplus.com uses Twitter Bootstrap 3.3. The goal of the Twitter Bootstrap article series is to migrate it to Twitter Bootstrap 4. The upgrade is the most painful thing in a Rails project. Front-end developers find it difficult to run different servers and all the dependencies in Gemfile just to test changes to their static files. Separating the front-end allows the secret sauce to remain in Rails app. It is easier to delegate UI tasks without asking someone to sign NDA. Front-end developers can use their favorite tools to develop the front-end part of the application. It is easier and faster to prototype workflow.

There is no need to argue about NodeJS vs Rails. We can leverage the strengths of both these technologies and minimize the drawbacks by using them where it makes sense. They can co-exist. In this article, we will write a simple hello world html file and setup the environment to work on our migration project. Let's create a simple hello bootstrap html page. Create hello.html with the following contents:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>RubyPlus</title>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello Bootstrap 4</h1>
    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

This html page is the starter template copied from Twitter Bootstrap 4 home page. This page uses CDN. If we need to develop without internet connection we need to download the css, javascript files and store in locally in our file system. This will become tedious to keep upto date with the changes as the project grows. We can use bower to manage the dependencies. You need NodeJS installed on your machine. You can then install bower:

npm install -g bower

We can install the bootstrap 4 by running the bower command:

bower install bootstrap#v4.0.0-alpha.6

This will install all the required libraries (bootstrap, jquery and tether) in bower_components under your project directory. We can now change the html page to use the libraries installed by the bower.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>RubyPlus</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bower_components/tether/dist/css/tether.min.css">
</head>
<body>
    <div class="alert alert-info">
        Hello Bootstrap 4
    </div>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/tether/dist/js/tether.min.js">
    </script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js">
    </script>
</body>
</html>

We are now ready to start developing the Bootstrap 4 version of rubyplus.com. We will continue adding new features to this webapp in the upcoming articles.


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.