We Keep Coding

Env vars in Svelte - __myapp is not defined

I'm trying to set up env vars on my Svelte app to hide an API key.
I followed the instructions in this article [https://medium.com/dev-cafe/how-to-setup-env-variables-to-your-svelte-js-app-c1579430f032].
Here's the structure of my rollup.config.js
import { config as configDotenv } from 'dotenv';
import replace from '#rollup/plugin-replace';
configDotenv();
export default {
...
plugins: [
replace({
__myapp: JSON.stringify({
env: {
isProd: production,
amplitude_api_key : process.env.amplitude_api_key
}
})
}),
]}
When I try to access the env var by calling: __myapp.env.API_KEY
I get this error: __myapp is not defined

It seems that the nesting is the problem. I was able to get it work using this syntax:
replace({
'process.env.isProd': production,
'process.env.amplitude_api_key': process.env.amplitude_api_key
}),
and then use process.env.isProd in your app. Of course, if you like the __myapp thing, you could use __myapp instead of process on the left side of the replace function in your rollup config.

Even though this thread is solved, I want to point out that your remark "to hide an API key" is invalid because .env on clientside is always parsing right into your sourcecode. So in other words: your api-key is being parsed (and exposed) in the source once you build.

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;

How do I update file paths in VueJs if I'm using CLI3

I'm a bit lost and need some help with VueJs. I am using Vue CLI3 and have created a new Vue project where eveything is working, no errors in the console etc. However, after running the build task, the copy in my dist folder shows as a blank page. I have learnt that this is to do with needing to update the assetsPublicPath: and remove the '/' forwards slash. To do this I have been told you have to update the config file index.js but there is no such file in my proect? I have also been told there is a config folder, but there isnt?
Therefore how do I update the following
from assetsPublicPath: '/',
to assetsPublicPath: '',

Take a look at the documentation. If you don't have the vue.config.js just create it. I would look something like this:
// vue.config.js
module.exports = {
// Any of the config options will come here. Everything you'll need is in the docs
publicPath: ''
}

Only create a vue.config.js in your project and use inside .File is automatic loaded by vue cli serve. After publish your hosting or server file will must work it.
module.exports = {
css: {
extract: true
},
publicPath: process.env.NODE_ENV === "production" ? "" : "",
outputDir: "dist"
};

Sails.js -- Accessing local.js environment settings in controllers

In production I have AWS credentials stored as heroku config variables.
In development I want to include the config details in config/local.js, but how do I access the config details in a controller?
local.js contains:
module.exports = {
aws_key: "...", aws_secret: "..."
}
In my controller I have tried aws_key, config.aws_key, and others - but no luck. Is there a main app namespace that I can use to scope into the properties exported by local.js?
I am new to sails and I feel like this should be straight forward - any help would be appreciated.

Solution found. Step 3 was where I was having trouble.
tl;dr
What I didn't realize was that the module.exports.thing makes the thing object available through sails.config.thing. Good to know.
1) I created a new file at config/aws.js with the contents
// Get heroku config values
module.exports.aws = {
key: process.env.AWS_KEY,
secret: process.env.AWS_SECRET
}
2) In local.js put the actual AWS creds (this won't end up in the repository since sails automatically ignores local.js using gitignore).
aws: {
key: actual-key,
secret: actual-secret
}
This allows for local testing where we don't have access to the heroku config settings, while protecting these values from being exposed in a github repo.
3) Now, to access in the controller:
var aws_config = sails.config.aws;
AWS.config.update({
accessKeyId: aws_config.key,
secretAccessKey: aws_config.secret
});

How to add configuration settings to locals on Sails.js

I'm building a webapp using Sails.js and I'm wondering how to have different configurations on development and production modes. I thought that I just had to put a configuration key in config/local.js but it doesn't work. Here's an example of what I'm trying to do:
config: {
linkedIn_key: 'abcde',
linkedIn_secret: '13mcas',
linkedIn_url: 'http://localhost:1337/user/login'
}
I tried to access config in the UserController.js but I wasn't able to get the value. What is the right way to do it?
Best regards,
João

It should appear in sails.config. You can also try to create a new file: linkedin.js under the config folder and place your configurations there:
var linkedIn = {
key: 'abcde',
secret: '13mcas',
url: 'http://localhost:1337/user/login'
};
module.exports.linkedin = linkedIn;
and access it in your controller via
sails.config.linkedin