GatsbyJS and dotenv
December 30th, 2019
- 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
Created by Maria D. Campbell who lives and works in New York City building useful things. You should follow her on Twitter. She also has a developer blog mariadcampbell.com you may want to check out!