feat: allow environment variables to be passed to JS (resolves #136)

[greatislander]

• [x] I've read the guidelines for Contributing to the Platform Co-op Toolkit
• [x] This isn't a duplicate of an existing pull request

Description

This PR allows environment variables to be accessed via process.env.ENVIRONMENT_VARIABLE in JavaScript files. In order to create environment variables, they must be set in Webpack config:

https://github.com/platform-coop-toolkit/coop-map-directory-index/compare/add/pcc-map-styles...feat/javascript-environment-variables?expand=1#diff-61877038a5575038809abf03f0009520R37

Webpack can access the contents of the .env file during the build process and read variables from there. Note that for ease of use the variables must be quoted in the .env file. In this instance, I added this line to my .env file:

BASE_URL="http://localhost:3000"

For the map styling implementation, the other change that was needed was moving the style.json file's contents into a JavaScript object so that variables can be used.

Steps to test

1. Check out branch.
2. Run npm run dev.
3. Visit home page.

Expected behavior: WIP map styles are loaded as expected.

Additional information

I explored envify but it would have added a separate step to the build tooling and this was supported in Laravel Mix, so I went this route instead. Technique found here: https://www.robertcooper.me/front-end-javascript-environment-variables

Related issues

Resolves #136.

[erictheise]

Thanks for setting this up, @greatislander, it was not clear to me how to deal with a .json file in this context. It's not exactly what I need. Would you be opposed to the introduction of Laravel Mix String Replace?

[greatislander]

@erictheise sounds good to me! Feel free to close this or modify it as needed.

[greatislander]

Resolved in 1cd0f88.