I opened an old Gatsby project on a new computer to try and complete, but when I tried to set up my development, I ran into this issue:
ERROR
Problems with gatsby-source-contentful plugin options:
spaceId: undefined - "spaceId" is required
accessToken: undefined - "accessToken" is required
host (default value): "cdn.contentful.com"
environment (default value): "master"
downloadLocal (default value): false
localeFilter (default value): [Function]
forceFullSync (default value): false
pageLimit (default value): 100
useNameForId (default value): true
not finished onPreInit - 0.030s
I did some research and saw this post which said they could run the development server but not the Gastby build. I updated my Contentful API key, my .env doc, and made sure the master environment was checked off but I'm still having this issue. Does anyone know what to do?
Here's my Github repo.
On your gatsby-config.js file, you oughta load the env vars
if your defined under the .env file the following snippit should work so your spaceID and accessToken aren't undefined.
At the begining of your gatsby-config.js add:
require("dotenv").config()
You can reference this
https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/
You need to set up the environment variables. Follow these steps:
Add the following snippet in your gatsby-config.js:
require("dotenv").config({
path: `.env.${process.env.NODE_ENV}`,
})
dotenv comes as a dependency of Gatsby so you don't need to install anything extra.
Once the snippet is in your gatsby-config.js, Gatsby will take your .env.development and .env.production when running gatsby develop and gatsby build respectively. Note that is the default behavior, you can customize the target environment file by changing the NODE_ENV variable or by setting a path in the snippet above
NODE_ENV is equal to development and production, that's why Gatsby takes each file in different commands.
Place your environment variables in both .env.development and .env.production files:
CONTENTFUL_ACCESS_TOKEN=yourAccessToken
CONTENTFUL_SPACE_ID=yourSpaceId
Target the environment variables while using the gatsby-source-contentful:
{
resolve: `gatsby-source-contentful`,
options: {
spaceId: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
},
},
Related
i have this code on my webpack.config.js file
const environment = process.env.ENVIRONMENT;
const uridb = `mongodb+srv://admin:admin#development-db.${process.env.URI}.mongodb.net/development?retryWrites=true&w=majority`
and inside my task definition you can see that the env do exist
but when i see the logs on my container i get undefined
MONGO_CONNECTION_STRING mongodb+srv://admin:admin#development-db.undefined.mongodb.net/development?retryWrites=true&w=majority
how do i make my envs reachable?
Your Webpack config file is something that is used at build time. Webpack is a build tool. You need to move that ${process.env.URI} environment variable lookup into your actual application code so that it can be resolved at run-time.
I’m using #quasar/quasar-app-extension-dotenv for loading environment variables during the development from .env file on my localhost.
In the production I’m hosting the project on Netlify and when I set the environment variables in the Netlify dashboard it is undefined during the program run.
My quasar.extensions.json looks like this:
{
"#quasar/dotenv": {
"env_development": ".env",
"env_production": ".env",
"common_root_object": "none",
"create_env_files": false,
"add_env_to_gitignore": false
}
}
Any ideas how to load variables from server variables?
Thanks
I had the same issue. I found a solution to this, it's not the best but working.
I also used the #quasar/quasar-app-extension-dotenv extension to read the local environment variables from a file. I added this file to gitignore.
After this I wrote a little script which creates a text file with the same name as my local file. It looks like this (I used create-file package to do this):
var createFile = require('create-file')
let contentToWrite = process.argv[2]
createFile('NameOfLocalFile', contentToWrite, function (err) {
if (err) console.log(err)
else console.log('succesfully wrote file')
})
With this script you can pass the environment variable as a parameter.
On netlify I added a build command like this:
(npm run-script writeEnvFile API_KEY=******) && (quasar build || { sleep 120; false; })
So all in all the env file keeps out of github but we pass it's data via the build command. In my case I just need the firebase key to get all my other keys from firebase.
So if you need more keys, you have to extend the script a little bit.
I know this is a messy solution, but it was the only one I found for this issue.
We are working on a Dockerized NextJS application that is thought to be built once and deployed to several environments for which we will have different configuration. This configuration is to be set in the Docker container when deployed as environment variables.
In order to achieve this, we are using next.config.js file, splitting the vars on serverRuntimeConfig and publicRuntimeConfig as suggested here, and we are getting the values for the environment variables from process.env. i.e.:
module.exports = {
serverRuntimeConfig: {
mySecret: process.env.MY_SECRET,
secondSecret: process.env.SECOND_SECRET,
},
publicRuntimeConfig: {
staticFolder: process.env.STATIC_FOLDER_URL,
},
}
The problem we have is that these variables are not set on build time (when we run next build), as they are environment specific and supposed to be set on deployment. Because of this, the build fails complaining about the missing variables.
Making a build per environment is not an option: as referred before, we want to build it once (with next build), put the output of the build in a docker container, and use that docker container deploy in several environments.
Is there any way to solve this so that the application builds without environment vars and we pass them afterwards on runtime (deployment)?
We finally found the issue.
We were importing code in a helper that was being used in the isomorphic side and was relaying on serverRuntimeConfig variables, being then required on build time in order to create the bundle.
Removing the import from the helper fixed the issue.
I am deploying a Nuxt App with Zeit/Now. In the development phase I was using a .env file to store the secrets to my Contentful CMS, exposing the secrets to process.env with the nuxt-dotenv package. To do that, at the top of the nuxt.config I was calling require('dotenv').config().
I then stored the secrets with Zeit/Now and created a now.json to set them up for build and runtime like so:
{
"env": {
"DEMO_ID": "#demo_id"
},
"build": {
"env": {
"DEMO_ID": "#demo_id"
}
}
}
With that setup, the build was only working for the index page and all of the Javascript did not function. Only when I added the env-property to the nuxt.config.jsfile, the app started working properly on the Zeit-server.
require('dotenv').config()
export default {
...
env: {
DEMO_ID: process.env.DEMO_ID
},
...
modules: [
'#nuxtjs/dotenv'
],
...
}
BUT: When I then checked the uploaded Javascript files, my secrets were exposed, which I obviously don't want.
What am I doing wrong here? Thanks for your help.
You aren't necessarily doing anything wrong here, this is just how Nuxtjs works.
Variables declared in the env property are used to replace instances of process.env.MY_ENV, but because Nuxt is isomoorphic, this can be both on the server and client.
If you want these secrets accessible only on the server, then the easiest way to solve this is to use a serverMiddleware.
As serverMiddleware is decoupled from the main Nuxt build, env variables defined in nuxt.config.js are not available there.
This means your normal ENV variables should be accessible, since the server middleware are run on Node.
Obviously, this means these secrets won't be available client side, but this works if you have something like a Stripe secret key that you need to make backend requests with.
We had a similar problem in our project. Even, We created a nuxt project from scratch and checked to see if there was a situation we skipped. We noticed that, while nuxt building, it copies the .env variables into the utils.js in the nuxt folder. Through the document here, we changed the modules section in nuxt.config.js as follows,
modules: ['# nuxtjs / apollo', '# nuxtjs / axios', ['# nuxtjs / dotenv', { only: ['']}]],
Then we noticed that .env variables are not exposed.
I hope it helped.
Our nuxt version is "nuxt": "^ 2.13.0".
Also, some discussion over here.
I need to use different config values when deploying my application vs when in development. How to set this up with Dart 2 using webdev serve and webdev build ?
The build.yaml allow you to add config variable that are different in development than in production.
Here is an example of a build.yaml
targets:
$default:
sources:
include: ["lib/**", "web/**"]
builders:
build_web_compilers|entrypoint:
release_options:
dart2js_args:
- -Dhost=https://example.com
- -DenableFeatureOne=true
Then you can get the value of host and enableFeatureOne by using:
final host = const String.fromEnvironment('host', defaultValue: 'http://localhost:8080');
So in development the host will be http://localhost:8080 and in production after compiling with dart2js it will be https://example.com.
Same for enableFeatureOne.
release_options will be only used when compiled with the build command or with pub run build_runner build -o build --release
Development config should be the default one since there is no way to pass different config value to ddc. A workaround is to make a GET request on a file with this value when your app start.