Handling Dev vs Production API Calls using create-react-app

This post documents a brute-force approach I took to alternating between development and production databases in the PLURview app.

I built a simple apiAdapter.js file in my src/ directory, which sets an API_URL variable for my fetch() calls. PLURview is based on create-react-app, which has the ability to distinguish between dev and production through process.env variables.

The Problem

There were about 10 different calls to PLURview’s internal API spread throughout the front-end codebase. The API URLs were hard-coded, which required a project-wide search-and-replace for every commit (local vs production).

The other problem was complexity of information when it came to researching how to accomplish this. The app is hosted on Heroku and it automatically updates from Github.

I looked into using Heroku’s environment variables, which I had found useful in the past for storing API keys. All of my calls to external APIs go through the back-end, which is a private repo.

Ultimately a proper DevOps style solution appeared to be too heavy a solution for the amount of time I had to research and implement a solution.

The Solution

First, I modified my NPM scripts to set the dev environment variable:

"scripts": {
    "start": "REACT_APP_STAGE=dev react-scripts start",
    ...
  }

When you set a variable starting with REACT_APP you’ll have access to it in your app along the pattern of process.env.REACT_APP_STAGE.

Next, in apiAdapter.js I created a simple ternary based on the environment variable:

let API_URL

process.env.REACT_APP_STAGE === 'dev'
  ? API_URL = 'http://localhost:3001/api/v1'
  : API_URL = 'https://plurview-api.herokuapp.com/api/v1'

Finally, I collected all those fetch calls into apiAdapter.js so I could interpolate the API_URL based on the environment:

export const fetchArtists = () => {
  return fetch(`${API_URL}/artists`)
}

The adapter works the same way in the app as Redux actions. A component can import and use only the calls it needs:

import {fetchColorGuide} from '../../apiAdapter'

...

toggleDetails = () => {
    fetchColorGuide()
    .then(res => res.json())

Conclusion

This was a good intermediate step between ad hoc fetch() calls and something more elegant. In the process I found I probably had more API calls going on than necessary, and some of my naming conventions could use better semantics.

The process of abstracting these calls also shined some light on components and endpoints I was no longer using, which helped me pare down the codebase a bit overall.

PLURview’s Visual Language for Music

PLURview uses color gradients to describe what sort of EDM show you can expect from an artist. The colors create a new visual language for describing music without relying on labels. With a general understanding of what the 6 basic colors represent, you can tell at a glance whether an unknown artist is in your taste range.

Some background on this: the PLURview database currently has 243 subgenres of EDM associated with various artists. If these were split evenly for every artist in the database, each artist would have nearly 10 subgenres to describe their sound. The system is broken.

The PLURview Vibe System

Here’s the answer to DJs’ “Death to Genres!” battle cry: no more genres. Use vibes instead. Some shows will have more of a Deep House vibe to them. Sometimes they’ll get you bouncing with something more Big Room, drop after drop. The mosh pit at a Dubstep show is probably not the best place to make out with someone. You’ll often find dubstep mixed with Trap music, which has more hip-hop influences. If you want something more chill, go to a Trance show or get weird with some Bass Music.

Most shows will be a blend of styles, although some artists can fit snugly into one vibe or another. Here’s the visual breakdown:

Red – Deep House

Carl Cox is one of the big names to think of when it comes to the red color bar. In fact, the red lighting of the Carl Cox Megastructure at Ultra Music Festival played a big role in assigning this color.

Pink – Big Room

Expect to jump! Big bass drops here. Also you might get cake thrown on you if you stay to the end of a Steve Aoki set. Pink is all about high energy and positive vibes.

Yellow – Trap & Hardstyle

Yellow Claw inspired the color choice. This Amsterdam duo brings the heat with hardstyle drops that segue into hip-hop beats.

Green – Dubstep

DEEP bass- dark, and often a bit on the slower side. This is head-banging, moshing type of music. Inspiration for the green color palette came from Snails and his personal subgenre “Vomitstep”. However, 12th Planet is a better example of what to expect out of a full-green show.

Blue – Trance

More of a chill vibe here. Get deep into it or let it set the mood. The blue is good for cooling off. Eric Prydz is very popular in this category.

Purple – Bass Music

Experimental music with generally more of a weird vibe to it. Rezz is a cool example of this:

Color Blends

This is where the magic really happens with PLURview. The underlying algorithm sets a gradient based on numerous factors, in various weights. Some artists have a darker or lighter shade to them. They also vary in terms of more subdued or vibrant colors. No two artists are completely the same, and the gradient reflects the differences.

High Energy Blend – Borgeous

Part Big Room/Part Trance – Gabriel & Dresden

Conclusion

No two artists are alike, but you’ll find a lot of common combinations: yellow/green with dubstep and trap, red/pink is common with big room, as is red/blue with trance. As you become more comfortable with the color scheme, the hope with PLURview is to give you an effective shorthand to see if an artist is worth your time to explore.

The algorithm is by no means perfect or complete. This project is still in its infancy. Many artists in the database have too few data points to produce a reasonably accurate gradient. For those, you’ll find the neutral gradient below:

Mark Bello

Mark Bello