DEV Community: Rhys Malyon

Making pageContext available to child components in Gatsby with react-intl

Rhys Malyon — Tue, 16 Nov 2021 04:47:27 +0000

Background
The Problem
The Solution

1. Background

Check out my portfolio, GitHub, or add me on LinkedIn to get in touch. I'm always looking for new connections or feedback!

I'm currently based out of Japan which means that, when it comes to web development projects, I sometimes have to deal with bilingual websites. When building a static website with HTML, CSS, and JavaScript, it's as easy as creating a new HTML file for each page, copy pasting a basic structure, and pasting in the Japanese copy.

But what happens when you want your website to be more dynamic? What if you want to take advantage of the performance benefits that some frameworks offer? This is a challenge I faced recently when migrating a static website I'd made as a freelance project to Gatsby.

Sure, an argument could be made that going the framework route for static websites might be overkill, but there are a lot of benefits that platforms such as Gatsby have to offer.

If you're into social impact and making a difference, head over to the static website to learn more about Socious. Also Feel free to check out the (work-in-progress) Gatsby website or have a look at the GitHub repo to see how everything fits together.

2. The Problem

If you, like me, are looking for a way to create dynamic, multilingual websites using Gatsby then I'd fully recommend react-intl. Installation is easy, the example code is clear and their explanations are great. There was one problem I faced as a beginner:

The problem is that part of the functionality react-intl, particularly the SimpleLocalize component, relies on the page's context to derive the current language. This helps determine which text to use and which links to follow but if your page is broken down into separate components like mine then you're likely going to run into this error.

3. The Solution

It might seem fairly obvious but as a relative beginner to Gatsby and React it took me longer than I'd care to admit. After an embarrassing amount of Googling and digging through Stack Overflow I had a moment of clarity: what if the my page's child components didn't know the page context?

I'd just assumed that, because they were being rendered on the page, that they would automatically have access to the information that SimpleLocalize needed, which wasn't the case.

Sure enough, in the end it was as easy as passing down the props of the main page component to the child components and everything came together. I elected to pass all of the page's props using the spread operator ({...props}) but if you're committed to fine-tuning for performance feel free to destructure what you need.

In the end, this is the body of my parent (homepage) component:

const IndexPage = (props) => {
  return (
    <Layout>
      ...
      <AppLinks {...props} />
      ...
    </Layout>
  )
}

And here's how I implemented it in the child component:

const AppLinks = (props) => {
  return (
    <SimpleLocalize {...props}>
      ...
      <FormattedMessage
        id="app-links-header"
      />
      ...
      <FormattedMessage
        id="app-links-subheader"
      />
      ...
    </SimpleLocalize>
  )
}

Sidenote

For each level of nested components you'll need to pass the props along. For example, I had three layers:

- index.js
-- Intro.js
--- EarlyAccessForm.js

Follow the same process at each step and you'll have a working chain of components.

In Intro.js:

<EarlyAccessForm {...props.pageContext} />

And in EarlyAccessForm.js:

...
render() {
  return (
    <SimpleLocalize {...this.props}>
...

I used {...this.props} since EarlyAccessForm is a class-based component but to use it in a functional component just change {...this.props) to {...props}.

And voila, dynamic copy rendered based on the page's current language setting!

And there you have it. If you've worked with react-intl before and have any suggestions, feel free to drop them down in the comments!

Creating a Google Map component in Rails-React

Rhys Malyon — Fri, 12 Nov 2021 14:38:20 +0000

React Google Maps API
Creating a Map component
Building our controller logic
Making markers for our places
Adding infowindows to markers
Next steps
Get in touch

1. React Google Maps API

Let's jump straight into building out our map. To start with we'll need to install React Google Maps API, a React package that gives us a handy wrapper around the Google Maps API that gives us a range of pre-built components that we can customise to our needs.

I'll be using npm for my installation but feel free to use yarn if that's what you're more comfortable with. We'll be following the instructions from the package documentation so head to your terminal and enter:

npm install --save @react-google-maps/api

# or

yarn add @react-google-maps/api

2. Creating a Map component

Once the install is complete we're going to create our Map component. In your terminal type:

rails g react:component Map

This will work exactly the same as the HelloWorld component we created previously, creating a new file for us in the rails-react-google-maps/app/javascript/components/ folder. We'll be using the functional component provided in the docs so in your new Map.js component file, delete all the contents and copy in the following setup:

import React from 'react'
import { GoogleMap } from '@react-google-maps/api';

const containerStyle = {
  width: '100vw',
  height: '50vh'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

const Map = () => {
  return (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={center}
      zoom={10}
    >
      { /* Child components, such as markers, info windows, etc. */ }
      <></>
    </GoogleMap>
  )
}

export default React.memo(Map)

You can technically give the component any name you want but for simplicity's sake we'll stick with Map.

Next let's get our map onto our page! Go back to your index.html.erb file and replace the existing HelloWorld components with the following line (P.S. you can also delete the HelloWorld.js file in your components folder at this point):

<%= react_component("Map") %>

Restart your rails server (Ctrl+C -> rails s) and refresh your localhost:3000 page in your browser. Wait, where's our map?! You should probably see something like this:

Don't worry, this is a good sign since it means our map component is working! Let's check our browser's developer tools console to see what's happening:

We're still missing something: our API keys. We need the keys we generated earlier and put in our .env file in order to gain access to Google Maps.

Back in our application.html.erb view file, paste this line of code inside the body tag. Everything should look like this:

<body>
  <%= yield %>
  <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?libraries=places&key=#{ENV['GMAPS_BROWSER_KEY']}" %>
</body>

This script will load Google Maps using our browser API key. We're not quite there yet, we still have one more unused key to place somewhere! This time we'll be revisiting our geocoder gem. Go back to rails-react-google-maps/config/initializers/geocoder.rb and uncomment the following lines:

lookup: :nominatim,         # name of geocoding service (symbol)
use_https: false,           # use HTTPS for lookup requests? (if supported)
api_key: nil,               # API key for geocoding service

Next, change the value of each of these to:

lookup: :google,
use_https: true,
api_key: ENV['GMAPS_SERVER_KEY'],

Refresh your localhost:3000 page and you should have a map showing up. It's centered on Brazil for now due to the default coordinates in Map.js but we'll fix that next in the places_controller.rb file.

3. Building our controller logic

Our controller is like the brains of the operation, it's connecting our view (and the React components within) with the model and each instance of place. In Rails, the index action is where we access all of the instances of a class. In this case our class is Place and our instances are the 5 locations we seeded earlier (e.g. The White House).

3.1. Showing our places

The first thing we need to do is make sure our index page can read our places. Go back to places_controller.rb and add this line of code in the index action:

def index
  @places = Place.where.not(latitude: nil, longitude: nil)
end

In our view when we want to access our places data we can call @places and it should return every instance. Using .where.not(latitude: nil, longitude: nil) reads almost as we would say it in layman's terms - we only want places where the coordinates are not nil, or empty. If they're empty they'll be excluded from the results since we need coordinates for our map markers.

For some visual feedback, let's quickly add a few simple erb and HTML elements to our index.html.erb page. Underneath the map component, add the following:

<% @places.each do |place| %>
  <h2><%= place.name %></h2>
  <p><%= place.address %></p>
<% end %>

Here we use an each loop to iterate over our places and create an H2 and paragraph with the name and address respectively. It should look something like this:

3.2. Sorting our controller logic

We can access whatever information we pass in the index action of our controller. At the moment our default center is sitting over Fortaleza, Brazil but we want to make this dynamic. Thankfully props in React play well with Rails to allow us to pass conditional data which means, depending on how many places we have or where they are, we can change where our map drops us.

In our index.html.erb file where we call our Map component let's add a few properties:

<%= react_component("Map", {
  center: @map_center,
  zoom: @map_zoom,
  markers: [@markers]
}) %>

Of course these properties don't actually exist yet so let's add them to our controller. Let's start with markers. In the React component above we pass them as an array - this is so that we can iterate over them to create individual markers.

Markers

In our controller's index action we'll do some more geocoding:

    @markers = @places.geocoded.map do |place|
      {
        id: place.id,
        lat: place.latitude,
        lng: place.longitude,
        name: place.name,
        address: place.address
      }
    end

The important information we need from here are the coordinates (lat, lng) and the id (for unique keys in React). I've added the name and address for future Google Maps InfoWindow components but we can ignore these for now.

Center and zoom

@map_center and @map_zoom are a little bit more complicated as we'll want these to change based on certain criteria. For example if there are no markers to display, we need a default place to land on. If we have only one place we want our map to center on that spot, and if we have more than one maybe we want a general area encompassing all our places. That's a lot of ifs that we can turn into a conditional:

if @places.count.zero?
  @map_center = [38.9072, 77.0369] # Washington D.C.
  @map_zoom = 0
elsif @places.count == 1
  @map_center = [@places[0].latitude, @places[0].longitude]
  @map_zoom = 14
else
  avg_lat = 0
  avg_lon = 0

  @places.map do |place|
    avg_lat += place.latitude
    avg_lon += place.longitude
  end

  @map_center = [(avg_lat / @places.count), (avg_lon / @places.count)]
  @map_zoom = 12
end

That's a lot to take in so let's break it down into bite-sized pieces:

if @places.count.zero?
  @map_center = [38.9072, 77.0369] # Washington D.C.
  @map_zoom = 0

Here we're saying that if there are no places to add to the map, set our default center to the middle of Washington D.C. I did this because our markers are all based there but you can change these defaults to wherever you like. For zoom, the higher the number, the closer the zoom.

elsif @places.count == 1
  @map_center = [@places[0].latitude, @places[0].longitude]
  @map_zoom = 14

The same idea as above except this time we're checking if there's only one place. If so, we want our map to be centered on that place's coordinates ([@places[0].latitude, @places[0].longitude]) and zoomed in on a closer area.

else
  avg_lat = 0
  avg_lon = 0

  @places.map do |place|
    avg_lat += place.latitude
    avg_lon += place.longitude
  end

  @map_center = [(avg_lat / @places.count), (avg_lon / @places.count)]
  @map_zoom = 12
end

If we have more than one place then we want to show all the markers on the screen. To do this we define two variables (avg_lat and avg_lon) and use these to total up the coordinates of each place. We then divide each one by the number of places we have to give us a middle point.

This solution works for a city-sized area but if you're planning to have places across multiple cities or even countries then using fitbounds() might yield better results. This will require a bit more digging into React as you'll need to tap into the power of hooks (especially useEffect()).

3.3. Adding props to our Map component

Next, go to Map.js in our app/javascript/components folder. Here we need to add the ability for our component to access props. In the function declaration add the following:

const Map = (props) => {
...

By passing props in the declaration we now have access to whatever data we feed the component when it's rendered. In our index.html.erb we provided center, zoom, and markers, so in our component we can access these by simply adding props. before the name. In the body of our Map function, let's make a few changes.

First Let's see what data we're actually working with. Inside the body of our Map component, let's do a quick log to console:

const Map = (props) => {
  console.log(props)
  ...
}

Which will return this in our browser console:

Think of the parent Object as the props in our props.{data} call. If we call props.center we'll get an array with two elements - our latitude and longitude. They aren't labeled as such but this is what we passed earlier in our controller as @map_center.

We can only access props within the body of the function so let's move our center variable inside and give it some props:

const Map = (props) => {
  const center = {
    lat: props.center[0],
    lng: props.center[1]
  };

  return (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={center}
      zoom={10}
    >
      { /* Child components, such as markers, info windows, etc. */ }
      <></>
    </GoogleMap>
  )
}

Refresh your page and you should see Washington D.C. (or your place of choice):

We now have a dynamic center point based on the conditions we set out in our index action! Next, let's set some props for our zoom property:

<GoogleMap
      mapContainerStyle={containerStyle}
      center={center}
      zoom={props.zoom}
    >

Now our map should be more focused on a general area:

4. Making markers for our places

Our map is still missing a key part - markers. We have a general idea of where we are thanks to our new default center and zoom, but we have no idea where to look. Here we're going to make use of the Marker and InfoWindow components provided to us by react-google-maps. Let's start by importing them at the top of our Map component. Where we import GoogleMap, replace that line with the following:

import {
  GoogleMap,
  Marker,
  InfoWindow,
} from '@react-google-maps/api';

Next, inside of our GoogleMap component within the function let's add our markers. If we revisit the data we logged in the console earlier, you'll see that markers were provided as an array:

This data comes from @markers in our controller. A powerful way of creating multiple components easily is to use JavaScript's .map method. Inside the GoogleMap component:

<GoogleMap
  mapContainerStyle={containerStyle}
  center={center}
  zoom={props.zoom}
>
  {props.markers[0].map(marker => 
    <Marker
      key={marker.id}
      animation={2}
      position={{
        lat: marker.lat,
        lng: marker.lng,
      }}
    />
  )}
</GoogleMap>

Because markers is an array of arrays, we need to select the element at the first index to map over. From there, we create a new Marker component for each marker element.

When creating multiple components from an array we need to provide React with unique keys to differentiate them. In this case we have a built-in id that will always be unique thanks to the way our PostgreSQL database works. We then provide the position as a JavaScript object in the same way that we created the center variable earlier, only this time it's done in-line.

We should finally have some working markers on our map. Let's check it out. Refresh your page and you should see this:

Awesome! We now have dynamic markers that will update each time you add or remove a place from your database, along with your maps zoom and center point. All that's left to do is add an InfoWindow component to our markers to display some information when we click on them.

5. Adding infowindows to markers

At the moment clicking on our markers yields no results which is terrible for user experience. Instead maybe we'd like to show the name of the place, the address, or any other information we make available.

We have to do a bit of extra work before we can implement these. First, we're going to make use of the useState hook due to the fact that we've defined Map as a functional component. First, let's import useState at the top of our component:

import React, { useState } from 'react'

The reason we have to use this hook is because we need to be able to determine which marker we've clicked on in order to display the correct infowindow. To do this we'll create a state called selected. Inside our Map function, add the following at the top:

const Map = (props) => {
  const [selected, setSelected] = useState(null)
  ...
}

We'll use this state together with an onClick function to tell React which marker we've clicked on. To do this, we need to add another property to the Marker components rendered from our .map:

{props.markers[0].map(marker => 
  <Marker
    key={marker.id}
    animation={2}
    position={{
      lat: marker.lat,
      lng: marker.lng,
    }}
    onClick={() => {
      setSelected(marker)
    }}
  />
)}

Nothing's happening yet because we're not telling React what to do when the state changes. To do so, add this underneath your markers, before the closing tag of the GoogleMap component:

{selected ? 
  (<InfoWindow 
      position={{ lat: selected.lat, lng: selected.lng }}
      onCloseClick={() => {
        setSelected(null)
      }}
    >
    <div style={{ maxWidth: 120 }}>
      <p>{ selected.name }</p>
      <small>{ selected.address }</small>
    </div>
  </InfoWindow>) : null
}

Here we're using a ternary operator to do a bit of conditional rendering for us. If the marker is selected (by clicking on it), it'll render an InfoWindow component that shows us the name and address of the chosen place. When we click the close button, it sets the selected state back to null in this line:

onCloseClick={() => {
  setSelected(null)
}}

If the marker doesn't match the selected one, nothing is rendered. If you refresh your page, when you click on any marker you should see a small window appear:

6. Next steps

And there you have it, we now have a working map rendering markers and infowindows for each place we create. Where you go from here is entirely up to your imagination - this could be used to display branches of a company, cafes in a city, or tap into a location-based API to display events in an area.

If you plan to host your project online, make sure that you import your environment variables into whichever platform you choose as these will replace the data in the .env file.

Almost every aspect of the map can be customised, from the color of the map to the marker icons and infowindow contents like these from my final project at Le Wagon:

Feel free to clone the project and make it your own and adapt it. Share your thoughts and ideas in the comments!

Thank you for following along!

7. Get in touch

If you want to see more of my work, feel free to reach out through any of these platforms:

Setting up Google Maps API

Rhys Malyon — Fri, 12 Nov 2021 14:38:11 +0000

Google Maps API keys
Creating API keys
Choosing our APIs
API keys and .env

1. Google Maps API keys

Disclaimer

In order to create a Google Developer account, you'll need to have a credit card on hand. Don't worry, Google are kind enough to provide $200 of free credit each month, which is more than enough for what we're doing here. Just be aware though that with each load of the map and call to various APIs those credits will be charged meaning the bigger your app gets, the higher the likelihood that you'll have to pay for usage.

Before we jump into creating our map component, there's a few things we need to do. Google Maps is a feature-rich API with a whole lot of options for developers to tap into but you need a unique key to be able to make calls to their API. It's a fairly straightforward process which I'll walk you through.

2. Creating API keys

First, make sure you're logged in to a valid Google account - you'll need it to get access to the tools we'll need. Next, head to the Google Cloud Platform dashboard.

API keys are unique which means that for each new application or project you create, you also have to make a new project from this platform. In the navigation bar you can create a new project or choose an existing one:

Once your project has been created go to the credentials tab on the left navigation and click CREATE CREDENTIALS at the top of the page:

Do this process twice. For the first key, don't worry about restricting it, just click CLOSE. For the second key we'll need to add some restrictions as we'll be using this later in a way that will display it in the browser.

On the next page, choose HTTP referrers (web sites) as the application restriction and add click ADD AN ITEM. This input allows us to choose which websites have access to the key - in this case we need to set localhost:3000/* to give access to our local development environment. If you plan to push this project to a live repository, add the link to the hosted site in here as well.

Leave API restrictions at the bottom for now, we'll only add a select group of Google APIs next.

The final step of our API key setup is to give them unique names as they'll each be used for different purposes (server and browser). The restricted key will be used for the browser so you could name them as follows:

3. Choosing our APIs

Google Maps has a lot of APIs on offer that can give us all of the functionality that the product itself has to offer built into our own projects. You can add as many as you like but for our core functionality we'll only be using two:

Maps JavaScript API

Add a map to your website, providing imagery and local data from the same source as Google Maps. Style the map to suit your needs. Visualize your own data on the map, bring the world to life with Street View, and use services like geocoding and directions.

Geocoding API

Convert addresses into geographic coordinates (geocoding), which you can use to place markers or position the map. This API also allows you to convert geographic coordinates into an address (reverse geocoding).

In the side navigation click on Library. This will take you to a new page where you can search for the APIs:

In the search box, enter Maps JavaScript API and open the top result. On the API page, click ENABLE. You'll be redirected to an API dashboard that shows which APIs you have enabled. Go back to the library page and repeat the same process for Geocoding API.

Now we're all set to put our keys into our project!

4. API keys and .env

API keys are considered sensitive data. Remember when I mentioned that Google charges for each call of their APIs? Well imagine if someone got hold of your key and used it for their own purposes - you might wake up to an unpleasant surprise bill from Google at the end of the month.

To prevent your keys, or any other sensitive data in your project, from being accessible where it shouldn't you'll need what we call environment variables. These are a way for you to reference this data from anywhere in your project without exposing it at each point. It's both safe and convenient!

Before we go ahead and create our .env file, we'll need to do a bit of setting up to make it readable in our development environment. We'll be using the dotenv gem. We only want to use this locally so let's go back to our Gemfile, find the development and test group, and add the gem there. Replace it with the following:

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'dotenv-rails'
end

Next, close your server if it's running (Ctrl+C) and run the Rails gem install command:

bundle install

You should have a long list of installed gems - no need to read through them so long as there aren't any errors! Now our local environment is set up and ready to read environment variables.

Sidenote on environment variables

In Rails there are gems such as dotenv available, as well as other technical ways of managing environment variables as showcased in this video. For the sake of simplicity we'll create our own for now but, if you're working on bigger projects or particularly sensitive data then it's worth exploring other options to find the right one for your use case.

Creating our .env file

This part is fairly simple. In the root directory of your project (/rails-react-google-maps) create a new file called .env (it mustn't have a file extension on the end).

Before we place anything in it we need to make sure it won't be shared if we push to any online repository (e.g. GitHub). In your root folder should be a file named .gitignore - open it up and add the following at the bottom:

.env

If you did this correctly the name of the file should now be greyed out in your code editor's file explorer.

Saving our keys as environment variables

All that's left to do is add our Google Maps API keys to the .env file to make them accessible throughout our app. Naming conventions for environment variables are as follows:

NAME_OF_VARIABLE=value

So if we add our keys with descriptive names it'd look something like this (replace [your_key_here] with your own API keys):

GMAPS_API_SERVER_KEY=[your_key_here]
GMAPS_API_BROWSER_KEY=[your_key_here]

Then when you want to access these values in your app you call them using:

ENV['GMAPS_API_BROWSER_KEY']

Just like that we have secure environment variables which, along with the key restrictions on your browser key, should keep your sensitive API keys safe from prying eyes!

With that out of the way we're ready for the last step - building our map component! We'll be exploring our controller again and revisiting React components and props in the next step.

Installing React in Rails and creating your first component

Rhys Malyon — Fri, 12 Nov 2021 14:38:02 +0000

Installing React
Rendering our first component
Exploring our React component

1. Installing React

With our app up and running it's time to get to the nitty gritty of implementing React into our project. If you're not too familiar with React, it's a JavaScript framework maintained by Facebook that's taken the world of front end development by storm in the last few years.

If you want to learn more about React check out their official site or work through their tutorial. I'm going to continue under the assumption that you have at least a basic understanding of how React works but I will explore some key ideas that we'll be using along the way.

React-Rails

We'll be using the React-Rails gem to integrate React functionality into our app. The process for adding the gem is the same as we did for geocoder - open your Gemfile in your project's root folder and add the following line underneath the geocoder gem:

gem 'geocoder'
gem 'react-rails'

Next, we need to run the installer. You'll need to run a few commands to get everything running - these are taken straight from the documentation installation:

bundle install
rails webpacker:install
rails webpacker:install:react
rails generate react:install

These commands will create a bunch of files but the most important are:

app/javascript/components/ directory for your React components
ReactRailsUJS setup in app/javascript/packs/application.js
app/javascript/packs/server_rendering.js for server-side rendering

The installation instructions ask us to add <%= javascript_pack_tag 'application' %> to the head of our application.html.erb file but this isn't necessary as this is already included as part of the turbolinks import in the same place.

2. Rendering our first component

A hallmark of React is its focus on creating modular interfaces with reusable components. Build a component once and you can render it as many times as you want. We'll be using a few small components to build a basic UI for our app but first we need to make sure we can actually render a component in our view.

First let's follow the React-Rails tutorial to build a simple hello world greeting. It's a quick and easy way to check that everything is working before we start building our map component.

To create a React component in Rails we can use the generate command again. Instead of typing out generate each time, we can shorten it to g:

rails g react:component HelloWorld greeting:string

You should see that a file was created:

Running via Spring preloader in process 440408
      create  app/javascript/components/HelloWorld.js

This means we have our first component! Now we need to connect it to our view to check that everything is working. For this we need to go to our /rails-react-google-maps/app/views/places/index.html.erb file again and replace everything in there with the following:

<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>

If your rails server is still running, close it (Ctrl+C) and re-open it (rails s). Go back to localhost:3000 and you should have a simple sentence on your page.

Our first React component is rendering in our view!

3. Exploring our React component

Let's have a quick look at what we created with the component generator. Navigate to /rails-react-google-maps/app/javascript/components/HelloWorld.js in your code editor:

import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
  render () {
    return (
      <React.Fragment>
        Greeting: {this.props.greeting}
      </React.Fragment>
    );
  }
}

HelloWorld.propTypes = {
  greeting: PropTypes.string
};
export default HelloWorld

I won't go into the details of how a React component is built or the difference between class-based and functional components (this video does a great job of explaining), but what I want to draw your attention to is the props.

React gives us the ability to pass properties, or props, from a parent component to its children. In our app, the application.html.erb represents the parent which is rendering our HelloWorld component. When we render the component like so:

<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>

We're passing it a greeting string. If we dig into our component, you'll see this line:

Greeting: {this.props.greeting}

On our index page we're shown Greeting: Hello from react-rails. because we're telling the HelloWorld component that we want that greeting property (this.props.greeting) to be equal to Hello from react-rails.. This gives us a lot of flexibility and customization when building and rendering components and this will play a key role in displaying data on our future map component.

Give it a try, in your application.html.erb add another HelloWorld component and pass your own string! If you want to learn more about how props work, check out the Components and Props documentation from the React team.

Now that we're connected to React and we know how to make components, it's time to move on to the main feature of our app - the map!

Building a Rails app backbone

Rhys Malyon — Fri, 12 Nov 2021 14:37:49 +0000

Introduction
Background
Prerequisites
Setting up your app
Building our database
Creating our Place model
Geocoder gem
Seeding our database
Generating our views and controllers
Routing

1. Introduction

Maps are a useful weapon for any developer to have in their arsenal and, with the combined dev-friendly approach to Rails and massive community built around React, now is the perfect time to use these two technologies together to add another layer to your project.

2. Background

This tutorial was largely inspired by my time at Le Wagon in Tokyo. Over the course of 9 weeks we dived into a lot of core concepts of full-stack web development using Ruby and the Rails framework. I'd fully recommend it if you're interested in fast-tracking your development learning progress or looking to get into the world of Ruby development.

We touched on JavaScript during the course and used it pretty extensively in our final project, Safe Spaces, but with the main focus being on Rails we didn't have any time to explore some of the popular JS frameworks.

After the end of Le Wagon I wanted to get some hands-on experience with React and ended up working on a small side project that involved integrating Google Maps into a Rails project with the @react-google-maps/api package. I decided to create this tutorial to share my experience in building a simple starter using these tools.

3. Prerequisites

To follow along with this article you'll need at least a basic understanding of Ruby on Rails, MVC (Model View Controller), JavaScript, and React. You'll also need a Google account in order to create a Google Maps API key and a code editor of your choice (e.g. Visual Studio Code).

This tutorial also requires you to have the following installed:

This tutorial was tested on a fresh Ubuntu 20.04 install following the installation instructions provided by the docs in each prerequisite. If you have issues at any point feel free to drop a comment or reach out via DM.

If you get stuck at any point, feel free to reference the source code or clone the project and follow along.

4. Setting up your app

We're going to be building our project using a Rails backbone connected to a PostgreSQL database. If you have all the prerequisites installed, generate a new app with the following command:

rails new rails-react-google-maps --database=postgresql

This will create a new folder in your current directory with the same name as your app. Rails uses SQLite3 as its default database so by passing the --database=postgresql option in the setup we tell the app to use PostgreSQL instead to save some time.

PostgreSQL database management in Rails

Now that we have our basic structure set up we can get started with creating the database we'll use to hold all of our Place data. Rails makes database management easy with a few simple commands. The ones we'll be using in this tutorial are:

rails db:create
rails db:migrate
rails db:seed

rails db:create does what it says on the box - creates our database. This is an important step as without it we'll get an error when we try to run our server.

rails db:migrate is something we'll touch on soon but it's a part of that "rails magic" that makes database management simple. I'd recommend reading the Rails Guide on Active Record Migrations to learn more about how they work.

In simple terms, migrations allow us to manipulate the tables in our database - whether they're adding or removing columns, changing data types, or renaming tables themselves - which can all be done from the command line.

rails db:seed will mainly be used in the development phase of our project to create starter data we'll use to populate our app. We'll explore this more when we start creating instances of our Place model.

To learn more about what other commands you have at your disposal, check out the Running Migrations section in the previously linked Rails Guide.

5. Building our database

To get started, run the following command in your terminal:

rails db:create

You should see this output:

Created database 'rails_react_google_maps_development'
Created database 'rails_react_google_maps_test'

We now have our database set up and ready to store our data. To make sure everything is working, type rails server in your terminal to start up your app. You should see the basic Rails welcome page.

6. Creating our Place model

Now that our app and database are running we can start creating our Place model that will give us the data we need to display on Google Maps. Let's generate the model in the terminal:

rails generate model Place name:string address:string latitude:float longitude:float

You should have something in your terminal that looks like this:

Running via Spring preloader in process 387002
      invoke  active_record
      create    db/migrate/20211104052039_create_places.rb
      create    app/models/place.rb
      invoke    test_unit
      create      test/models/place_test.rb
      create      test/fixtures/places.yml

This means we've got our Place model up and running! But we're not quite done yet because it's not technically connected to our database. To do this we'll be using the file generated by this line:

create    db/migrate/20211104052039_create_places.rb

Remember the migrations we spoke about earlier? Well this is where they come into play. To connect our new model to our database all you have to do is run a migration in your terminal and you should get some feedback:

rails db:migrate

== 20211104052039 CreatePlaces: migrating =====================================
-- create_table(:places)
   -> 0.0106s
== 20211104052039 CreatePlaces: migrated (0.0107s) ============================

There you have it, we've now created our database, generated a model to create new data, and connected that model to the database.

Sidenote about Models and MVC

Rails is built around an MVC (Model View Control) pattern. It's a deeper topic than this tutorial but it's worth looking into if you're interested in exploring what Rails (or any other MVC-based framework) is capable of. This Medium article does a good job of explaining how it relates to Rails directly, while the Mozilla docs on the topic give a more holistic overview.

7. Geocoder gem

Before we start making new places we need to install geocoder, the gem that will help us get the coordinates of a place from the address we give it. If you're not sure what a gem is, this Medium article gives a pretty good explanation.

The geocoder gem takes an address and converts it into latitude and longitude - important data that we'll need for Google Maps. We could technically hard code the coordinates when we create a Place but if you're working with more than a handful of places this can get pretty tedious.

To install geocoder, navigate to your project's root directory (/rails-react-google-maps) and open the Gemfile. Adding a gem to this file will make it available to anyone who clones your app with one easy command. To find out more about how the Gemfile works, check out the documentation.

Add gem 'geocoder' to your Gemfile anywhere above the development and test groups and save the file. Next, in your terminal run:

bundle install

You should get a long list of gems with a confirmation message at the bottom. If you scroll through the list you should be able to find Using geocoder 1.6.7. To create some necessary files for setup, execute the following command:

rails generate geocoder:config

You should see the following:

Running via Spring preloader in process 388633
      create  config/initializers/geocoder.rb

If we navigate to that geocoder.rb file we can make any changes to the configuration that we want. For example, I use the metric system so instead of the default miles, I can change units to km by uncommenting the units option and changing it:

Geocoder.configure(
  ...
  # Calculation options
  units: :km,
  ...
)

The final step for setting up our geocoder gem is to point it to the address we want to extract coordinates from. In our project directory, go to the /rails-react-google-maps/app/models folder and open place.rb and add the following lines inside the class:

  geocoded_by :address
  after_validation :geocode

The first line tells geocoder which part of the model it needs to listen to, in this case the address data we declared when generating the model. This means that whenever we create a place, geocoder will take the address and automatically assign the coordinates to the latitude and longitude without us having to hard code it ourselves.

To test this out let's open a rails console and create an example:

rails console

In the console:

Place.create(address: '1600 Pennsylvania Avenue NW, Washington, DC 20500, United States', name: 'The White House')

If it's successful, you should see a lot of information that looks something like this:

  TRANSACTION (0.3ms)  BEGIN
  Place Create (0.8ms)  INSERT INTO "places" ("name", "address", "latitude", "longitude", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5, $6) RETURNING "id"  [["name", "The White House"], ["address", "1600 Pennsylvania Avenue NW, Washington, DC 20500, United States"], ["latitude", 38.897699700000004], ["longitude", -77.03655315], ["created_at", "2021-11-04 08:22:20.077379"], ["updated_at", "2021-11-04 08:22:20.077379"]]
  TRANSACTION (1.0ms)  COMMIT
 => #<Place id: 3, name: "The White House", address: "1600 Pennsylvania Avenue NW, Washington, DC 20500,...", latitude: 38.897699700000004, longitude: -77.03655315, created_at: "2021-11-04 08:22:20.077379000 +0000", updated_at: "2021-11-04 08:22:20.077379000 +0000">

If you look carefully you'll see that we've got ["latitude", 38.897699700000004] and ["longitude", -77.03655315] which means everything is working!

8. Seeding our database

We briefly touched on seeding when we discussed database management in Rails. We've already populated our database with one place (The White House) so now it's time to create a few more places to give us some content to work with.

To make life easier I've provided a template for our seeds file. Feel free to use these or substitute the addresses for your own. I grabbed these places and addresses off Google Maps so I recommend you do the same and test them in the console if you're unsure.

Navigate to rails-react-google-maps/db/ and paste the following into your seeds.rb file:

places = [
  {
    name: 'The White House',
    address: '1600 Pennsylvania Avenue NW, Washington, DC 20500, United States'
  },
  {
    name: 'Washington Monument',
    address: '2 15th St NW, Washington, DC 20024, United States'
  },
  {
    name: 'Lincoln Memorial',
    address: '2 Lincoln Memorial Cir NW, Washington, DC 20002, United States'
  },
  {
    name: 'Washington National Cathedral',
    address: '3101 Wisconsin Ave NW, Washington, DC 20016, United States'
  },
  {
    name: 'Ronald Reagan Washington National Airport',
    address: '2401 Smith Blvd, Arlington, VA 22202, United States'
  }
]

puts 'Clearing seeds...'

Place.destroy_all

puts 'Seeds cleared.'

puts 'Seeding the database'

places.each do |place|
  Place.create!(
    name: place[:name],
    address: place[:address]
  )
end

puts "Created #{Place.all.count} places."

If you're not too sure what's happening here, don't worry. All you need to do from here is go back to your terminal and run:

rails db:seed

This will create an instance for each place, with some feedback in your terminal that should look like this:

Clearing seeds...
Seeds cleared.
Seeding the database
Created 5 places.

Just to double check, let's revisit the rails console to make sure our places are all set up:

rails c

Then let's check that all 5 were generated:

Running via Spring preloader in process 415433
Loading development environment (Rails 6.1.4.1)
2.6.6 :001 > Place.count
   (0.7ms)  SELECT COUNT(*) FROM "places"
 => 5

Finally, let's make sure the first place matches the first seed we created (The White House). You should see this output:

irb(main):002:0> Place.first
  Place Load (0.3ms)  SELECT "places".* FROM "places" ORDER BY "places"."id" ASC LIMIT $1  [["LIMIT", 1]]
=> 
#<Place:0x000056403376b848
 id: 2,
 name: "The White House",
 address: "1600 Pennsylvania Avenue NW, Washington, DC 20500, United States",
 latitude: 38.897699700000004,
 longitude: -77.03655315,
 created_at: Fri, 05 Nov 2021 06:25:00.618439000 UTC +00:00,
 updated_at: Fri, 05 Nov 2021 06:25:00.618439000 UTC +00:00>

9. Generating our views and controllers

The next step is for us to generate the views and controllers for our Place model. The views are what our users will see in the browser, and it's where we'll be rendering our React components (i.e. the map). The controller is responsible for handling the logic of our app - managing what happens between HTTP requests, routing, and actions. This is a core concept for Rails and I'd strongly suggest studying up on it. Check out the official routing docs to dive deeper into it.

We'll use the rails generate command again to create our controller and views. When generating a controller you can pass it the name of the methods you want to create inside it, which in turn creates the associated views. To get started, head back to your terminal and enter:

rails generate controller places index

Running via Spring preloader in process 420964
      create  app/controllers/places_controller.rb
       route  get 'places/index'
      invoke  erb
      create    app/views/places
      create    app/views/places/index.html.erb
      invoke  test_unit
      create    test/controllers/places_controller_test.rb
      invoke  helper
      create    app/helpers/places_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    scss
      create      app/assets/stylesheets/places.scss

There's a lot to take in so let's break down the important bits of what we just did:

Controller & Routes

create app/controllers/places_controller.rb
route get 'places/index'

Here we've created our controller and, because we signaled that we wanted to include an index action, the generator created the route for us. If we check the places_controller.rb you should see an empty method for our index action that will be revisited once we start rendering in our views:

class PlacesController < ApplicationController
  def index
  end
end

Views

invoke erb
create app/views/places
create app/views/places/index.html.erb

The final piece of the MVC puzzle - this is where all our back end goodness comes to life on the page. Again, thanks to the options we passed in the generate controller command, Rails automatically created two pages for us in the embedded ruby (erb) format.

The .erb format is highly flexible and allows us to run Ruby code in our view, making the process of connecting back to front really easy. We'll be using it in-depth later to connect our controller logic to our React components.

10. Routing

The last step before we move onto React and Google Maps is to configure our routes. If you're not sure about routing I fully recommend revisiting the routing documentation linked above.

For now we'll only be using the index route, which returns all instances of a model. If you navigate to rails-react-google-maps/config/routes.rb you'll see that the controller generator already gave us the route but we'll be cleaning it up using Rails resources and specifying what we want to have access to. At the same time we'll reroute the root (homepage) of our app to the index page:

Rails.application.routes.draw do
  root to: 'places#index'
  resources :places, only: %i[index]
end

This just moves the routing logic to one line which we can add to or remove from to adjust our routes, as well as making our places index page our new homepage when we start the app.

Let's test it out. If you're running a server in your terminal, press Ctrl+C to shut it down and restart - if your server isn't running:

rails server

Open localhost:3000 in your browser and you should have a mostly empty page that looks like this:

It's not looking so great at the moment but it means that our front end is connected to our back end!

Congratulations, you now have a working Rails app that has a working model, a view that's displaying in our browser, and a controller that we'll soon fill with lots of logic goodness to bring our app to life.

Carry on to Part Two to implement React and use it to build out our map feature in Google Maps!

DEV Community: Rhys Malyon

Making pageContext available to child components in Gatsby with react-intl

Table of Contents

1. Background

2. The Problem

3. The Solution

Sidenote

Creating a Google Map component in Rails-React

Table of Contents

1. React Google Maps API

2. Creating a Map component

3. Building our controller logic

3.1. Showing our places

3.2. Sorting our controller logic

Markers

Center and zoom

3.3. Adding props to our Map component

4. Making markers for our places

5. Adding infowindows to markers

6. Next steps

7. Get in touch

Setting up Google Maps API

Table of Contents

1. Google Maps API keys

Disclaimer

2. Creating API keys

3. Choosing our APIs

4. API keys and .env

Sidenote on environment variables

Creating our .env file

Saving our keys as environment variables

Installing React in Rails and creating your first component

Table of Contents

1. Installing React

React-Rails

2. Rendering our first component

3. Exploring our React component

Building a Rails app backbone

Table of Contents

1. Introduction

2. Background

3. Prerequisites

4. Setting up your app

PostgreSQL database management in Rails

5. Building our database

6. Creating our Place model

Sidenote about Models and MVC

7. Geocoder gem

8. Seeding our database

9. Generating our views and controllers

Controller & Routes

Views

10. Routing