I have an .env file that gets pre-loaded via the dotenv pre-load option.
node -r dotenv/config bin/server --hot --local
Is there a way to also pre-load a .env.local or .env.*?
I know it can be achieved in code, but there is a codebase I am working in where I can only reasonably use dotenv preload, doing anything else would require significant modification of the current init source code already in place.
Looking for a solution that would preferably work on Windows 10, but ideally on both Win and OSX
Related
I'm working on a VueJS app that uses env vars in multiple places. It runs on GCloud with nginx serving the files compiled with vue-cli-service build.
When developing everything works well with the env vars set in .env.development and .env.development.local files and used in JS with process.env.VUE_APP_FOO. I'm not using .env.production as some of these env vars shouldn't be committed to our repository.
For the staging and prod environment of all of our projects, we use GCloud's config maps which let us provide env vars to the pods. The issue in this project is that vue-cli-service build requires the env vars to be available at build time, which is not the case in our setup. Config maps are only available in the pods that run the images.
Out of curiosity, I checked the compiled code and all uses of process.env are quite simply replaced by an object with all vue env vars (basic ones + VUE_APP_* ones). So for example,
console.log(process.env.VUE_APP_FOO);
is compiled to
console.log(Object({NODE_ENV: "production", BASE_URL: "/", VUE_APP_FOO: "bar"}).VUE_APP_FOO);
Except that in our case, VUE_APP_FOO is missing from the object as it's not available in the environment when building the app.
So as is, it doesn't seem possible to provide env vars when the server is started or the JS file is served. Is there a way to tell vue-cli-service to not compile the env that way? Or any other alternative?
The only one I found so far is to replace the uses of env vars with their actual value directly in the compiled JS file when the pod starts using sed, but that's pretty ugly and could break easily.
One approach you can follow is to provide the production values when building locally. Another approach is to setup a continuous integration workflow that fetches your environment variables from wherever it is stored, builds the apps and pushes to production servers. I personally work with approach 2.
It is relatively easy to setup a github workflow that runs whenever your code is pushed to a particlar branch
NPM donwloads a lot of files needed for the webpack/libraries. From what i understand, webpack generates a one single bundle file, that contains all code for script working. After that, when i finish building my app, do i need to keep all those jquery/react files and webpack itself? Or should i just delete them?
It's common practice to make a project portable/shareable by following these steps;
Create a package.json and ensure to capture all dependencies,devDependencies and/or peerDependencies.
Add/commit this package.json and package-lock.json files to your version control
Create a .gitignore file and add node_modules to it (in essence, this cuts out that baggage)
For production purpose (e.g. to be shared with client finished product), build the project (which often results into a small files, often within /build or dist). And then you can always push that build file to AWS or Heroku or the clients' servers.
What does the above help you achieve?
You can easily start the project using any machine, as long as you run npm install which reads from your package.json.
Due to clients/coworkers wish I have to switch to npm. The Project was created using Vue CLI and Yarn as default Package Manager.
I first thought no big deal, so I deleted node_modules folder and yarn.lock file. Then I ran npm install and then npm run serve.
It works and compiles like normal, recompiles when I change a file, all good so far but here is the weird part: the changes do not reflect in the browser. I have to refresh the page manually.
I tried to look into config files for vue or webpack. But there are none. No Webpack config, no vue cli config, no build folder.
What I have is:
- .eslintrc.js
- .browserlistrc
- babel.config.js
- postcss.config.js
I dont know what else to look for? Anyone any idea what this might be?
Thanks a lot,
-J
What was the cause in my case(I have Linux OS):
It seems that the value of: max_user_watches
in the /proc/sys/fs/inotify/max_user_watches
is affecting webpack => which is interfering with hot reloading.
To check your actual value
$cat /proc/sys/fs/inotify/max_user_watches
16384
16384 was in my case and it still wasn't enough.
So you will need to increase your value as well.
SOLUTION if you have Linux OS:
Create the file:
sudo nano /etc/sysctl.d/90-override.conf
And populate it with:
fs.inotify.max_user_watches=200000
It seems 200000 is enough for me, you can have a higher value if you want.
After you create the file and add the value, just restart the PC and you should be ok.
Vue CLI depends on #vue/cli-service which acts exactly like Facebook's Create React App (react-scripts).
If you are familiar with create-react-app, #vue/cli-service is roughly
the equivalent of react-scripts, although the feature set is
different.
https://cli.vuejs.org/guide/#cli-service
So what both of them do is "simplify" configuration of the project for you by hiding all the bundling configs (e.g. webpack.config.js) under the carpet. Which is handy in most cases, unless you decide to do something fancy (like switch package manager). In Create React App one can bail out from this behavior by running yarn eject or npm run eject, but on Vue CLI platform you are locked in. So there's no straightforward way to make all underlying config files to appear and fix the faulty bits in them.
To be contunued?..
When I work locally I want to share code among two or more (nwjs and other kinds of) projects. Folder structure:
-project 1
-project 2
-shared code
When releasing the apps I build the external files into a file inside each project app.
But I cannot access files outside the node-webkit/nwjs app folder.
I tried things like:
Setting "chromium-args": "--allow-file-access-from-files" in the manifest file but I think this is default now.
Using file:/// and chromium-extension:/// prepending the relative paths but I think this is only for absolute paths?
Load files dynamically and using path.relative( process.cwd(), "../shared_code/scripts/controllers/searchController.js" );
The user of the app will be able to put it anywhere on his computer.
Is it possible to load js and css files and images from outside the nwjs project folder locally?
nwjs sdk version 0.19.5
I had a similar problem trying to load images outside of the NW.js application. I found that this fixed my issues. Try adding this to your JSON manifest file. This worked for me...
"chromium-args": "--allow-file-access-from-files --allow-file-access --user-data-dir"
Just so you know, I had originally tried this...
"chromium-args": "--allow-file-access-from-files --allow-file-access --user-data-dir --mixed-context"
But it stopped jquery loading.
You can then access files with file:/// and use absolute paths anywhere on the machine.
I hope that helps.
For sharing code, when the code is (or can be) a node module, it's very helpful to be able to npm link it into your project. (It works the same with NW.js apps as for Node.js:)
cd shared-code
npm link
cd ../project-1
npm link shared-code
cd ../project-2
npm link shared-code
I'm using Dropbox on daily basis and put my programming projects in there.
It works great, but once I got many projects my /node_modules dir's are putting
a struggle on Dropbox. It's syncing process starts to be slow and it eats up CPU time.
Is there any way to do a selective sync based on directory name or a mask pattern?
Would be nice to have to a .gitignore equivalent to configure.
Any 3rd party software for that task?
There is a way to selectively sync but I don't believe it has any advanced rules like you're describing:
https://www.dropbox.com/help/175/en
2 way to resolve this problem:
You can put node_modules upper then project directory in files tree. For example:
Project dir: c:/prj/myProjWrapper/myProj
In the c:/prj/myProjWrapper put package.json and make npm install here, NodeJS recursively will find it.
Win and Linux only, not for Mac! In project dir create .ds_store folder (it is not sync by dropbox). Put package.json in to it and do npm install. You must set NODE_PATH=./.ds_store/node_modules;. when starting NodeJS