You’ve been trying to figure out why a change to your code isn’t visible, you have thousands of tabs open and then it suddenly hits you… you have the production URL open instead.

I’ve been there, it’s embarrassingly easy to waste huge periods of time and productivity trying to work it out, only to realise you weren’t even looking at your local dev environment. SO, I have a great tip that will help make sure this never happens again.

Gatsby allows you to specify an image path for a favicon and also background colour and theme colour for a site manifest. It’s available through the gatsby-plugin-manifest plugin.

You can add it to your gatsby-config in the usual way and it could look similar to:

module.exports = {

plugins: [

{

resolve: `gatsby-plugin-manifest`,

options: {

name: `GatsbyJS`,

short_name: `GatsbyJS`,

start_url: `/`,

background_color: `#f7f0eb`,

theme_color: `#a2466c`,

// Enables "Add to Homescreen" prompt and disables browser UI (including back button)

// see https://developers.google.com/web/fundamentals/web-app-manifest/#display

display: `standalone`,

icon: `src/images/icon.png`, // This path is relative to the root of the site.

},

},

],

}

This is boilerplate, what would come as default if you used any starter or tutorial on www.gatsbyjs.org — not very useful for stopping those pesky differentiation issues.

We’re going to write two small functions, which will take an argument for NODE_ENV and determine what colour and image should be used. We’ll then use them in place of the hex colour value and image path above.

const faviconSelector = (env) => {

return env === 'production'

? 'src/images/icon.png'

: env === 'staging'

? 'src/images/icon-staging.png'

: 'src/images/icon-development.png'

} const envColourSelector = (env) => {

return env === 'production'

? '#7b41c1' // Purple

: env === 'staging'

? '#405ac1' // Blue

: '#c13f5e' // Red }

I tend to make sure my colours stand out and aren’t too similar, it’s also worth making your local development environment more radical (inverted) or a shade of red to really alert you to the fact you are working on a development state of your application / website.

We now place these functions within our config:

const { NODE_ENV } = process.env module.exports = {

plugins: [

{

resolve: `gatsby-plugin-manifest`,

options: {

name: `GatsbyJS`,

short_name: `GatsbyJS`,

start_url: `/`,

background_color: envColourSelector(NODE_ENV),

theme_color: envColourSelector(NODE_ENV),

// Enables "Add to Homescreen" prompt and disables browser UI (including back button)

// see https://developers.google.com/web/fundamentals/web-app-manifest/#display

display: `standalone`,

icon: faviconSelector(NODE_ENV), // This path is relative to the root of the site.

},

},

],

}

You can test your new config by changing the value of NODE_ENV and refreshing your browser tab.

NODE_ENV=staging gatsby develop or NODE_ENV=production gatsby build && gatsby serve or gatsby develop

Do you have any development tips? Leave them in the comments, I’m always on the look out for new ways of increasing my productivity.