Skip to content

Instantly share code, notes, and snippets.

Haugen /
Created November 9, 2018 17:33
Using .env file environment variables with create-react-app project

For a simple way to use environment variables in your react-create-app project, follow these steps:

  1. Create a new file named .env in the root of your project.
  2. In your new .env file, add a new key=value pair. For security reasons, you must prepend your key with REACT_APP, for example REACT_APP_API_KEY=abcdefg123456789
  3. Restart your server development server. In order for React to find and register your newly created environment variable you must restart your server. Do this every time you add or change a variable.
  4. Your new variables will now be available throughout your React app via the global process.env object. In our case, we could get our API key using process.env.REACT_APP_API_KEY.

Additinal notes

  • Since we commonly store secrets in .env you probably want to add it to .gitignore.
  • You don't need to install the dotenv package or anything else for this to work.
Haugen / .babelrc
Created September 12, 2020 22:32
Browser targets with babel issue - config
"presets": [
"debug": true
Haugen / bem-example.scss
Last active April 22, 2019 14:40
Example usage of BEM style SASS
.block {
background: $black;
height: 500px;
@media(min-width: $screen-lg-min) {
height: 430px;
&__element {
margin: 0 auto;
Haugen /
Last active February 15, 2019 10:39

Read DN

This is quick and dirty experimental code that lets you read articles on Try it out! Not all articles send the premium content to the browser though. In those cases, there is nothing this script can do. Suggestions or improvements? Did it work for you? Please let me know.

To use this you need:

Once installed, att the custom script below and browse to an article on that would normally be behind a paywall. Wait until the page has loaded. Can you read the article?