Why my .env variables are not working in Parcel? - javascript

I'm trying to use env variables in Parcel parcel-bundler version 1.12.4 but it returns undefined. Here is my folder structure. As you can see the .env file is in the same folder as the package.json file.
This is the variable I'm using API_KEY=myapikey and I'm trying to console log it from my index.js file like this console.log(process.env.API_KEY).
I just want to know if I'm doing something wrong or if need to open an issue.
Thanks in advance!
Edit: I fixed it by deleting the .cache folder.

You have to install npm i dotenv package
Add the following command to index.js file:
require('dotenv').config()
this imports your credentials from .env package and now you can access and use it in your project.

Related

How to make local .json file accessible from remote machine or folder?

In my program I have .json file that is stored in my local folder. I also have Javascript code in the same folder that accessing this .json file and reads it's values. To access the file I am using:
const data = require('../JS/countries.json');.
The program works perfectly on my local machine, and I have published it on github repository(https://github.com/TheRadioDept/technical-question). However, after I tried cloning this repository into another folder, I faced an error:
code: 'MODULE_NOT_FOUND',
requireStack: [ '/home/me/progs/clonedRepo/technical-question/main.js' ]
[ '/home/me/progs/clonedRepo/technical-question/main.js' ] is the path to cloned repository, it is not original storage of .json file and javascript code.
That means that code can only be executed on my local machine from the original folder where I store my JS and JSON files. Is there a way I can run this code and access it in another folder or computer?
main.js is at the root of your repository. The import
const data = require('../JS/countries.json');
depends on the name of the folder containing your repository. Usually the name of the folder and the name of your repository are similar. That means that most users clone your repository into a folder technical-question and the import fails.
You can remove this dependency with
const data = require('./countries.json');
Now, the name of the parent folder isn't used in the import.
try npm install in your terminal (npm is a package manager). This will install all the modules needed for your project with the help of package.json file which is probably already present in your project. In package.json you can find all the dependancies for your project and npm is going to install all of them in a new folder named node_modules. Hope this makes sense.

process.env is undefined after using .env file in node.js

I have created an application using node.js & protractor. the following start script is used in the package.json file for running my application
"start": "protractor conf/conf.js"
I have created a .env file and add one sample variable TestManaf='1234556'
But it shows error like 'the value is undefined'.
After this, I have directly added TestManaf='1234556' in the start script.
"start": "set TestManaf='1234556' && protractor conf/conf.js"
It is working fine. Why .env file not supported? is any additional configuration required?
You need to install the package dotenv
use the following command:
npm install dotenv
First thing you should do in your file is load the dotenv env vars, put this line as soon as possible in your import hierarchy.
require('dotenv').config()
You can see more information about using this package in the documentation

Use of node with eslint in a javascript webapp

I have a javascript application with eslint set-up and the needed Node modules, all in the same project folder. Node is only used so that eslint works.
The whole thing is pushed to GitHub and I'm noticing now the whole node-modules is getting uploaded with it (17mb approx), again I'm just using node for eslint only.
I feel like I'm doing something wrong and that I have set-up my project incorrectly. Should I be using .ignore here in git or something else, or I'm I overthinking this.
Thanks
Create a .gitignore file at the root of your project. Add node_modules to it. Remove the node_modules folder from your local repo. Recommit the changes. Then push up again.
Then run npm i on your terminal/command line to get the eslint packages back on your local computer. Now the directory will no longer be pushed on future commits.
You should use .gitignore for pushing redundant file to your repo here
https://git-scm.com/docs/gitignore
Here is the sample .gitignore file for Node from github
https://github.com/github/gitignore/blob/master/Node.gitignore

Linking local library into Angular 5 Project

What i want is to have a library locally that when i change it those changes are reflected in the project that is using the library.
i have check out this library here in my local machine: https://github.com/manfredsteyer/angular-oauth2-oidc
So what i'm doing right now, is that i go to the library directory and then
npm link
And then get in my project directory and do
npm link angular-oauth2-oidc
The library folder appears inside my node_modules folder but i can't manage to use it, since when i start the app ng serve it says:
Cannot find module 'angular-oauth2-oidc'
I'm importing like this:
import { OAuthModule } from 'angular-oauth2-oidc';
I've tried to add the the path under the compilerOptions of the tsconfig.json file but haven't been sucessful.
Any ideas on what i'm missing here? I've tried several suggestions i've found on angular github issues but none solved my problem.
Thanks in advance
npm link in a package folder will create a symlink in the global folder {prefix}/lib/node_modules/ that links to the package where the npm link command was executed
Dont use npm link to add a library to your project, use npm install :
npm install angular-oauth2-oidc --save
You have to install it not just link it, so use this line to with flag --save to ensure that it will be saved in your package.json
npm install [package_name] --save
You can get the package name from the source website or from
https://www.npmjs.com/package/angular2
When you say:
So what i'm doing right now, is that i go to the library directory and
then npm link
Do you mean you are executing npm link in the folder you cloned the repository in? Because if so, that's likely your issue as that's the source directory and not what's actually published as a package. You must build the library, change directory into the distribution folder for the package, and then run npm link. Then when you run builds of that library, any Angular applications with that linked will automatically have the last version of your build in their node_modules.
Also, in your Angular applications where you are using the linked library you'll want to make sure you are setting preserveSymlinks to true in your angular.json.
While you can create multiple projects (e.g. an Angular app and an Angular library) under one Angular project to make this process a bit easier, I prefer to separating these two since I like one git repository to present one module.
First, you need to link your modules to your project's package.json file. Here's how to link files locally in general:
Local dependency in package.json
Linking a plain Typescript library is pretty straight forward as you just create an entry point (usually index.ts) file and export everything you want from there. This file needs to be in the same folder as the package.json file in your project.
An Angular library is a bit different as angular modules needs to be compiled before it can be properly exported. If you just import the module to your project without compiling you will get an error stating this: cannot read property 'ɵmod'. This happens at least at the time of writing this.
So we need to compile the library and then link it:
open two terminal windows
in the first terminal, go to your Angular library's root folder and run ng build --watch
check the output folder of the compiled module, usually something like dist/[library name]
change your Angular project's package.json to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
run npm install in the same folder
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
Otherwise you'll get errors like Error: Symbol MyComponent declared in /path/to/library/my.component.d.ts is not exported from my-angular-library
in the second terminal, go to your Angular project's root folder and run ng serve. Make sure you serve the project only after you have installed the local dependency.
You should now be able to use components, services etc. exported via your library module.
TL;DR
for the library ng build --watch
make the library dependency to point to the output folder e.g. "my-angular-library": "file:../my-angular-library/dist/my-angular-library"
npm i
Add path to your Angular project's tsconfig.json e.g:
compilerOptions: {
"paths": {
"my-angular-library": ["./node_modules/my-angular-library"]
}
}
ng serve

How do I use dotEnv when there is no .env file?

I have a project that locally has a .env file. When I set up the environment variables on my local machine I use:
import dotEnv from "dotenv";
dotEnv.config();
It find the .env and loads up all the variables. When I push the project to Heroku, I don't push up the .env file. I expected dotEnv to understand that, but I get this error:
{ Error: ENOENT: no such file or directory, open '.env'
How do I get around that I am not pushing up a .env file? What is the proper way to use .dotEnv?
I'm a contributor to the dotenv module. You can safely ignore this error. It is returned for your convenience in case something isn't working as expected.
I don't much like the solution proposed here: https://github.com/motdotla/dotenv/issues/126 It amounts to conditionally requiring /dotenv depending on an environment variable being set. This seems brittle and like extra work to me.
The neatest solution for this I've found doesn't pollute my production code with any references to dotenv at all. Just include dotenv in your dev dependencies and run your app locally using the node require switch:
$ node -r dotenv/config ./lib/index.js
This is the same way you might load babel-register.
Now your code doesn't care about where the env variables come from. Works with nodemon, etc. too. You can even specify an alternate env file:
$ node -r dotenv/config your_script.js dotenv_config_path=/custom/path/to/your/env/vars
It's all on the npm page for the package.

Categories