DEV Community: Joan Indiana Lyness

How I Deployed my React-on-Rails app to Heroku

Joan Indiana Lyness — Mon, 19 Aug 2019 19:16:55 +0000

A space odyssey ….

I just graduated from the Flatiron School, and I’m pretty happy with my final project, a Congress Who’s Who app — an educational game. For the longest time, it was stuck on my computer. People who saw it wanted to know how they could use it. Could they download it? (Why yes, if you want to follow these 20 steps to create a Git account and fork and clone two repos, bundle them and run them on the right servers ….)

What I wanted to say was YES, here’s the link! And now I have one. My app lives here: https://congress-front-end.herokuapp.com/.

If you’re having trouble deploying your React-on-Rails app to Heroku, especially if yours makes calls to an external API (application programming interface), read on, and learn from my mistakes!

Note: there are a few blog posts on how to do this, plus the Heroku documentation itself. Some parts of both worked for me, some didn’t. I’m this combination of steps, in this order, works for you!

Assumptions (pre-requisites!)

https://medium.com/media/255d34d133519651a4668449fec9e1b1/href

This blog post assumes:

You have a working Rails API back-end.
Your Rails API back-end database is Postgres.
You have a working React front-end.
Both are tracked in separate Github repositories.
You have a Heroku account. (If not, followsimple sign-up directions here)
You have installed the Heroku CLI (if not follow these steps)

PART ONE: Deploy your Rails API back-end

Step 1. Create a separate branch on Github for this effort.

My back-end was named congress-api. I created a new branch called deploy_to_heroku. After creation, github automatically moved me to my new branch.

// ♥ git co -b deploy\_to\_heroku

[**10:03:55**] (deploy\_to\_heroku) congress\_api

// ♥

Now, if everything goes wrong, you can at least revert back to your previous branch.

Step 2. If this is your 2nd, 5th or … 20th attempt … clean up your previous mess.

(skip this step if this is your first effort to deploy to Heroku)

https://medium.com/media/59b26ad2e0dd7cb3096055d9f96d810d/href

I tried and tried many times before I succeeded! During those previous efforts, I created and re-created the app on Heroku. Those previous efforts were done incorrectly and derailed my subsequent efforts. If you are in the same boat, go to your Heroku dashboard, and get rid of any previous attempts to create this particular app on Heroku. In my case, I had multiple copies of my app under different names.

AND … if along the way, you followed advice like I did to run a ‘yarn build’ of your project, you will need to delete your yarn.lock file from the root of your file tree. Heroku does not use yarn.lock.

Step 3. Add a Procfile

What’s a procfile? It tells Heroku which commands to run to start your app!

Call it “Procfile” with no extension and add it to your root directory.

I followed Heroku’s documentation to the letter and made mine look exactly like their sample code for Rails:

web: bundle exec rails server -p $PORT
worker: bundle exec rake jobs:wor

Step 4. Configure PUMA server

I followed these steps from the Heroku documentation, but I am not sure they are enabled, since I do not call Puma in my Procfile (with a line like this `web: bundle exec puma -C config/puma.rb)

I’ll update this post when I have time to experiment with removing my Puma.rb file to see what happens.

Step 6. Create a Heroku remote.

In terminal, navigate to your app’s root directory and follow these instructionsfrom Heroku documentation.

Step 7. Add Heroku Postgres to your App

Follow these steps from Heroku documentation

Then, in terminal run Heroku config. This will bring up the url for your new Heroku Postgres add-on. (it’s very long. I’m just showing the first part of mine below).

Important!

Grab that database url (“postgres:// etc”) and in your database.yml file, set DATABASE_URL = <”postgres:// etc”>

Step 6. Deploy!

From the Heroku documentation:

Then navigate to the url for your new app. (If you can’t find it, go to your Heroku dashboard, click on the name of your new app, then click on “Open App” at the right. )

Grab that url, you will need it for Part Two!

Step 7. See ….. nothing?

https://medium.com/media/2704ed6a06c6106b65eb5a0353d5b4c8/href

Unless you found and followed steps to import your Postgres database as is, you deployed your app with an empty database like I did. So, after my ‘successful’ deploy, I was expecting to see the same thing I saw on my back-end page during development: lots of JSON data. Like so:

But instead, I saw:

[]

Why? Because I deployed an app with an empty database.

If you aren’t making calls to an external database, you can fix this by running:

heroku rake db:create heroku rake db:migrate heroku rake db:seed

(Heroku does not support heroku rake:db reset.) See documentation.

BUT, if your app makes calls to an external API, this won’t work! Why not? Read on …

Step 8. If your app makes calls to an external API you must ….

…use Heroku to configure envrionment variables.

OK, so this is the step that just about killed me. After doing lots of Googling and reading lots of documentation and Stack Overflow posts, I managed to get to the point where all I had to do was seed my database. But when I ran Heroku rake db:seed, I got a fail.

So the big hint was, check out /app/db/seeds.rb:9

What was there? The results of my API call, which by the way, worked perfectly in development.

worked in development, why not in Heroku?

I tried sticking a pry into my production code, and could not hit it. Then, much Googling later, I discovered that Heroku does NOT recognize ENV variables, at least not in API calls. If you want to use your API key in an app you are deploying to Heroku, you must configure those variables in the Heroku CLI.

These, my friends, are the magic steps.

For me, they looked like this:

etc.

After I got that straight, I ran heroku rake db:seed

and was THRILLED to see my database actually loading.

If you’re following along, take a break, do a little dance, and take heart! You have just finished the hardest part. Part Two is way way easier, I promise.

https://medium.com/media/d594902b7f42e974ad45508f599e87c5/href

PART TWO: Deploy your React Front End

(way easier than part one!)

I followed these directions from Shakhor Smith (thx Shakhor!). The following is a distillation of his directions plus a few of my own observations and screenshots.

These instructions assume that you created your React front-end with create-react-app. Before you continue, go into terminal and navigate to the root directory of your React front end.

Step 1. Set up your front end to call the new url for your back end.

During development, I ran my rails back end on http://localhost/3000. So all my fetches to my back end used http://localhost/3000 as a base URL. But with my back end actually up and running on Rails, I had to update those urls — um, all 10 of them.

When I set up those fetch calls, I typed the urls out like so:

fetch(http://localhost/3000/search/senators)

That’s fine for one or maybe two fetches, but I had more than 10. So to prepare for my Heroku deploy, I did what I should have done in the first place. I abstracted the base url into its own constant:

`
const API_BASE_URL="http://localhost/3000"

...

fetch(API_BASE_URL+’/search/senators’)
`

I did that for 16 fetches in two files. (command D comes in handy! — select the first instance of a string, hit command D repeatedly to select subsequent instances, then type the replacement string, and voila!)

Step 2. Figure out which versions of node and npm you are running.

Run npm -v

and node-v

I’m running npm version 6.9.0 and node version 12.4.0

Step 3. Add an engines object to package.json

following Shakhor’s lead, I put mine right above dependencies (I don’t know if order matters, let me know if you know it does!)

Step 4. Create a remote Heroku repository the easy way.

Open up your Heroku dashboard in your browser. Click ‘New’ and select “Create new App”

You’ll see a dashboard for the app you just created. Go to the deploy tab and follow directions to connect your app to Github, enable automatic deploys, and choose the branch you are deploying (in my case it was deploy_to_github). Don’t forget to click the deploy branch when you are done!

If you get fail message the deploy tab, plus a log of what went wrong. The messages are very clear, and include clear instructions on how to fix what went wrong.

My deploy failed because of conflicting yarn.lock and package.json file; the error message clearly told me to delete yarn.lock. Then you have to save that change and re-run git push heroku master to push that change to Heroku.

After fixing two such errors, success! I finally got my React and Rails App running on Heroku!!!

Here’s hoping this reduces your deployment time to less than one hour!!!

Ruby code challenge: airplane movies

Joan Indiana Lyness — Mon, 05 Aug 2019 04:22:32 +0000

My introduction to data’s Big O

Let’s say you’re taking a long-ish flight. You’ve got a list of in-flight movies and how long they are. You decide you want to watch exactly two movies, and you want to know if any two on the list have a total run time that is exactly equal to your flight time. (We’re assuming of course, that the flight duration is set in stone haha).

Easy enough if you’re looking at a list of five, or maybe even 10 movies. But what if you don’t know how many movies are in your list. You might have access a huge database of movies. Your list could include 10,000 movies!

The challenge: Write a Ruby method that returns true if any two movies add up to flight time, and false if not.

BUT — there are two extra conditions.

First, you don’t want to watch the same movie twice. So if your flight time is 100 minutes, and your list of movies has only one movie that is 50 minutes long, you want your method to return false. But if you have two movies in your list, and both are 50 minutes long, you want your method to return true.

Second — and this is the hard part, you need to pay attention to run time. As in you want your method’s Big O notation to O(n) or better. …

What’s the Big O ?

Big O notation is a way to calculate how the size of your data impacts how fast your code runs, or how much RAM it uses. Bottom line: it is way faster to find things in hashes than arrays, since you can call them by key instead of looping through each element in order; and nested loops are evil!

The Rubyist’s Guide to Big O Notation is easy to read and includes this helpful chart of smiley faces:

So why are nested loops evil? Let’s say you have code like this:

the evil nested loop

If your school has 10 students and your city has 10 residents, you have to make 10 x 10 comparisons to run this code, or 10². That’s not bad, but what if your school and your town each have 1,000 residents? now you're up to 1,000² comparisons.

If you think, like I did … well, we can cut down on the length of the operation by filtering out certain values first, so at least we’re comparing smaller arrays … that doesn’t work either. Big O notation is conceptual and assumes the worst-case scenario. Any array of any size has n elements; if you do two nested loops through arrays, you are always doing n² operations. It doesn’t matter if n is actually just 1. What matters is how the value of n² changes with the size of the dataset.

So how do we get out of this mess?

Hashes to the rescue!

Hashes are way faster to search because you call values by key, instead of iterating through a whole array to find a value (What is happening under the hood? Do posts really magically return values without looking at more than one key? Here’s a post that gets into the details).

I was curious to see how this worked out for my particular challenge.

My first effort involved the dreaded, nested loop:

I was curious about the run time with different datasets. I found this great explanation of how to use Benchmark.

Inside my code editor, I added a few lines, including one to randomly generate an array of 10,000 movies, and an impossible flight time (so the method would be forced to look at every single movies element before finishing).

inside file: test.rb

Then I typed ‘ruby test.rb’ to run the code and got this run time: about 4.3 seconds, or 4327.5660001673 milliseconds.

With Hashes

Next, I tried a solution with hashes:

2 * O(n), one for each (not-nested) loop

Run time: 3.5880000796169 milliseconds — that is 1,200 x faster!!!

No hash, no nested loops

Next, a solution with no hash, one loop and one operation to pull out common elements from two loops:

Interestingly — this method was actually faster than the one with the hash:.78899995423853 milliseconds.

Finally I tried a super elegant solution from a classmate. This one takes advantage of Ruby’s built-in combination method.

It is short, sweet and wins at code golf. But it is apparently not very efficient under the hood. My computer stalled when I ran this method with an array of 100,000 elements. Here is the time with 10,000 elements: run time: 11.73972999989428 seconds. That’s 3,200 times longer than the hash method … and 15,000 times longer than the comparison method. Yikes!

Here is the chart: (blank spaces mean the method took so long to run that I had to abort after several minutes of inactivty).

The winners for handling data in large arrays (10,000+ elements):

First place: Ruby’s && method for comparing arrays.
Second place: hash
Third place: nested loop
Fourth place: Ruby’s built-in combination method.

Moral of the story: if you want your code to run fast, avoid nested loops!

Rails API Project Part 3: Adding a front end with React & Redux

Joan Indiana Lyness — Mon, 22 Jul 2019 19:18:40 +0000

and how to call the custom sorting methods we created on the back end.

In the previous post we covered how to finish setting up our Who’s Who Congress Rails API. Now we need a front end where we display all that awesome data in fun ways.

I built my front end with React and Redux.

What is React?

React logo

It’s a Javascript library that was created by Facebook. We use it to create modular user interfaces, where each thing we present on the page is a component. Each component has its own code, which makes it easy for teams to work on the code. Then based on what view you want to render, you can choose which components to display.

In my app, I have a SenateContainer component that has a child component called SenatorsList. SenatorsList in turn, has its own child component called SenatorCard. By the time I’m done with my project, SenatorCard will have its own components, like SocialMedia Links, etc.

Then, when I build my senate page, I simply load these building blocks into one file. Take a look at the picture at the top of this post. It includes many components: a Home Page component that includes a NavBar component (the four large buttons across the top of the screen); and the SenatorsList component which includes the sorting buttons, search bar and senators card.

Components can have state and methods, which they can pass down to their child components. React has methods for passing these things (props, short for properties) down to child components, but it can get cumbersome when your components have components that have components.

Enter: Redux

Redux is a tool for managing state. A list component’s state, for example, is which items are currently on the list. With Redux, workflow goes like this:

You have an object with an initial state. Let’s say you have a to-do list with no items in it. So List’s initial state is an empty array: [].

Your user clicks a button to add a to-do item.

When they submit the new item, the List component calls an action from a list of actions that live in a separate file.

A reducer sets a new state for the component based on the action. So if the action was add a to-do item, the reducer uses a spread operator to makes a copy of the current state (cardinal rule: never ever amend state, just make a copy and amend the copy) and add the newToDo.

function ListReducer(state = [], action) {
 switch(action.type) {
 case 'ADD\_TODO':
 // adds todo`
 return { ...state, newTodo }

Now, List’s state has been updated in the store. If this confuses you, you are not alone! Here is an excellent super-short primer called “Explain Redux Like I’m Five.”

So about that API call …

To set up our app to update with data from our API, we need to set an initial state for the component will hold our data. Let’s focus on our SenatorsList component, which I set up with an initial state of an empty array of senators.

And my view looks like this:

notice: no senators listed

When my user clicks the red ‘Senate’ button I want the page to load all 100 senators (which I formatted as flashcards, using React ui semantic).

I set up an event listener on the button so that when it is clicked, it will call an action from my Actions/senate file:

The action, fetchSenate() uses, the fetch method to call the API we set up earlier; put sthe response in JSON, and then tell the Reducer, hey Mr. Reducer, pls go ahead and dispatch the action with the type “SET_SENATE”, and feed it the data I just stored in the variable ‘senate’.

The reducer then updates the app’s state.senate with an array of 100 senators! This updated state lives in our store.

Back at the ranch …

Meanwhile, SenatorsList has no idea what’s going on. It sent off a request for senators, and 100 senators came back, but they came back to the store. To give SenatorsList access to its own state, we have to connect it to the store. We use Redux’s built-in ‘connect’ tool to do this:

At the bottom of our SenatorsList component:

Without Redux, we would normally have one line here: export default SenatorsList. But we’ve added more information here — before we export SenatorsList, we’re connecting it to the store, where we want it to grab its own state and its actions (the ones living in the actions/senate.js file).

The export line starts out like this:

export default SenatorsList connect()(SenatorsList)

Connect takes two arguments. The first is mapStateToProps, which lets the component (once it’s connected to the store), call its state as a prop (shot for property). Here’s what mapStateToProps looks like:

const mapStateToProps = state =\> ({senate: state.senate})

The above code says — go to the store, grab my state (state.senate) and from now on, let me access my state as this.props.senate.

But SenatorsList wants more than just its state. It also wants access to the actions in the store that change its state. Back to our connection:

The second argument connect takes is mapDispatchToProps. You can either write out the full method or add a list of the actions as a comma-separated list surrounded by curly braces. This says: while you’re at the store, grab these actions, and map those to props too, so I can call this.props.fetchSenate, etc.

Think of the connect, mapStateTo Props and mapDispatch to props as a way for your humble component to go to the store to get superpowers!

Now that SenatorsList knows its own state, it uses each senator’s information to render a SenatorCard, and then displays them in a grid.

Let’s pass our superpowers down to some other buttons.

My senate view includes five sorting buttons. Each one is tied to a custom sorting method that we defined in our Rails API, and to a search term that we can feed to our API to get back the list of sorted senators.

These buttons look a lot like the Senate button but they work a bit differently.

The Senate button doesn’t directly fire the fetch action. Instead, it routes the viewer to the Senate route, which mounts the SenateContainer component, which mounts the SenatorsList component, … which automatically fires the fetch action when it loads. In other words, when you click Senate, I want you to automatically see all 100 senators.

Now that you’re looking at all 100 senators, you have the choice of clicking one of the sorting buttons to re-sort the senators. Instead of mounting other components, I want these buttons to reshuffle the cards that are already on the page. So I want each button to call its corresponding action directly.

To do that, I have to give each button the power to call that action. We could make each button its own component and have it go to the store to fetch its action, but there’s an easier way. We can pass superpowers down from SenatorsList to its children, each of the buttons! Here’s what they look like:

inside the return method in SenatorsList

Since these Buttons are being rendered inside of the SenatorsList component, they are children of SenatorsList, and SenatorsList can give each one the power it needs to perform its mission. Let’s see, the ‘Loyalists’ button will need to access this.props.fetchLoyalist, ‘Mavericks’ will need this.props.fetchMavericks, etc.

Now, when each button is clicked, it will fire the action (stored in actions/senate.js), which in turn will tell the reducer which of its actions to fire …. then the reducer updates the store. Since SenatorsList can now access its state as props, it automatically updates to show its new state: a list of 100 senators sorted by (whichever button we clicked!)

Here’s what the Loyalists sort looks like:

If you’ve read this far, I hope this helped you understand React and Redux.

Here is a link to the repos for this project: Front end & theback-end Rails API.