Last modified: Thu Aug 16 2018 22:49:02 GMT+0800 (Malay Peninsula Standard Time)

Chapter 5. 10 Minutes Setup Challenge

This is a challenge or demo to show how fast you can get Rails application to work and deploy to the Heroku PaaS within 10 minutes. A video tutorial that shows step by step operation is available and can be found here. The complete source code of the improved version of this tutorial can be found here.

Here are the major components that we will try to achieve within 10 minutes

  • Setup a new Website
  • Add Materialize Styling
  • Add user authentication
  • Deploy it to Heroku PaaS
  • Test our website

There will be no major explanation in this chapter. All the information have already been discussed in this tutorial. Use the search feature to search or the specific topic.

5.1 Video Transcript

A video tutorial that shows step by step operation can be found here.

[0:04] To start a fresh website, use the new command.

rails new Challenge

[0:20] Add Materialize and Jquery Gem to your gemfile

gem 'materialize-sass' gem 'jquery-rails'

[0:39] Rename our stylesheet extension from .css to .scss.

[0:43] Import the stylesheet by importing Materialize library

@import "materialize/components/color";
$primary-color: color("blue", "lighten-2") !default;
$secondary-color: color("yellow", "base") !default;
@import 'materialize';

[0:49] Import the Javascript library to application.js

//= require jquery
//= require turbolinks
//= require materialize-sprockets

[0:53] Remove the duplicates

//= require turbolinks

[0:59] Add the library to application.js

//= require materialize/extras/nouislider

[1:05] Add noUiSlider to your stylesheet, app/assets/stylesheet/application.scss

@import "materialize/extras/nouislider";

[1:10] Add the Materialize Icon by importing the library to your stylesheet.

@import "https://fonts.googleapis.com/icon?family=Material+Icons";

[1:18] Set our directory to Challenge

``cd challenge

[1:20] Generate a Page controller with home and help page action.

rails g controller Page home help

[1:39] Add the HTML5 tag <main>

<main>
  ...
</main>

[1:50] Wrap the body with container

<div class="container">
  ...
</div>

[2:05] Add the HTML tag header and render the partial

<header>
  <%= render "layouts/header" %>
</header>

[2:19] Add the HTML tag footer and render the partial

<footer>
  <%= render "layouts/footer" %>
</footer>

[2:30] Create a header file, _header.html.erb and _footer.html.erb.

[2:48] Add the following code to make the footer sticky

  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

[2:53] In the _footer.html.erb, add thesample code below and also can be found from Materialize Documentation.

<footer class="page-footer">
  <div class="container">
    <div class="row">
      <div class="col l6 s12">
        <h5 class="white-text">Footer Content</h5>
        <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
      </div>
      <div class="col l4 offset-l2 s12">
        <h5 class="white-text">Links</h5>
        <ul>
          <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer-copyright">
    <div class="container">
    © 2014 Copyright Text
    <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
    </div>
  </div>
</footer>

[3:02] In the _header.html.erb, add the sample code below and also can be found from Materialize Documentation.

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">Logo</a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <li><a href="collapsible.html">JavaScript</a></li>
    </ul>
  </div>
</nav>

[3:17] Add devise to your Gemfile

gem devise'

[3:24] Comment out bcrypt and add ruby to the line. This is because there are many different bcrypt libraries.

[3:37] Run the generator to generate the required files

Rails g devise:install

[3:44] Set up our default URL for Devise mailer for development environment.

config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

[3:56] Add the flash message to application.html.erb

<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

[4:25] In your config/routes.rb, modify the route for home and set it to root.

root 'page#home'

[4:32] Generate a User model and point to Devise controller.

rails g devise User

[4:44] Perform a database migration

rails db:migrate

[4:57] To deploy it to Deploy it to Heroku PaaS, we have to move the sqlite3 gem away to development group.

[5:04] Add the following gems to production group. Do note that there is a typo at line 46 in the video.

group :production do  
  gem 'pg'  
  gem 'rails_12factor'  
  gem 'dalli'  
end

[5:36] Add our repository to Github Desktop.

[5:46] A typo is made and rails server is unable to start.

[6:02] Reattempt to start the server.

rails s

[6:08] Commit our changes to Github.

[6:21] Publish our application to Github.

[6:25] View our application locally at localhost:3000.

[6:28] Deploying our application to Heroku PaaS.

[6:55] Discover header and footer are not rendered.

[7:03] Fix typo at line 12 and line 27.

[7:10] Reload the webpage and everything is working as expected this time.

[7:16] Push our changes to Github.

[7:58] Deploy our application again as we push our latest code to Github.

[8:00] Perform a database migration at server side.

rake db:migrate --app YOUR_APP_NAME

[8:24] Heroku is still building our application and we are seeing our old homepage.

[8:32] Our application is built and deployed successfully!

[8:45] Create a new user to make sure that our database is working correctly

[9:00] Success!

results matching ""

    No results matching ""