I am working on a react/electron project with webpack for bundling and electron-builder to compile the build. I am trying to override the build configuration after its compiled by providing a custom configuration file in the install directory of the application to override the env variables. I have verified process.env updates but the config variables still use the old configuration which was used at the time of compilation. Is there any way this can be achieved?
For example
const apiKey = process.env.APIKEY
In this case process.env.APIKEY has the updated config but apiKey still points to the older key used at the time of compiling the build.
First install dotenv - npm install dotenv
Create an .env file in the same folder as package.json
Then create the environment variables starting with → REACT_APP_
Example of point 3:
Inside .env file → REACT_APP_URL_PATH=xxxxx
Start your project locally and add some console.log(process.env.REACT_APP_URL_PATH)
just to check.
5.- Do the electron thing.
↓↓↓↓↓ npm dotenv ↓↓↓↓↓
https://www.npmjs.com/package/dotenv
Related
I create a ReactJS project with the create-react-app package and that worked well, but I cannot find webpack files and configurations.
How does react-create-app work with webpack? Where are the webpack configuration files located in a default installation with create-react-app? I'm unable to find configuration files in my project's folders.
I have not created an override config file. I can manage config settings with other articles but I want to find the conventional config file(s).
If you want to find webpack files and configurations go to your package.json file and look for scripts
You will find that scripts object is using a library react-scripts
Now go to node_modules and look for react-scripts folder react-script-in-node-modules
This react-scripts/scripts and react-scripts/config folder contains all the webpack configurations.
The files are located in your node_modules/react-scripts folder:
Webpack config:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js
Start Script:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/start.js
Build Script:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/build.js
Test Script:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/scripts/test.js
and so on ...
Now, the purpose of CRA is not to worry about these.
From the documentation:
You don’t need to install or configure tools like Webpack or Babel.
They are preconfigured and hidden so that you can focus on the code.
If you want to have access to the config files, you need to eject by running:
npm run eject
Note: this is a one-way operation. Once you eject, you can’t go back!
In most scenarios, it is best not to eject and try to find a way to make it work for you in another way.
If you need to override some of the config options, you can have a look at https://github.com/gsoft-inc/craco
A lot of people come to this page with the goal of finding the webpack config and files in order to add their own configuration to them. Another way to achieve this without running npm run eject is to use react-app-rewired. This allows you to overwrite your webpack config file without ejecting.
Assuming you don't want to eject and you just want to look at the config you will find them in /node_modules/react-scripts/config
webpack.config.dev.js. //used by `npm start`
webpack.config.prod.js //used by `npm run build`
Webpack config used by create-react-app is here:
https://github.com/facebook/create-react-app/tree/master/packages/react-scripts/config
You can find it inside the /config folder.
When you eject you get a message like:
Adding /config/webpack.config.dev.js to the project
Adding /config/webpack.config.prod.js to the project
Webpack configuration is being handled by react-scripts.
You can find all webpack config inside node_modules react-scripts/config.
And If you want to customize webpack config, you can follow this customize-webpack-config
Ejecting is not the best option as well as editing something under node_modules.
react-app-rewired is not maintained and has the warning:
...you now "own" the configs. No support will be provided. Proceed
with caution...
Solution - use craco.
Try ejecting the config files, by running:
npm run eject
then you'll find a config folder created in your project. You will find your webpack config files init.
I'm using create-react-app with craco, and I was able to override my webpack configuration when updating to webpack 5 with the craco.config.js:
module.exports = {
style: {
postcssOptions: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
webpack: {
configure: (webpackConfig, { env, paths }) => {
// eslint-disable-next-line no-param-reassign
webpackConfig.resolve.fallback = {
fs: false,
};
return webpackConfig;
},
},
}
I know it's pretty late, but for future people stumbling upon this issue, if you want to have access to the webpack config of CRA, there's no other way except you have to run:
$ npm run eject
However, with ejection, you'll strip away yourself from CRA pipeline of updates, therefore from the point of ejection, you have to maintain it yourself.
I have come across this issue many times, and therefore I've created a template for react apps which have most of the same config as CRA, but also additional perks (like styled-components, jest unit test, Travis ci for deployments, prettier, ESLint, etc...) to make the maintenance easier. Check out the repo.
I have a javascript project setup in VScode but the automatic type acquisition is not working for me.
As far as I know, VScode checks the local and global node_modules folders for the #types directory. However, I use yarn so how would I go about telling VScode to use the correct directory?
I'm using typescript to transpire my JS down to ES5, so I have a tsconfig.json. I tried adding the path to the global yarn dir, but still no luck.
Thanks in advance for any help!
There are a few points to this question, so let's look at how TypeScript load typings in a JavaScript project:
Load typings from d.ts files included in your project. These are loaded even if you use #types.
Check in your local node_modules/#types
If that no local #types are found, trigger automatic typings acquisition. This installs an #types package into a global cache (which is separate from your npm/yarn globals)
TypeScript does not check the npm/yarn global installation directory for #types.
In your case, I believe you need to:
Install all the #types you need locally and include then as devDependencies in your package.json.
Switch to a jsconfig instead of a tsconfig if you are only working with JavaScript. TypeScript projects do not have automatic typings acquisition enabled by default
How does my node.js server know how to find the express.js file?
In my server.js file I have a requirement for express:
var express = require('express');
var app = express();
My server.js file is in the app folder while express.js is in the app\node_modules\express\lib folder:
express.js is here in the lib directory
Does node.js automatically know to look in node_modules for dependencies? There is no direct enumeration of the path anywhere - I don't see it in the code.
This is a sample project from scotch.io and I'm trying to pick it apart and learn. I'm pretty new to the MEAN stack and I'm trying to understand this at a basic level.
FYI this is node v 4.5.0
The comments already cover the main answer, but I'll try to break it out here for a slightly more complete overview of the subject (not all encompassing). The short version is that node looks in node's core (built in) packages, then your project's node_modules path for modules (packages, but we generally require modules) matching the name. 1
Package Installation, Saving, and Location
Node uses npm to install dependencies, which can be either a "dependency" or "devDependency"; the latter is used for development concerns that shouldn't be required for just normally using the module. We save these to our project's package.json using the flag --save or --save-dev (such as npm install express --save). 2
The package.json file is what sits at the root of your project tree (the project's folder/directory) and contains the dependency information, along with other information. 3 This is defines a "package". When a person publishes a package to npmjs, the (default) registry for packages to install via npm, they should include a well formed package.json which lists its own dependencies, files to include, and what is the "main" file to start with, should it be used in a require statement.
The dependencies you install by running npm install after cloning down the project's repository, will install the packages specified in the package.json, into the node_modules path in the root of your project (where you should be running the install command from).
Side Note
After checking the GitHub repo listed by the article you referenced, you appear to have created each of the files inside the app/ directory.
Require-ing
The use of a require statement in node is in the style of CommonJS and for node, looks first (after core packages) in the node_modules/ path or, if you specify a relative path to a folder or file, you can get it directly. Path relative means that it starts with ./ for a prefix to the current working directory (that the file is executing from), ../ for the directory above the current one, etc. There are other ways of handling paths, such as as the path module that is built into node 4. For example, the following are valid:
require('./some-other.js') require in that file's module.exports, from the some-other.js file 5, in the current, relative path
require('./some.json') will bring in JSON formatted content from a .json file 6, in the current, relative path
require('./routes') will/can also bring in exported content from the routes/ path (directory), which will by default start with the directory's index.js, should it exist 7
That last method is a nice way to be able to bring in a more complex requirement, without keeping everything in a single, overly busy file.
Let's consider the possible sources of modules:
Core modules provided by Node.js.
Package modules from doing npm install. These modules are stored in node_modules folder which is usually located in the root of the project.
Modules in any other location in your project (Usually modules created by you)
If you require modules without any prefix e.g require('a_module'), the core modules are searched first, If it's not found, the package modules are searched next. See the Node.js docs here
If you require modules with prefix / or ./, e.g require('/another_module') , require(./another_module), another_module is considered relative to the location of the requiring file. This is how you would require modules in any other location.
Check Node.js modules docs for further reading.
this is probably a silly question but am new to Meteor and struggling a bit. I want to build a stellar app that tweets when you get stellar. There is a nice Javascript API stellar-lib that works on node, but im unsure how to access the modules in Meteor...
I'm also building an app with Meteor and stellar-lib and have found two options:
1) You can manually copy over the built stellar-lib.js or stellar-lib-min.js from the build/ directory from either the github repo or the node_modules folder you installed it to when you ran the npm install command.
If you do this, you will have to copy the .js file to client/compatibility, otherwise stellar-lib will not work (note: this means you can only use Stellar on the client).
2) If you need it on the server, you can also have browserify wrap stellar-lib for you, then copy the output to lib/ in your Meteor app's root directory. I did this in my repo here with gulp.
Here's a short explanation to how 2) works:
.gulp is where I'll install my NPM modules where they will be ignored by the Meteor build environment (because the folder is hidden).
In deps.js, I require the modules I would want to use in my Meteor app as I would if I was using them in a traditional node.js app. package.json defines the modules I'll install with NPM and the gulpfile.js describes a build task that will resolve my require statements and output a single deps.js file that includes my dependencies to my Meteor app's lib/ folder.
I use "npm install -g express" on windows console.but when I try to "node app.js", it shows me the error"can not find module express",I had set the environment variable"NODE_PATH",but nothing happen ,I need your help,Thank you!
Globally installed modules aren't accessible without full path. You need to install express in your project directory or it parents. Check out documentation about module loading.
npm allows two options on how to install a module: locally and globally.
A global installation (done using npm install -g xyz) is for providing some tooling system-wide. Related to express this provides the global express bootstrapper that you can use to create an initial frame for your app by simply typing: express .. If you need help on what you can do with this command, check out its help parameter: express --help.
In contrast, a local installation of a module provides this module for a specific app. A local installation is always made to an app's node_modules folder. When you try to require a module, Node.js searches the this folder for the requested module.
Hence, it is perfectly fine to have express installed multiple times: Once globally for the bootstrapper, multiple times locally (once per app).
So, to cut a long story short: To make your app run, install express locally using npm install express and that's it :-).