Star Wars API — Part 4: Bootstrap and Heroku
Funding Please — It’s Live and It’s Pretty
So if you have been following along with any of the series so far you will see that we have taken this from a simple CLI application that would only return the names of characters in a movie, to storing the information in a database with Active Record, to, most recently, a fully functioning Rails application that is only available locally. In this part we’ll import Bootstrap to make it look a little bit better and then launch LIVE on Heroku.
If you want to see my demo it lives at: swapi-blogpost.herokuapp.com
On to the magic…
Setup Postgres
Install and run Postgres if you do have it up and running already. If you do have it running then you should see this in your toolbar (if you’re on a Mac):
To create this application we are going to need an almost carbon copy of Part 3 to start with. You can find the blogpost on it here and the github repo of the entire series here. If you copy that folder then we only have 2 changes to make:
- Change the Database from SQLite3 to Postgres.
- Update our gems to reflect this change.
To change our database we need to change database.yml.
I deleted everything that was in the current version of the file and replaced it all with this:
./config/database.ymldefault: &default
adapter: postgresql
encoding: unicode
pool: 5development:
<<: *default
database: swapi_developmenttest:
<<: *default
database: swapi_testproduction:
<<: *default
database: swapi_production
username: swapi
password: <%= ENV[‘SWAPI_DATABASE_PASSWORD’] %>
This is what the file would have looked like is we had generated the project with:
rails new swapi -d postgresql #we left off the -d flag the 1st timeNext is to make a tiny edit to your Gemfile:
#gem 'sqlite3'
gem 'pg'You can either comment out or remove the SQLite3 gem and add in the Postgres gem. Don’t forget to run bundle install after you make the change!
We can test to make this is still working properly very quickly. In console run:
rake db:create
rake db:migrate
rake db:seed
rails sThen check out your http://localhost:3000. It should be an exact copy of the project we had in part 3. The only difference is that we are now running this on a Postgres DB instead of SQLite3 and since that is all happening the in background we cannot even tell the difference.
Setup Bootstrap
Here we will import Bootstrap 3.3.6 for our project. First I will show the very easy way to import Bootstrap (via a CDN). This has the advantage of being extremely easy, but has the disadvantage that you cannot test your site without an internet connection. Which for someone like me, who enjoys working on the train during my commute, is a preeeeety big deal. The second way we will install it is via a full download and install. This allows us to customize it, test it, and edit it all offline/without a stable internet connection.
“Install” via CDN
I put install in quotes because this is actually an import that happens every time any one of your pages loads. All you need to do is make a change to one file:
# ./app/views/layouts/application.html.erb <! — Latest compiled and minified CSS →
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity=”sha384–1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin=”anonymous”><! — Optional theme →
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity=”sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r” crossorigin=”anonymous”><! — Latest compiled and minified JavaScript →
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity=”sha384–0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS” crossorigin=”anonymous”></script>
</head>
In between the <head> tags in this file you just need to add these 6 lines of code (no need to remove or change anything else that is currently between these tags). To see it in action wrap the <%=yield%> tag in a <div> with a class of “container” like this”:
<body>
<div class=”container”>
<%= yield %>
</div>
</body>If you refresh your homepage you should see that it is no longer pressed up against the left side of the page and now it is contained in a div that has padding centering your information a little bit. That’s it. You now have bootstrap on every page, but you will not be able to customize it and it will break once you lose an internet connection (only really applies to development and testing stages).
Download from getbootstrap.com and Install
This method is slightly more involved, but not too much. First visit the Bootstrap website and use the first download button. This is the version written in plain-ol’ CSS and is by far the easiest to import and use.
Once you have downloaded the file we need to extract 2 files and place them in our Rails project.
- Grab bootstrap.css and place it in ./app/assets/stylesheets/
2. Grab bootstrap.js and place it in ./app/assets/javascripts/
3. Add this line to application.css
*= require bootstrap4. Add this line to application.js, before //= require_tree .
//= require bootstrapNow when you visit any one of your routes/views both of these files should be used which means you should have access to some basic Bootstrap.
Heroku Setup
This may seem obvious, but first you need to create a Heroku account. Once you have an account you are going to want to setup your Heroku toolbelt. You can install this easily via Homebrew with this command in your terminal:
brew install herokuThen you are going to want to login. Again in your terminal type the following command and follow the prompts to login:
heroku loginOnce you are logged in with the toolbelt installed you are ready to deploy!
Deploying on Heroku
In order to deploy onto heroku you are going to want to have a repo which the root folder is the root folder of your Rails application. If you are working within a directory that contains many projects I would suggest copying over your files into a new folder and starting a new repo there. In fact, that is exactly what I did. The repo I have deployed on Heroku is this one, which is separate from the one that contains all the parts in this series so far.
Then on Heroku you are going to want to create a new project. I named mine swapi-blogpost. You can either choose your own name or let Heroku generate some fancy generic one for you (like infinite-hollows-12345).
Then once you have created the project you need to copy a line from the ‘deploy’ tab of the project and paste it in your terminal when you are inside the active repo you want to push live. For my app the line looks like this:
heroku git:remote -a swapi-blogpostOnce you ran that, you can push your repo to Heroku with:
git push heroku masterAnd now anytime you push to your Github master, you should also push to Heroku master to keep them the same and to allow viewers to see the most up to date version of code in action.
Basic Bootstrapping
There are a million and one blog posts and websites dedicated to applying bootstrap to your website so I won’t be diving into all of the changes I made here. In this section I will talk about how I setup my application.hmtl.erb file (which is displayed on every page) which includes my navbar and my footer and the homepage which is located in the views/home/ folder. There will be plenty of other changes made. If you are interested in the specifics of what edits I made to my views then you can dig into the Github repo. There are people out there that are way better at HTML/CSS than I currently am and you are probably better off taking Bootstrap suggestions from them. Or you can go out and purchase a bootstrap theme and wrap your website in a pre-made gorgeous template.
Navbar
First I will paste my exact code used to make my top navbar:
<nav class=”navbar navbar-inverse”>
<div class=”container-fluid”>
<a href=’/’ class=”nav-link”><div class=”navbar-brand”>SWAPI</div></a>
<ul class=”nav navbar-nav pull-right”>
<li class=”dropdown”><a href=”#” class=”dropdown-toggle” data-toggle=”dropdown” role=”button” aria-haspopup=”true” aria-expanded=”false”>Pages<span class=”caret”></span></a>
<ul class=”dropdown-menu”>
<li><a href="/">Home</a></li>
<li><a href=”/films”>Films</a></li>
<li><a href=”/characters”>Characters</a></li>
<li><a href=”/species”>Species</a></li>
<li><a href=”/planets”>Planets</a></li>
<li><a href=”/starships”>Starships</a></li>
<li><a href=”/vehicles”>Vehicles</a></li>
</ul> <! — dropdown menu -->
</li> <! — dropdown -->
</ul> <! — nav -->
</div> <! — container fluid -->
</nav> <! — nav navdef -->This now allow us to have a “Brand” name (or you could use a logo) along the left edge of the top nav bar and a dropdown to all of our index pages along the other edge.
Homepage
My goal here is to create a “Welcome” section that takes up about 75%-80% of the page with a small navigation panel alongside. This panel will display the total number of entries in the database corresponding to this class as well.
<div class=’row’>
<div class=”col-md-10">
<div class=”jumbotron”>
<center>
<h1> Welcome </h1>
<p>This is a website built to browse the information in the Star Wars API via a Rails Application</p>
<p>All information is kindly provided by <a href=’http://swapi.co’>swapi.co</a></p>
</center>
</div>
</div>
<div class=’col-md-2' style=”height: 100%”>
<div class=’list-group’ style=”height: 100%”>
<a href=’/films’ class=’list-group-item’>
<span class=”badge”><%=@films.count%></span>
Films
</a>
<a href=’/characters’ class=’list-group-item’>
<span class=”badge”><%=@characters.count%></span>
Characters
</a>
<a href=’/species’ class=’list-group-item’>
<span class=”badge”><%=@species.count%></span>
Species
</a>
<a href=’/planets’ class=’list-group-item’>
<span class=”badge”><%=@planets.count%></span>
Planets
</a>
<a href=’/starships’ class=’list-group-item’>
<span class=”badge”><%=@starships.count%></span>
Starships
</a>
<a href=’/vehicles’ class=’list-group-item’>
<span class=”badge”><%=@vehicles.count%></span>
Vehicles
</a>
</div>
</div>
</div>The result is way easier on the eyes than the lists consisting of plain black text and blue links on a white background.
Conclusion
This is just the basics, but if you can get this far then you are well on your way to become a web developer.
It’s pretty incredible how user friendly it is now-a-days to launch a fully functioning web application. You can actually get a basic interactive Rails application onto the web in under 10 minutes if you get comfortable enough with it.
I wrote this series because it mirrored my first 6–7 weeks at the Flatiron School and I couldn’t believe it only took that long to go from virtually no experience in code to building functioning web apps. I hope it inspires someone else as much as I was inspired because the world needs more great developers.
Please reach out if you have any questions, comments, or concerns by posting a comment on this or any of my Medium posts.
Now that the series is complete I will most likely go back to writing about new things I am learning about, but I am always available to help smooth out confusions over things I did not do a great job of explaining.