Use process.env variable in npm script - heroku

I have a node.js app which i'm building/hosting on Heroku. I would like to use the environment variables set on Heroku when building my application. for example in package.json
"scripts": {
"postinstall": "build --option="MY_HEROKU_ENVIRONMENT_VARIABLE"
}
is it possible to read those variables when the script is run?
Thanks in advance
/Eric

No, this is not possible. What you can do instead is define a Node script to run, and have that script itself use environment variables.
For instance, what if your postinstall target was just node postinstall.js, and then inside of your postinstall.js script you read the process.env.MY_HEROKU_ENVIRONMENT_VARIABLE value?

Related

Run yarn/npm scripts from a subfolder's package.json

I maintain a monorepo for the react-querybuilder package. I'm merging in the documentation website code under the /website directory, but not as a workspace (those are in /packages/*).
The /website directory has its own package.json with the docusaurus * scripts (start/build/deploy/etc.). I'd like to have scripts in the root /package.json that execute the scripts in /website/package.json. Currently I have something like this in /package.json:
{
"scripts": {
"website:install": "cd website && yarn",
"website:start": "cd website && yarn start",
"website:build": "cd website && yarn build",
"website:deploy": "cd website && yarn deploy"
}
}
Is there a better, more generic way to do that? This way I have to name every script twice, once in /package.json and once in /website/package.json.
(I tried --cwd, but that doesn't actually run scripts defined in that other directory's package.json. It runs the scripts defined in the root package.json from the other directory. E.g., yarn --cwd website build is effectively the same as yarn build, at least in my case.)
I thought there might be a yarn flag like --cwd (--pkg? --config?) that actually runs the scripts defined in the other directory, or maybe you'd have to specify a file.
Am I missing something?

Create React App env variables undefined when using Craco build in Heroku

I'm deploying an Express app (Node.js/React) to Heroku and have set my env vars in Heroku using the config vars in Settings in the Heroku Dashboard. On the server side, I can access them using process.env without any problems. However, in my client, my process.env vars are returning undefined.
I have prefixed them with REACT_APP, and the issue seems to be related to the craco build script in my client/package.json that is called during the build stage of the Heroku deployment. If I set this to react-scripts build, the environment variables behave as expected, however, my TailwindCSS config then fails.
I can also have a .env file in the client, but I need different values depending on the stage of the Heroku pipeline, and NODE_ENV is always "production" once deployed to Heroku so I can't think of a way to have different values depending on the stage.
Is there a way for craco build to get the REACT_APP vars from the Heroku config vars during deployment in the same way react-scripts build does?
There is a npm package specifically build to use .env variables with craco: https://github.com/djdmbrwsk/dotenv-cra

Is there difference `yarn dev` and `yarn run dev`?

To run the local server for development I normally use yarn run dev.
But it seems yarn dev provides same function. Is this command just a short alias for yarn run dev?
I couldn't find info for yarn dev in documents.
You can leave out run from this command.
Basically, not only dev command, you can directly use any scripts by name without keyword run.
So, yarn dev and yarn run dev both do the same.
From the docs:
https://classic.yarnpkg.com/en/docs/cli/run/
It’s also possible to leave out the run in this command, each script can be executed with its name
And a similar example is given for yarn 2
https://yarnpkg.com/cli/run
Same thing, but without the "run" keyword :

How do I send baseUrl as a parameter with Cypress.io

I am researching switching from Protractor to Cypress.io.
I have some tests up and running, however, I want to be able to send the baseUrl as a parameter as I can with Protractor.
I have tried:
$ npm run cypress:open --config "baseUrl=myUrl" --still uses the baseUrl from my config file.
$ npm run cypress:open --env "baseUrl=myUrl" --still uses the baseUrl from my config file.
and a host of other things, none of which work quite right.
I want to be able to pass a parameter to my command which gives me the flexibility to choose which environment I am running my tests in. I can do this with Protractor, with a command like this:
$ ng e2e --suite testSuite --baseUrl myUrl
What is the equivalent for Cypress.io?
You have to set the env variable CYPRESS_baseUrl
CYPRESS_baseUrl=[your baseUrl] npm run cypress:open should do it for you
I think the correct way to do this is:
$ npm run cypress:open -- --config "baseUrl=myUrl"
Otherwise, the config parameter is passed to npm instead of cypress. Notice the extra --
Good luck!
Brendan's answer is correct.
I would like to add that
$ npm run cypress:open --config "baseUrl=myUrl"
may not be working since you try to propagate some configuration into a command inside your package.json.
If instead you'd do for example:
$ ./node_modules/.bin/cypress run --config baseUrl=myUrl
it should work just fine.
This is good to know since it will let you use additional CLI options as well (which you do not know ahead of time).
PS: --env wouldn't work for baseUrl since baseUrl is a built-in configuration value and not a regular env variable.
What I did was simply:
export CYPRESS_BASE_URL=SOME_OTHER_URL
yarn cypress run
This will override the baseUrl configuration. See: https://docs.cypress.io/guides/guides/environment-variables.html#Overriding-Configuration

Add Laravel .env variable to Vue component

I would like to get access to an .env variable using Vue JS.
In my .env file I have added the 'MIX_' prefix to the var.
MIX_VAR=key
And then in the vue component, I have in the created():
console.log(process.env.MIX_VAR);
I keep getting undefined as the result.
I have tried clearing config cache, but still getting the same issue. Any ideas?
in windows :
thats worked for me without any require in webpack.mix
... just add a new variable in env file with this prefix : MIX_
MIX_API_URL=http://laravel:8000
but need to restart php artisan serve and also restart npm run watch....
let api_url = process.env.MIX_API_URL;
console.log("my env variable:");
console.log(api_url);
in linux or docker:
i didnt use them yet
You must build your JS for the env variables to be replaced. You can do this with npm or yarn
https://laravel.com/docs/5.7/mix#running-mix
Pulled from the official docs # https://laravel.com/docs/5.6/mix#environment-variables
Environment Variables
You may inject environment variables into Mix by prefixing a key in your .env file with MIX_:
MIX_SENTRY_DSN_PUBLIC=http://example.com
After the variable has been defined in your .env file, you may access via the process.env object. If the value changes while you are running a watch task, you will need to restart the task:
process.env.MIX_SENTRY_DSN_PUBLIC
The most important thing to remember is that you have to use Laravel Mix for this to work. Mix is what is injecting the environment variable.
process.env.MIX_VAR / process.env.MIX_STRIPE_KEY
It's will work without any settings. Just run this command
npm run prod
This works for me
https://laravel.com/docs/8.x/mix#environment-variables
However, you will need to restart the task if the environment variable's value changes while the task is running:
e.g If Watch is running then re-run it.
npm run watch

Resources