process.env doesn't contain ENV VARS when `npm run build` (Ubuntu) - javascript

I'm deploying VueJS project. There is a file that contain API URLs where I use process.env. If API_URL is defined in production only so I can use localhost on my development server and API_URL in the production.
const apiRoot = process.env.API_URL || 'http://127.0.0.1:8000'
export default {
root: apiRoot,
auth: {
jwt: {
create: urljoin(apiRoot, "auth/jwt/login/"),
refresh: urljoin(apiRoot, "auth/jwt/refresh/"),
},
loginPage: "/login",
me: urljoin(apiRoot,"users/me/")
}
}
On the server, I've added EXPORT API_URL='my.api.url' and then I ran npm run build. Then I realized it is still using 127.0.0.1:8000 so I also added the ENV VAR to /etc/environment file.
Again, no success. I've rebooted the server.
In cmd line I can do this:
echo $API_URL
'my.api.url'
How to make it work? Or how to debug this issue?

The solution is simple. Each ENV VAR must start with VUE_APP_.
So instead of setting API_URL
I need to set VUE_APP_API_URL

Related

Change .page URL based on environment I need to run the suite in

We have been building our automation suite using our staging environment, but are going live soon and want to be ready to tell the project where to run (staging, production).
The only difference between the sites in the environments is the URL. My question is, from start to finish, how can I set the .page URL via a CLI option?
Right now, I have created an environment config file that holds our staging and production URLS and then I call the data into my test files. This is fine for now, but I will need to create a script with an option to set the environment at runtime without having to do a manual find and replace before kicking it off.
I've looked around online and find, what I believe, to be code snippets and general instructions, but I'm not a dev at heart and go crossed eyed. If I could get an ELI5 for this, that would be awesome.
Example of what I'm doing now:
const env = require('../environment_variables.json')
fixture `blog`
.page `${env.production}`
And then I change production to staging or vice versa manually before kicking off the suite.
Since the project will run from CICD, I would like to be able to do something like this in my CLI and script:
testcafe env=production
The env value will then be set where the .page call is for every test file.
Thanks!
There are different ways of doing this. I've used environment variables successfully in this situation, so I'll share this solution since it will solve your problem.
I create config.json in the root of the project:
{
"baseUrl": {
"dev": "https://dev.com/",
"staging": "https://staging.com/",
"prod": "https://prod.com/"
}
}
Then I create two helper functions somewhere like Helpers/env.js:
import config from '../config';
function getEnv () {
return process.env.TESTCAFE_ENV;
}
function getBaseUrl () {
return config.baseUrl[getEnv()];
}
export { getEnv, getBaseUrl };
Then in my test files in Tests/:
import { getBaseUrl } from '../Helpers/env';
const baseUrl = getBaseUrl();
fixture `Test Suite`
.page(baseUrl);
And that's it. Then when I need to run tests on the dev, I execute:
$ TESTCAFE_ENV=dev testcafe
for staging:
$ TESTCAFE_ENV=staging testcafe
and for production:
$ TESTCAFE_ENV=prod testcafe
In v1.20.0 and later, TestCafe offers a way to specify the baseUrl in the test run configuration. You can use this approach along with environment variables, see the following example:
.testcaferc.js
const BASE_URL_MAP = {
dev: 'https://dev.com/',
staging: 'https://staging.com/',
prod: 'https://prod.com/'
};
module.exports = {
baseUrl: BASE_URL_MAP[process.env.TESTCAFE_ENV]
};
Alternatively, you can use different configuration files for each of the required setups using the --config-file option.

next.js environment variables are undefined (Next.js 10.0.5)

I am coding a website with Next.js and I tried to add google Tag Manager.
I followed the tutorial on the Next.js Github example but for some reasons I can't access to my environment variables.
It says my variable is undefined.
I created a file .env.local on my project folder (at the same level as components, node_modules, pages, etc)
In this file I created a variable like this (test purpose) :
NEXT_PUBLIC_DB_HOST=localhost
And on my index page I tried this code :
console.log("test ", process.env.NEXT_PUBLIC_DB_HOST);
But in my console I get a "test undefined".
I tried to put my variable into an .env file instead, without success.
What I am doing wrong ?
This envs just works in Server Side. To access this envs in Client Side, you need declare in the next.config.js
This way:
module.exports = {
reactStrictMode: true,
env: {
BASE_URL: process.env.BASE_URL,
}
}
Create .env (all environments), .env.development (development environment), and .env.production (production environment).
Add the prefix NEXT_PUBLIC to all of your environment variables.
NEXT_PUBLIC_API_URL=http://localhost:3000/
Use with prefix process.env
process.env.NEXT_PUBLIC_API_URL
Stop the server and restart it:
npm run dev
I hope it works.
This solution for latest version of nextJs (above 9)
Restarting the server worked for me.
Edit & save .env.local
Stop the server and restart it, npm run dev
You should get an output on the next line like this:
> klout#0.1.0 dev
> next dev
Loaded env from [path]/.env.local
For those using NextJS +9 and looking for environment variables in the browser, you should use the NEXT_PUBLIC_ prefix. Example:
NEXT_PUBLIC_ANALYTICS_ID=123456789
See documentation for reference.
After spending countless hours on this, I found that there is a tiny little paragraph in both the pre and post nextjs 9.4 documentation:
(Pre-9.4) https://nextjs.org/docs/api-reference/next.config.js/environment-variables (same as this answer)
Next.js will replace process.env.customKey with 'my-value' at build time.
(^9.4) https://nextjs.org/docs/basic-features/environment-variables
In order to keep server-only secrets safe, Next.js replaces process.env.* with the correct values at build time.
Key words being BUILD TIME. This means you must have set these variables when running next build and not (just) at next start to be available for the client side to access these variables.
This is my next.config.js file.
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
env: {
BASE_URL: process.env.NEXT_PUBLIC_SITE_URL,
},
};
module.exports = nextConfig;
Restart the server and it worked fine. using Nextjs 12.1.0 with typescript
In my case, Im pasting REACT_APP_API_URL instead of NEXT_PUBLIC_API_URL.
Adding with the most recent version of the documentation on this, v12+.
Using the next.config.js file you can specify server and client variables:
module.exports = {
serverRuntimeConfig: {
// Will only be available on the server side
mySecret: 'secret',
secondSecret: process.env.SECOND_SECRET, // Pass through env variables
},
publicRuntimeConfig: {
// Will be available on both server and client
staticFolder: '/static',
},
}
You can still use an env.local file, and pass the variable in to the next.config.js file. For example:
publicRuntimeConfig: {
DB_URL: process.env.DB_URL
}
And then you can access the variable like this:
import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();
publicRuntimeConfig.DB_URL;

Simple and elegant way to override local file If exists?

Looking for elegant and simple solution to have "local configuration override" files.
The idea is to be able to have local configuration that will not ask to be added to git repository every time.
For that I need to include local.config.js if it exists.
I have global app configuration in config.js with configuration like
export const config = {
API_URL="https://some.host",
}
and config.local.js
export const config = {
API_URL="https://other.address",
}
there's .gitignore:
config.local.js
Difficulty:
I do not want to add a node module to project just for this one thing. I believe there should be an elegant way to do this in one or few lines, but have not found any so far.
Things that I tried:
1.
try {
const {
apiUrl: API_URL,
} = require('./config.local.js');
config. API_URL =apiUrl;
} catch (e) {
}
require does not work inside try{} block.
2.
const requireCustomFile = require.context('./', false, /config.local.js$/);
requireCustomFile.keys().forEach(fileName => {
requireCustomFile(fileName);
});
does not work.
3.
export const config = require('./config.local.js') || {default:'config = {...}'}
does not work.
4.
Using .env and settings environment variable: I need to override whole array of configuration values. Not one by one.
This solution uses process.argv. It is native to node as documented here and does not use .env
It inspects the command values used to start the app. Since these should be different between your local and production environments, it's an easy way to switch with no additional modules required.
command prompt to start your node app:
(this might also be in package.json and incurred via npm start if you're using that approach.)
$ node index.js local
index.js of your node app:
var express = require('express');
var config = require('./config');
if (process.argv[2] === 'local') {
// the 3rd argument provided at startup (2nd index) was 'local', so here we are!
config = require('./config_local');
}
var app = express();
// rest of owl…

nodejs - error self signed certificate in certificate chain

I am facing a problem with client side https requests.
A snippet can look like this:
var fs = require('fs');
var https = require('https');
var options = {
hostname: 'someHostName.com',
port: 443,
path: '/path',
method: 'GET',
key: fs.readFileSync('key.key'),
cert: fs.readFileSync('certificate.crt')
}
var requestGet = https.request(options, function(res){
console.log('resObj', res);
}
What I get is Error: self signed certificate in certificate chain.
When I use Postman I can import the client certificate and key and use it without any problem. Is there any solution available?? I would also like to be given some lights on how postman handles the certificates and works.
Option 1: Disable the warning (useful for dev)
From your question I'm guessing you are doing this in development as you are using a self signed certificate for SSL communication.
If that's the case, add as an environment variable wherever you are running node
export NODE_TLS_REJECT_UNAUTHORIZED='0'
node app.js
or running node directly with
NODE_TLS_REJECT_UNAUTHORIZED='0' node app.js
This instructs Node to allow untrusted certificates (untrusted = not verified by a certificate authority)
If you don't want to set an environment variable or need to do this for multiple applications npm has a strict-ssl config you set to false
npm config set strict-ssl=false
Option 2: Load in CA cert, like postman (useful for testing with TLS)
If you have a CA cert already like the poster #kDoyle mentioned then you can configure in each request (thanks #nic ferrier).
let opts = {
method: 'GET',
hostname: "localhost",
port: listener.address().port,
path: '/',
ca: fs.readFileSync("cacert.pem")
};
https.request(opts, (response) => { }).end();
Option 3: Use a proper SSL Cert from a trusted source (useful for production)
letsencrypt.org is free, easy to set up and the keys can be automatically rotated. https://letsencrypt.org/docs/
You can fix this issue using NODE_TLS_REJECT_UNAUTHORIZED=0 in the terminal or inserting the following line within the JS file.
process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = 0;
Beware that this a hack and it should not be used in production.
If you are using windows then run the following command in the command prompt:
set NODE_TLS_REJECT_UNAUTHORIZED=0
After that, npm install <my-package> will work.
for Nodemailer:
adding
tls: {
rejectUnauthorized: false
}
solved my problem.
Overall code looks liek this:
nodemailer.createTransport({
host: process.env.MAIL_SERVER,
secure: false,
port: 587,
auth: {
user: process.env.MAIL_USERNAME,
pass: process.env.MAIL_PASSWORD
},
tls: {
rejectUnauthorized: false
}
}
You can write command npm config set strict-ssl false
you just add at the start of your code this line:
process.env.NODE_TLS_REJECT_UNAUTHORIZED='0'
And everything solved, but in any case it is not recommendable, I am investigating the solution of https://letsencrypt.org/
Turning off verification is quite a dangerous thing to do. Much better to verify the certificate.
You can pull the Certificate Authority certificate into the request with the ca key of the options object, like this:
let opts = {
method: 'GET',
hostname: "localhost",
port: listener.address().port,
path: '/',
ca: await fs.promises.readFile("cacert.pem")
};
https.request(opts, (response) => { }).end();
I put a whole demo together of this so you can see how to construct SSL tests.
It's here.
Do:
Better use this if running a node script for standalone purpose,
process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = 0;
Don't:
instead of changing all default request process.
npm config set strict-ssl=false
i.e., don't alter your node config, else it will apply to all your requests, by making it default config. So just use it where necessary.
The node application needs to have the CA certificate added to the existing CA (Mozilla) certificates.
We start node using a service, and add the environment variable, NODE_EXTRA_CA_CERTS
[Service]
Restart=always
User=<...>
Group=<...>
Environment=PATH=/usr/bin:/usr/local/bin
Environment=NODE_ENV=production
Environment=NODE_EXTRA_CA_CERTS=/<...>/.ssl/extra_certs.pem
WorkingDirectory=/<...>
ExecStart=/usr/bin/node -r dotenv/config /<.....>/server.js dotenv_config_path=/<....>/.env
This way we can use the same application to call services using popular CAs or our own self signed certs, and we don't have to turn off SSL checking.
In linux there is an easy way to get the certificate, use this post: Use self signed certificate with cURL?
You create your certificate using:
$ echo quit | openssl s_client -showcerts -servername server -connect server:443 > cacert.pem
then copy that .pem file as the extra_cert.pem. You can only have one pem file, but you can append multiple pem files into one file.
I hope this helps someone, it took me a while to find the different parts to make this work.
For what it's worth, after spending a day and a half trying to track this one down it turned out the error was caused by a setting on my company's firewall that IT had to disable. Nothing anywhere on the internet did anything to fix this.
process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = 0; Even though its not worked ...
Not Able to Install Cypress:
S C:\Cypress> export NODE_TLS_REJECT_UNAUTHORIZED='0' node app.js
export : The term 'export' is not recognized as the name of a cmdlet, function, script
file, or operable program. Check the spelling of the name, or if a path was included,
verify that the path is correct and try again.
At line:1 char:1
export NODE_TLS_REJECT_UNAUTHORIZED='0' node app.js
+ CategoryInfo : ObjectNotFound: (export:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException

How to use in node properties for deployment and local usage

I've created node application which I can run locally and in the cloud
Now I want that it be done somehow smoother and cleaner ,so I try to put some property in config.json file to check if I want to deploy the app or use it locally but I need to update manually this property before I change the propose , there is a better way to do it with node ?
let runnerServer = `http://localhost:8060/service/runner/${server.address().port}`;
if (cfg.isHosted) {
blogServer = `http://${serverName}/service/runner/${server.address().port}`;
}
and in the conig.json I've the field isHosted which I change manually(true/false) if I want to deploy or not...
update
maybe I can use process.env.PORT but this is just one example that I need to use in my code , currently I've several of fork that need to konw if Im in deployment or running locally ..
One option is to use use node's in built object called process.env (https://nodejs.org/api/process.html) and use two config files per se. This approach is somewhat similar to what you are doing but may be cleaner
config.localhost.json
config.production.json
then by setting properties on this object based on environment such as process.env.NODE_ENV = 'localhost' or process.env.NODE_ENV = 'production', you could read the corresponding file to import the configurations.
var config = require('./config.production.json');
if(process.env.NODE_ENV === 'localhost')
{
config = require('./config.localhost.json');
}
So to set this environment variable when running locally on your dev box , if
OSX - then on terminal export NODE_ENV=localhost
WINDOWS - then on cmd line set NODE_ENV=localhost
An easy way to solve this, if every environment configuration can be in the repo:
config.json:
production: {
// prod config
},
staging: {
// staging config
},
devel: {
// devel config
}
config.js:
const environment = process.env['ENV'] || 'devel';
module.exports = require('./config.json')[environment];
then in your package.json you could add the following scripts:
package.json
// npm stuff
scripts {
prod: "ENV=production node index.js",
stage: "ENV=staging node index.js",
dev: "ENV=devel node index.js"
}
and with this setup, you can run each configuration with the following commands:
production: npm run prod
staging: npm run stage
devel: npm run dev

Categories