Hi guys,
Can REACT read windows environment variables? I know that it wouldn't be best practices and I should be using the .env file but this seems like something I should be able to make my application do and unfortunately all the google is around using the .env file which is how I am going to do it in the end but I would still like to know the answer here.
Thanks guys.
React doesn't know anything about environment variables; it's a library that runs in an HTML page in your browser. (HTML and JavaScript don't know anything about environment variables, for that matter, and that's only a good thing.)
The bundler/toolchain you use may schlep some environment variables over to the JavaScript code, e.g.
If you're using create-react-app, see https://create-react-app.dev/docs/adding-custom-environment-variables/
If you're using vite, see https://vitejs.dev/guide/env-and-mode.html
If you're using Next.js, see https://nextjs.org/docs/basic-features/environment-variables
If you're using something else, see that toolchain's documentation.
All of the above-linked tools support reading environment variables from, well, the environment, as well as .env files (commonly known as envfiles).
Related
I have some React developer experience/productivity improvement ideas that depend on static analysis of component files. I'd like to run some script to generate some code in component files if some characters appear in said files.
NextJS automatically runs its compiler whenever a component file changes, so I'd like to intercept/hook into that compile step to run my script and generate some code before the compiler continues.
I've looked around, but I can't find anything that suggests a way to go about doing this.
next/build does not expose hooks, so you cannot get in front of it like you are asking. You can use nodemon or something similar to listen to .next/server/pages/** and do something after the build script, or listen to src/pages/** and do something at the same time as the dev rebuild, but you cannot get in front of it.
This is actually a pretty common feature for other bundlers (Rollup etc.), so I opened a feature request for you.
I recently saw a .nsh file for the first time.
What is it? I can't find any docs regarding this language.
Does anyone know a good place to learn about it?
It is an installer file used by NSIS (Nullsoft Scriptable Install System), a program used for creating Windows installers; saves header information that can be included across all .NSI installer scripts; helps setup common environment conditions for an installation.
I'm using zip.js to unzip .zip file. I know this library is useful and powerful, but I want to use it in React. The installation instruction is just for the general use. So how can I import the lib so that I can use it?
If you include it as mentioned in the documentation -
it should be available globally through the window.zip object, which you can access anywhere in a react application.
I am very new to ReactJS and I might be thinking completely wrong. In our react app I make a lot of AJAX calls to the backend. For example, in dev I make calls to http://localhost:3000, in production I (naturally) use another host, which changes depending on the installation.
The hosts are static, set once and never change.
How do I make the host-information manageable in React?
I read about redux/flux etc to store global variable, but this is overkill for us. We just need to have one string (URL/host-info) that we can replace with another. We can store the info in a file, as a command-line param or whatever. We just need it to be simple.
UPDATE: Turn out that I fully did not understand the build system. As Dan pointed out we use webpack to package the solution. Using a loader we could swap out our configuration-settings in the code. We ended up using a simple string replacement loader (string-replace-webpack-plugin) since env variables are not suitable for this solution.
What you're describing are usually known as environment variables. You generally maintain a specific set of environment variables for each context your application is developed or run in.
For instance you might have an APP_HOST environment variable which would be set differently at your local machine, than it would at your server.
Most programs that run on the server can read the environment variables directly, but because React apps run in the client's browser, you'll have to make them aware of the appropriate environment variables before they are served.
The easiest way to do this is with envify.
Envify will allow you to reference environment variables from your frontend code.
// app.js
const host = process.env.APP_HOST;
fetch(host);
Envify is a Browserify transform, meaning you'd need to run your code through a command like this.
# define some environment variables
APP_HOST="localhost:3000"
# build the code
browserify app.js -t envify -o bundle.js
What comes out the other side would be:
// bundle.js
var host = "localhost:3000";
fetch(host);
If you use Webpack, there's a similar alternative in the form of envify-loader.
Using Linux, I want to redirect access to files according to the app accessing them. For example:
App1: when trying to access "/foo/bar", access /foo1/bar1
App2: when trying to access "/foo/bar", access /foo2/bar2
The way I tough into doing this is by overwriting fopen and related functions using LD_PRELOAD.
My two questions:
Would be this strategy language independent?
Edit: by language independent I mean it will not be affected by what language app1 and app2 are built.
There are better approaches, or maybe something already existing to achieve my goal?
Thanks
Edit: to simplify the question, think of /foo as symbolic link which resolves differently according to the app trying to access it.
For my particular case, the best option is to use LD_PRELOAD to overwrite open, open64, etc.
If you are facing a similar problem, check also chroot, jail root and docker container.