Crisp chat, GatsbyJS and dotenv (update)

• Link to the Crisp chat, GatsbyJS and dotenv (update) podcast on anchorfm

Yesterday, I updated my post GatsbyJS and dotenv to include ryanditjia’s response to my issue on the gatsby-plugin-crisp-chat Github repository.

In order that it is not overlooked or missed by those that listened to the podcast and/or read the post before I added the update, I thought I would create an update podcast to this Crisp chat, GatsbyJS, and dotenv issue.

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 (a) .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! Why?

Because, as ryanditjia states,

... your Crisp website ID is always there on the final rendered HTML, so it
likely won’t matter much to hide it behind (a) .env file.

That means all the solutions I came across would not have worked anyway, even if the websiteId environment variable did not return undefined, because the websiteId, or some relation to it (as I later discovered), renders in the html client side anyway.

In addition, in the end, we can’t add the environment variable to client side code, aka Gatsby React, because there is no Crisp React component element one can add to the JSX, as an example shown in the GatsbyJS docs:

// In any frontend code
render() {
    return (
        <div>
            <img src={`${process.env.GATSBY_API_URL}/logo.png`} alt="Logo" />
        </div>
    )
}

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

• Environment Variables
• GatsbyJS and dotenv