Running netlify dev and access .env file contents - netlify

I have a Gatsby project with a couple functions. I'd like to migrate some of my variables to env variables. Setting these up in Netlify is a breeze.
However, locally I'm trying to test my functions using netlify dev. It starts up fine, but as soon as I hit my endpoint, there are issues because I'm accessing non-existent properties on process.env. I have tried adding a .env and .env.development file in the root of my project (where I run netlify dev) but it doesn't seem to be reading them. The documentation I've ready only mentions netlify.toml files, but the whole point is to not have it in source control.
Is there something I need to do for the command to pick up my .env file?

Configure your build to grab your .env and copy it over to the location that is used to deploy the website.
An example would be to add the copy step to your build command:
// netlify.toml
[build]
command = "do-build && cp .env functions/"
Although this will only work for local deploys with the netlify command. If you want to do it with their automated deploys, there is no way around checking in the .env file.
To avoid that, you are expected to set those values through the project UI in Netlify's website.
You can create environment variables in the toml file or in our UI. You might use the latter to keep sensitive values out of your repository.
https://docs.netlify.com/configure-builds/file-based-configuration/#inject-environment-variable-values

Related

build the application, and an environment variable error occurs when accessing after build

I am using Nuxt3 and Prisma to build the application, in the development environment, they run fine, when I execute the npm run buildcommand, there is also no output error.nuxt3 outputs the .output folder.
build
But when I use the command start to run, prisma prompts me environment variable could not be found.
error
I recreated the .env file under the output .prisma folder, but it doesn't work.
recreated
How can I solve the environment variable in production problem?
Your .env file should be in the same directory as your schema.prisma file. I'm not sure what framework/library you are using, but it looks like it emits a schema.prisma file within node_modules, which is not where your environment variables should go. Wherever you actually have your schema.prisma is where the .env file should go.
Take a look at the Prisma documentation about environment variables if you need help configuring where it's supposed to go: https://www.prisma.io/docs/guides/development-environment/environment-variables

"You didn't include a 'package.json' file in your source bundle..." while the file is there ? Beanstalk

So we have 3 environments on this project and our dev and stg environment deployments work fine, but when I created a Beanstalk and went through the "eb init" and changing the gitab-ci.yml file I get the Instance deployment: You didn't include a 'package.json' file in your source bundle. The deployment didn't install a specific Node.js version. error and I just don't know what it wants from me. I hit ls on the runner commands and it obviously shows the package.json file in the root and it contains the defined Node version + it's exactly the same for dev and stg :O
All the envs are the same Node version, they all have the same setup, but for some reason it won't deploy to prod. Best thing about it is when I manually zip all the files and upload it via the console it all works fine so I don't know what to do. Any advice? Thanks in advance :)

Read process.env at runtime webpack

I'm building my function with webpack that get deployed to AWS lambda.
I currently have to specify the environment variable at compile time for them to be available as per webpack doc.
This is awesome for web deployment, but for node I might want to change the values passed at build, by changing the env file i'm sourcing from. For example .env.staging or .env.production without having to rebuild the application or directly on my lambda environment.
How can I achieve this if possible? I'm using webpack4

create-react-app local and dev environment variables

I have .env.local with
REACT_APP_BACKEND_BASEURL=http://localhost:8080/
and .env.development with
REACT_APP_BACKEND_BASEURL=http://deployedserverurl:8080/
how do I select the correct env file on start?
As it is now, it prefers the dev env file over the local.
npm start --env=local doesnt seem to work, am I missing something?
Environment variables are imported depending on the current environment. There is a built in special environment variable with create-react-app called NODE_ENV. In summary, when you run npm start the NODE_ENV variable is set to development and set to production when running a npm run build. Therefore, if you create a .env.development in the root of your project, when you run npm start these variable definitions will be searched for in the environment.
Also, ensure you're using them correctly by using process.env.REACT_APP_APP_BACKEND_BASEURL.
If you need more information regarding all of the details about the different type of .env files, check these out from the React Docs:
env: Default.
.env.local: Local overrides. This file is loaded for all environments except test.
.env.development, .env.test, .env.production: Environment-specific settings.
.env.development.local, .env.test.local, .env.production.local: Local overrides of environment-specific settings.

deploying production mode with Vue-cli created project

Bit of a n00b question:
I created project with vue-cli using webpack.
On my windows machine I run "npm un dev" and I get a frontend server with HMR and so on.
Now I want to deploy my app to a production machine - ubuntu on DigitalOcean.
What are the steps I must take? I'm not very familiar with the logic of how it's supposed to work. If my ubuntu machine has NODE_ENV set to production, it won't install any of the devDependancies and i'm not able to build anything. So I guess I'll have to change that? If yes then it doesn't make any sense since it's a production machine.
And do I have to create another node/express server to serve index.html? Won't it supposed to work out-of-the-box somehow?
Thanks :)
TL;DR Build on your local machine and everything you need will be outputted in the ./dist/ directory, just copy the contents over to the webroot on your production server and you're good to go.
The webpack template handles most of the stuff for you.
Step you need to take to release:
Run npm run build on your local machine
Copy the contents of the generated ./dist/ directory to your server webroot
That's it!
When you run npm run build, the pre-configured build script sets the node environment to production, and builds with only the stuff that should be in production, it also optimizes the code and removes debug capabilities. When it comes to dependencies webpack takes care of that and includes them in the generated javascript files located in the ./dist/js/, so you need not concern yourself with copying over the node_modules/ directory either.
It also copies over everything in your static directory and src/assets directory to the ./dist/ directory to be prepare for a release. And resolves all the references to the new path generated by webpack.
The production server should not be concerned with building the vue app, run the build command on your local machine to keep dev dependencies away from your production server. I recommend against installing webpack and other dev tools on your production server. It just pollutes the server with things not needed there.
Some development tools could potentially produce alot of issues on production servers. So best practice is to never install them.
You could optionally create your own release script that uses ftp or rsync, whatver you prefer to copy everything in the ./dist/ directory to the production server webroot. This could be a script in bash, if on windows, run it in git bash or something similar for example.
Hope that cleared things up, congrats on your first vue release!

Resources