I'm trying to use environment variables in "nested" dependencies of a project bundled with Parcel, using .env files, but I'm getting undefined instead of the desired value.
According to the docs, NODE_ENV is automatically set to "production" when building, else it's set to "development", so it will load .env.local either .env.production depending on that value.
Consider my file structure:
./
├── .env.local
├── .env.production
├── src
│ ├── index.html
│ ├── scripts
│ │ ├── main.js
│ │ └── APIService.js
└── package.json
My script for launching the app in package.json is this:
"scripts": {
"start": "parcel src/index.html"
}
… and the src/index.html file loads the main.js file with a simple tag:
<!DOCTYPE html>
<!-- ... -->
<script src="main.js" defer></script>
If I try to log an environment variable set in .env.local in main.js, it will work perfectly because it is the JS entry point, but if I try to get the same exact variable into an imported module like APIService.js, I get undefined:
// main.js
import APIService from "./APIService";
console.log(process.env.API_ENDPOINT); // ✅ http://localhost:5001/functions/app
// APIService.js
console.log(process.env.API_ENDPOINT); // ❌ undefined
Am I missing something?
How to get access to the environment variables inside imported files?
PS: I've already tried to use the dotenv package in addition, but without success.
Related
For reference, here is the file structure of the app:
project
│ README.md
│ shopify.app.toml
| Dockerfile
| heroku.yml
| package.json
| package-lock.json
│
└───web
│ │ index.js
│ │ vite.config.js
│ │ package.json
│ │ package-lock.json
│ │ shopify.web.toml
│ │
│ └───frontend (changed to public as a test)
│ │ App.jsx
│ │ index.html
│ │ index.jsx
│ │ package.json
│ │ package-lock.json
│ │ shopify.web.toml
│ │ vite.config.js
│ └─── components
│ └─── pages
| | index.jsx (home page)
│ └─── public
│ └─── static
│ └─── styles
│ └─── assets
│
| └─── helpers
| └─── middleware
I am trying to get my Shopify app to work on Heroku. I used their CLI which gives you a predefined file structure and includes specific files for functions etc. I've been using their script "shopify app dev" to run the app, but you cannot run the CLI commands in Heroku. Therefore, I need a way to run it locally with npm start. If I point to the App.jsx file using "node ./web/frontend/App.jsx", I get an error:
Unknown file extension ".jsx"
I installed Babel but did not add any configurations (I was comparing to a regular react app created with npx create-react-app my-app).
If I use react-scripts, it needs a public folder. I changed the "frontend" folder to be named as "public" and changed all instances in the app where it used "frontend" as a folder name. The command I used to utilize react-scripts is:
cd web && react-scripts start
In which I get a different error:
Could not find a required file.
Name: index.js
Searched in: C:\Users\username\Documents\dev\my-app\web\src
Which means now I need a src file that contains index.js, however, the file structure has the index.js in the same directory as index.html.
I'm trying not to eject the app but I feel like that may be the option I have to go with. I just feel that the Shopify company should have made the app to where it can run locally and perhaps I am missing something. Please help and thank you in advance!
After much troubleshooting, I finally was able to get the app create from the new Shopify CLI to run on a Heroku server (this was the initial intent of getting it to run locally). I will post the process in case anybody else runs into the same issue.
Instead of creating a Docker container per the instructions in the Heroku.md file, I made a Heroku app based on the Heroku documentation. The steps goes as follows:
Step 1: Create the Heroku App
cd into the app/project folder (this would be the web folder for the template)
git init
heroku git:remote -a myheroku-app-name
git add .
git commit -am "initialize app"
git push heroku master
Note: Make sure you are only pushing the web folder and not the app in its entirety.
Note: My first time around this did not work because I had already created a container in Heroku for the Docker image. This will onlly work in a Heroku application, not a container.
Step 2: Setup the package.json scripts in the web directory
"start":"npm run serve",
"heroku-postbuild": "cd frontend && npm install && npm run build",
"serve": "cross-env NODE_ENV=production node -r dotenv/config index.js"
Step 3: Update variables (if applicable)
My app had these variables set as follows:
const DEV_INDEX_PATH = ${process.cwd()}/public/;
const PROD__INDEX_PATH = ${process.cwd()}/public/dist/;
The actual values need to be:
const DEV_INDEX_PATH = ${process.cwd()}/frontend/;
const PROD_INDEX_PATH = ${process.cwd()}/frontend/dist/;
Step 4: Allow Heroku to configure PORT
In my package.json I deleted
"engines": {
"node": ">=16.13.0"
}
from both the web directory and the frontend directory after getting this error:
https://github.com/keystonejs/keystone-classic/issues/3994
You also need to change the PORT variable in
app.listen(PORT)
to
app.listen(process.env.PORT)
since Heroku dynamically creates the PORT. Do not put in a PORT value in your config vars.
Of course, this is all in addition to setting your environmental variables in Heroku i.e. HOST, SCOPES, SHOPIFY_API_KEY, SHOPIFY_API_SERET. You may also need to npm i cross-env and dotenv.
I am trying to add an eslint configuration to my project. I do not want to add it in the root folder but in the .vscode one.
I have the following folder structure :
my-poney-project
├── .vscode
│ └── my-poney-project.code.workspace
│ └── .eslintrc.json
├── lib
│ └── source.js
└─┬ tests
└── test.js
and I want to lint file which are present in the lib and tests folder, with the eslint configuration in the .vscode folder.
Currently my my-poney-project.code.workspace file contains the following :
{
"folders": [{
"path": ".."
}],
"settings": {
"eslint.alwaysShowStatus": true,
"eslint.debug": true,
}
Do you know how could I indicate to eslint to use the .vscode\.eslintrc.json whereas it is not in a parent folder of the files I am trying to lint (lib and test)?
For example, is there a parameter to add in the my-poney-project.code.workspace ?
References which may be related to this question :
https://eslint.org/docs/user-guide/configuring/configuration-files#cascading-and-hierarchy
https://eslint.org/docs/user-guide/configuring/configuration-files#personal-configuration-files-deprecated
I would be grateful for any comments or responses,
Cheers !
Question
Is it possible to configure a global, custom entry point to be used by require for all subfolders in a Node.js project?
Rationale
When working in Node.js, I like having my index.js file as the topmost file in each subfolder in my IDE.
However, depending on the IDE and the way it sorts files, this is not always possible (for example, VSCode has several sorting options available, and none of them can achieve this).
To achieve that, I prefix it with _index.js, but then lose the built-in capability of require to recognize it as the default entry point.
Although this can be mitigated by adding a package.json into each subfolder, with a main property directing to the entry point file - I'd like to know if there's a way to define a "global" custom entry point, be it in the topmost package.json or using some npm package which I'm not aware of.
Example
Let's say I have the following folders structure, and assume that our IDE sorts files alphabetically:
MyApp
├── app.js
├── package.json
├─┬ featureA
│ ├── func1.featureA.js
│ ├── func2.featureA.js
│ └── index.js
└─┬ featureB
├── func1.featureB.js
├── func2.featureB.js
└── index.js
To keep index.js as the topmost file, we prefix it with an underscore, and use a package.json for each subfolder to define it as an entry point:
MyApp
├── app.js
├── package.json
├─┬ featureA
│ ├── _index.js
│ ├── func1.featureA.js
│ ├── func2.featureA.js
│ └── package.json
└─┬ featureB
├── _index.js
├── func1.featureB.js
├── func2.featureB.js
└── package.json
The package.json for both featureA and featureB is identical:
{
"main": "_index.js"
}
That package.json is necessary so that we can use require in the following way in app.js:
// app.js
const featureA = require('./featureA');
const featureB = require('./featureB');
But can these two package.json files be replaced with some "global" alternative?
In the ssr vue (server side rendering for vuejs) documentation there's a code structure example containing a webpack build step:
https://ssr.vuejs.org/en/structure.html
The structure looks like this:
src
├── components
│ ├── Foo.vue
│ ├── Bar.vue
│ └── Baz.vue
├── App.vue
├── app.js # universal entry
├── entry-client.js # runs in browser only
└── entry-server.js # runs on server only
I am missing a main template(in rails or expressjs lingo a layout) which is supposed to contain the
<!--vue-ssr-outlet-->
marker.
Or am I missing something?
In SSR there is not a layouts folder. Your template (default) is in your App.vue file.
I have a project that contains modules for both the server and client of my application, which are each built using webpack. I'm using Karma with Jasmine to test my client (which uses Angular) and I would like to use Jasmine to test the server, which is written in typescript, too.
Unfortunately, the only guides that I could find online used jasmine-node (which to be untouched for the past few years) instead of jasmine-npm. Can anyone suggest a way that I can use Jasmine, or an alternative, for testing within my project?
I've tried writing a jasmine.json file, or editing the one generated by jasmine with the init cli command, however this doesn't seem to work with typescript files.
At the moment, my project's structure is like so:
├── client
│ ├── karma.conf.js
│ ├── protractor.conf.js
│ ├── src
│ ├── tsconfig.json
│ └── webpack.config.js
├── server
│ ├── src
│ ├── tsconfig.json
│ └── webpack.config.js
└── node_modules
Its definately possible to use jasmine for your server side tests. Follow these steps and you'll be fine:
1) In your package.json add the following dev dependencies:
"jasmine": "latest",
"jasmine-core": "latest",
2) Setup your jasmine.json so that it will include all files you want to run tests on, etc.
{
"spec_dir": "dist/dev/server/spec",
"spec_files": [
"unit/server/**/*[sS]pec.js"
],
"helpers": []
}
3) Add unit.ts that will bootstrap your testing process:
const Jasmine = require("jasmine");
let j = new Jasmine();
j.loadConfigFile("./jasmine.json");
j.configureDefaultReporter({
showColors: true
});
j.execute();
Now all you have to do is compile and run your resulting unit.js in nodejs.