Parcel: Is there any way to use env variables?

[markozxuu]

❔ Question

Hi Guys 😸

I would like to use Environment Variables in my Parcel application.

Webpack offers a plugin EnvironmentPlugin

Parcel offers something similar? ❤️

🔦 Context

use env variables with Parcel :)

💻 Code Sample

that plugin allows me to do this in my webpack application

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.8.1
| Node | 10.3.0
| npm/Yarn | 1.7.0
| Operating System | macOS Hig Sierra(10.13.5)

[DeMoorJasper]

We support environment files natively

_{Sent with GitHawk}

[markozxuu]

@DeMoorJasper Hi 👋 guide on how to use it? I'm interested in using it in the same way that I can use it in webpack.

It would be great if you could give me an example 🙏

[minhchu]

@MAPESO just drop your .env file in your project root directory. Parcel has built in support for dotenv

your-project-directory
  |-- src
  .env
  package.json
  yarn.lock

[markozxuu]

@minhchu I need to use files with a .json extension :(

[minhchu]

Why do you need that :thinking: In the end, you still want to get your process.env.TOKEN. You can achieve the same thing by using dotenv :D

[DeMoorJasper]

Parcel endorses standardised formats, as we don’t want to make the users dependent of one tool like webpack does with it’s custom config that contains everything. Therefore a custom .json config will be unlikely

_{Sent with GitHawk}

[markozxuu]

@DeMoorJasper @minhchu thank you for clarifying the doubt 😸

[markozxuu]

I'm going to close the issue :)

[bogdansoare]

I get this error

module.js:549
    throw err;
    ^

Error: Cannot find module 'dotenv-expand'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at dotenvFiles.forEach.dotenvFile (/Users/bogdansoare/Hacking/design-system/node_modules/react-scripts-parcel/config/env.js:41:5)
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (/Users/bogdansoare/Hacking/design-system/node_modules/react-scripts-parcel/config/env.js:39:13)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
error Command failed with exit code 1.

[dumptyd]

Hi, is it possible to inject env vars in html files?

[mrcoles]

@dumptyd I was asking the same question and came up with the following solution using posthtml + posthtml-expressions https://github.com/parcel-bundler/parcel/issues/1209#issuecomment-432424397