I'm using DOTENV module, I want to hide my api key on my github repo, however Netlify needs this to build the api call. I want to create a variable that runs on build in Netlify, yet still works in my development version.
In my code I use this:
let unsplashApiKey = process.env.REACT_APP_UNSPLASH;
Which links to an .env in the root, this works in my dev localhost, I can ignore this with gitignore, but then Netlify needs this .env to run its build, because it builds directly from the repo.
I've seen in DEPLOY SETTINGS in Netlify this option: "Environment Variables", it lets me place name and key, seems to be what I need. How then do I make this varible work for my api inside my code?
all I had to do was call the environmental variable this: REACT_APP_UNSPLASH Due to my code being like this:
let unsplashApiKey = process.env.REACT_APP_UNSPLASH;
I was using the unsplashApiKey in the Netlify variable, which was not working. Now I have been able to hide the .env file in my repo, yet have it in my local, therefore hiding the api key from posible nasty people. Happy days!
Related
I have a Vue.js app hosted by AWS Amplify.
In Vue, env vars can be set application-wide by using .env. files.
I currently use such files for development and for production modes, containing different values.
When locally building and serving my application the above works as expected. However, once Amplify deploys my app (in my case I use Amplify's CD feature), these variables are not defined.
I know I can define the same env vars in Amplify, but that would mean I need to manage these values in two places since won't be redeploying while developing. so this seems to be prone to errors (I will need to remember to update the vars on both the application end and amplify console whenever I need to make a change for example).
I wonder if this behavior is expected or is there something I am missing in my setup.
Thanks!
I was also facing the same issue in my React app.
The thing is, you need to have a .env file in your app with all the environment variables.
Why? — The reason behind that is, it generates static HTML, CSS and JS files. Those files can't access process during the runtime.
After adding all the environment variables in Amplify, you have to add one more command in your build stage in App build specification.
You can refer to this official documentation on how to implement this.
If you don't care much about your environment variables, you can use this hack: printenv. This will store all the environment variables of your OS and your application in the .env file.
My config looks something like this:
build:
commands:
- 'printenv >> .env'
- 'npm run build'
I want my web app, that's built with Nuxt.js and Vue.js to access the environment variables that I added in the Netlify environment UI (setting menu).
When I run the local server I have no problem with my code accessing the .env file and retrieving the right codes.
But when I build it with Netlify, it returns undefined.
I have tried adding different prefixes to the env variables since I saw some people do this:
VUE_APP_MY_VARIABLE
NUXT_APP_MY_VARIABLE
VUE_MY_VARIABLE
NUXT_MY_VARIABLE
I do not understand why the variables can not be accessed when the site is live.
If you're missing any information, let me know and I will add it.
Thanks in advance!
Maybe this page can help you!
https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-env
Try:
NUXT_ENV_MY_VARIABLE
instead of
NUXT_MY_VARIABLE
I use Netlify and Nuxt together with dotenv package:
"#nuxtjs/dotenv": "1.4.1",
I have several environments that I build my Vuejs application to. Each of those environments has a different API that I'd like to call.
My ideal scenario is that I have an .env file in the root of each of the servers I deploy to, so that when I deploy my build, the Vue app looks at the .env that is in it's environment specific location and pulls the relevant API path variables from inside of it.
This way, I can build the app once, and have it deployed on multiple servers and I don't need to make a specific build for each server.
I've tried using dotenv-webpack but it seems that the .env that's included in the build is just from whatever the value is when I create the build, and not fetched from any .env on the individual servers.
I've found that I can use axios to GET a js file from /static but this doesn't really seem like the cleanest approach.
I have a project where we use font awesome 5 library. I followed the instructions that are written here and added an .npmrc file with my auth token.
Is this a safe behaviour to put this in a repo? I want the devs to have access to it, but if the repo goes public we might be exposing the token.
What is the best practice in situation like this?
UPDATE 2021-05-02
This answer remains questionable - see the comments below. I no longer have access to a private ($paid) npm account anymore, so I can no longer test to answer questions.
Perhaps try #konyak's answer.
It is definitely NOT a safe behavior to put the token in any git checked file, including .npmrc.
Below are the steps your team can take to safely leverage your npm token.
There are two different environments to consider:
each developer's local dev machine
the app's deployment platform
local dev
Following the Global Set Up instructions you linked to in your question, is not the solution.
Create the .npmrc file similar to the "Per project" instructions, but substitute your real token with a variable name, prefixed by $. ie:
#fontawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=$TOKEN
npm will detect an environment variables file named .env. So, in a .gitignored .env file, add your secret key value pair, ie:
TOKEN=ABC123
You can also prefix the variable name with "NPM_CONFIG_", according to the npm-config docs, ie:
NPM_CONFIG_TOKEN=ABC123
Now, when the dev runs npm i, font-awesome dependencies will load from the private repo.
NOTE: Don't follow the current npm-config docs about the environment variables syntax! See this stack overflow answer, ie:
👎 BAD npm-config ENVIRONMENT VAR SYNTAX 👎
${TOKEN}
👍 GOOD npm-config ENVIRONMENT VAR SYNTAX 👍
$TOKEN
app deployment platform
Do all the steps from the local dev section above, PLUS:
create an environment variable on the platform with the same name as in the .npmrc file.
If your app host is Netlify, see their Build Environment Variables docs.
https://docs.npmjs.com/using-private-packages-in-a-ci-cd-workflow
Export your secret token into your session, e.g., export NPM_TOKEN="00000000-0000-0000-0000-000000000000"
Inside your ~/.npmrc, add //registry.npmjs.org/:_authToken=${NPM_TOKEN}
I put the relevant config line, with the token in plaintext, in a .npmrc file in my home directory. You can then use filesystem / OS permissions to protect it, avoid accidentally checking it in to source control, and NPM will read it automatically with no further action on your part.
In the project directory, we have .npmrc with a scoped registry declaration only (#fontawesome:registry=https://npm.fontawesome.com/), and a separate ci.npmrc which has that plus the variable-substitution authToken assignment:
#fontawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=$FONTAWESOME_NPM_TOKEN
The CI build job just has to replace .npmrc with ci.npmrc before doing anything with npm, and set a secret environment variable with an auth token assigned to the appropriate service account.
I am wondering if there is a way to change a 'root path' for my site's api which is a string value of a variable at build time in a vue application. I would like the value of my api path to be read in during the build process and set. This functionality exists in angular, and I am wondering if it exists in vue. I have checked the docs and do not see anything similar. This blog describes the functionality that I am after in angular. If there is nothing similar how does one change the root path of an api from for example 'localhost:8080' to 'example.mysite.com' at build time so that the right path is set when building/deploying to production and not needed to be changed manually? Thanks for any help!
You could set it in an environment variable during the build and access it via process.env.MY_VARIABLE.
During development you would use a package like https://www.npmjs.com/package/dotenv and have a .env file with your environment variables but in production you would set it in your CI or build script.
Bare in mind if this is browser based then you will need to replace
process.env references with the explicit values which you can do with most bundlers.