I am exploring this React project from the repo below and the process.env is not returning any values (undefined when I console logged them). The variables are declared in a .env.local file created at the root as per the repo's instructions and all prefixed by REACT_APP_ There is no webpack involved. It uses react-scripts to load with yarn start.
Can anyone advise why it is not working?
git clone https://github.com/figment-networks/learn-solana-dapp
Thanks:)
You could try without configuring dotenv first, by renaming .env.example to .env.local or any of the below link names, as I believe this was created with create-react-app(because of the presence of react-scripts)
https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used
Although it has dotenv installed, it doesn't seem to use it, to use it one would do the following:
Add this to the beginning of index.js inside src:
import path from 'path';
import dotenv from 'dotenv';
dotenv.config({ path: path.join(__dirname, '../.env.example') });
dotenv has to be configured in order to use its variables, but shouldn't be needed under create-react-app
Related
I have recently switched from using .env file to a secrets management tool, Doppler, and is trying to inject the variables from Doppler into React, which is built by webpack.
However, simply by running
doppler run -- webpack serve --config webpack.dev.js
does not do the trick. What should I do if I want to inject env from Doppler into webpack to build my React app?
I found out about the EnvironmentPlugin in webpack,
When you run doppler run -- webpack serve --config webpack.dev.js, doppler injected the env variables into the runtime and we can pass them with EnvironmentPlugin by specifying the key name in the array and pass that into the plugin
const { EnvironmentPlugin } = require("webpack");
module.exports = {
plugins: [
new EnvironmentPlugin(["SAMPLE_KEY"]),
],
};
Another approach is to pass an object instead, and this approach allows for default values in case doppler has failed to provide the key
const { EnvironmentPlugin } = require("webpack");
module.exports = {
plugins: [
new EnvironmentPlugin({"SAMPLE_KEY":"abcde"}),
],
};
As long as the key specified in either the array or the object matches that in doppler, this should work.
referencing webpack docs here
I'll answer my own question from my comment...since I finally figured it out.
If you are coming from using a .env file in your project - I had a very large one with over 50 lines.
Running from a Unix based IDE You can mount the .env file:
doppler run --mount .env npm run build
This wont work on Windows VSCode, so if you are running your build from Windows based IDE command line (like me), you have to download the .env file
doppler secrets download --no-file --format env > .env
Best practice would be to delete this unencrypted file after processing!!
and using Docker for a CI build on a config branch you will want to run:
doppler run --token ${TOKEN NAME} --mount .env npm run build
I am currently working on a reactjs project which has been created with create-react-app. env-cmd package is a little too old and is not under maintenance anymore so I'd like to use dotenv instead. Is there a way that I can specify a .env file just like we usually do with env-cmd but with the help of dotenv instead? Or is there a suggested method I should be following using dotenv?
Thanks in advance.
You can specify the path with .config({path: "directory"})
// Using require syntax
require("dotenv").config({ path: "../.env" });
// Using import syntax
import dotenv from "dotenv"
dotenv.config({path: "../.env"})
I would like to configure component testing in Component Testing.
Frontend framework: React.js(detected); Bundler (Dev Server): Webpack(detected)
Next Step: all ok. webpack >=4.0.0; react >=16.x
Continue: I can see short the cypress.config.js in green and than:
Error:
You are using webpack for your dev server, but a configuration file was not found.
We traversed upwards from:
/home/projekte/bitbucket/teeth/cypress
looking for a file named:
webpack.config.ts
webpack.config.js
webpack.config.mjs
webpack.config.cjs
Add your webpack config at one of the above paths, or import your configuration file
and provide it to the devServer config as a webpackConfig option.
I have in /home/projekte/bitbucket/teeth/frontend/node_modules a webpack directory.
I can import the webpack.config.js in my cypress directory and this issue is not more present. But I think it is not so simple. What can I do for a correct using?
The frontend, backend and cypress are in the same directory.
I think you have to add a webpack.config.js file to you file directory to resolve the issue
I'm using npm workspaces for the first time(node version v16.15.0 and npm v8.5.5 ). I need to import components from a react app in another app with some minor updates. We still need to continue to be able to deploy the legacy app. So I'm using monorepo structure to achieve this. I can start and build the app1 and app2 individually. Later I'm planning to move shared packages out of app2. But for now even though I've build the app2 when I import components from it in app1 I get an error "You may need an additional loader to handle the result of these loaders". I guess the import is still from the src whereas I want to import compiled files. How can I do that ?
- root
package.json
- apps
- app1
package.json
webpack.config.json
- app2
package.json
webpack.config.json
So I finally got everything working. I had shared react components from app2 that I wanted to import in app1. I could have moved the shared components into separate package/features/Feature.js[x]. But for the time being I'm importing it directly from app2. For this I needed to update my webpack config in app1 to resolve for
resolve: {
alias: {
'#scope/app2/src': path.resolve(__dirname, '../app2/src'),
},
},
NOTE: #scope/app2 is the package name in package.json
Additionally I added #scope/app2 as a dependency in app1 under package.json. I got the hint from this post here https://medium.com/edgybees-blog/how-to-move-from-an-existing-repository-to-a-monorepo-using-npm-7-workspaces-27012a100269#4223
By doing this I was able to teach webpack to transpile the src files imported from app2. Hope this helps anyone looking for more information on npm workspace 8
I am fiddling around with the following local drf-react setup. I'm really new to react and javascript overall and got absolutely no idea why I cannot import axios or any other node module for that matter in my react components, except for the modules that already shipped with the cookiecutter project itself. Is this related to the react-dev-utils..? I would like to use webpack, but I fail to set it up properly. My frontend docker container won't compose, telling me to install webpack-cli. Help is much appreciated.
https://github.com/moritz91/drf-react-app
You should run the command npm install inside your frontend folder:
Open the terminal
Find the frontend folder
Inside of it run the command npm install
This command will install the dependencies related to your package.json file, which is inside the frontend folder.
Inside your React files you will put the whole path to the node_modules folder.
The idea of using node_modules is to make it easier to control your dependencies in your project. You should consider again using webpack to handle these files from node_modules.
Wepack has a module called resolve which you have to fill with a list of directories and inside React components you don't need to use the whole path anymore, because Webpack will understand where to look:
// ALIAS
resolve: {
extensions: ['.js', '.jsx', '.scss'],
modules: [
'YOUR SOURCE FOLDER',
'YOUR NODE MODULES FOLDER',
'ANY OTHER FOLDER'
]
}
From the docs:
Tell webpack what directories should be searched when resolving modules.
The documentation: https://webpack.js.org/configuration/resolve/
Also, I have an example using Webpack + Bootstrap 4.
You can use to build your own Webpack config for React and Redux.
https://github.com/italoborges/webpack-bootstrap4-es6