GatsbyJS and dotenv

• Link to the GatsbyJS and dotenv podcast on anchorfm

Update 12.30.19: According to ryanditjia in response to my issue on the gatsby-plugin-crisp-chat Github repository,

Last note: what Crisp says is true, your Crisp website ID is always there on the
final rendered HTML, so it likely won’t matter much to hide it behind .env file.

This means in Gatsby speak that trying to use environment variables with Crisp whose real values would render client-side anyway in the final analysis, would not work!

Original Podcast Transcript

Friday I added a Crisp chat box to my site. I was happy to find such a great widget to enhance my website experience.

But today I realized that I had forgotten to add the dotenv npm package to my site so that I could avoid sharing my Crisp websiteId with the world on Github.

However, it was not a travesty. If the widget had been something I had built myself and included some kind of API key, it would have been somewhat of a travesty. I would have had to remove the whole repository from Github and then pushed it to remote again after adding the dotenv npm package, including the Crisp websiteId environment variable to the .env file and including the .env file to my .gitignore.

With Crisp, all you need to do is delete your existing website configuration and re-add it. This way you receive a new websiteId which you can add to your .env file,

CRISP_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

and then add it to your gatsby-config.js file.

However, I had problems importing the environment variable into gatsby-config.js. The GatsbyJS docs were very confusing. In addition, different sources cited different ways of configuring environment variables.

In the end, however, the Crisp widget only appeared if I placed the actual Crisp websiteId string as a value of the websiteId option in the Crisp configuration in gatsby-config.js. Just as shown in the GatsbyJS docs. I tried all the other solutions provided in the links I include in the post transcript of this podcast oninterglobalmedianetwork.com, but none worked for me.

Using environment variables only resulted in an undefined Crisp configuration, no matter which way I configured them.

The working configuration is demonstrated in my post Crisp Chat Box now on interglobalmedianetwork.com.

What’s interesting, however, is that my new websiteId string in the html does not match the string in gatsby-config.js. Nor does it match the previous websiteId I had. Go figure.

According to Crisp, it is not a security risk to add the actual website id string in gatsby-config.js. It still would be nice to have the option of using a package like dotenv.

I will continue to research this issue, and I have actually created an issue regarding this problem on the gatsby-plugin-crisp-chat Github repository.

I will be embedding this episode of Plugging in The Holes along with a transcript in the form of a post on interglobalmedianetwork.com for your hearing and reading pleasure. I will be including the related resource links mentioned in the podcast of course. Always do. Bye for now!

Related Resources

• Why am I getting an “invalid chatbox code” error ?
• How is security managed on Crisp services?
• Environment Variables
• gatsby-plugin-crisp-chat
• Gatsby .env variables with Heroku #11559
• Environment Variables in gatsby-config.js not working #3896
• dotenv on npm
• Setting Environment Variables in Gatsby
• Can’t access gatsby environment variables on the client side
• Environments and Environment Variables
• gatsby-plugin-crisp-chat repository onGithub