We Keep Coding

Not able to initialize firebase app using the env variable [duplicate]

I am building my web app in Next.js, and I have been doing some tests. What I am doing is to push my code to GitHub and from there deploy the project on to Vercel.
I am using Google APIs dependencies which require some Client ID and Client secret for me to be able to send emails using node-mailer from my client side to inbox (I'm doing this via a contact form).
However, on localhost everything is working fine but when I deploy onto Vercel, I am not able to make my contact form send mails (an issue that has to do with environment variables).
I tried Options A and B
Option A
Created a .env.local, added my variables there, then accessed them in next.config.js as shown in the code below (console log shows that I can access the variables anywhere on my app)
.env.local
env:{
CLIENT_URL:'vxcxsfddfdgd',
MAILING_SERVICE_CLIENT_ID:'1245785165455ghdgfhasbddahhhhhhhhm',
MAILING_SERVICE_CLIENT_SECRET:'Rdfvcnsf4263543624362536',
MAILING_SERVICE_REFRESH_TOKEN:'000000',
USER_EMAIL_ADDRESS:'yesyesyesyesyesyes#gmail.com',
}
next.config.js
module.exports = {
env:{
CLIENT_URL: process.env.CLIENT_URL,
MAILING_SERVICE_CLIENT_ID: process.env.MAILING_SERVICE_CLIENT_ID,
MAILING_SERVICE_CLIENT_SECRET: process.env.MAILING_SERVICE_CLIENT_SECRET,
MAILING_SERVICE_REFRESH_TOKEN: process.env.MAILING_SERVICE_REFRESH_TOKEN,
USER_EMAIL_ADDRESS: process.env.USER_EMAIL_ADDRESS,
}
}
If I do like Option A as per above, then send emails does not work on localhost neither does it work on Vercel.
Option B
I put my variables in next.config.js as below add the next.config.js to .gitignore then push to GitHub.
module.exports = {
env:{
CLIENT_URL:'http://localhost:3000',
MAILING_SERVICE_CLIENT_ID:'7777777777777777777777',
MAILING_SERVICE_CLIENT_SECRET:'R123456789',
MAILING_SERVICE_REFRESH_TOKEN:'1123456789',
USER_EMAIL_ADDRESS:'seiseibaba#gmail.com',
}
}
Option B works on localhost, but if I add environment variable on Vercel as shown in here then send mail does not work.
How can I set this to work properly for me?

Simply creating a .env.local (or .env) file with your environment variables should be enough to be picked by Next.js on the server. There's no need to add anything to your next.config.js.
# .env.local
CLIENT_URL=vxcxsfddfdgd
MAILING_SERVICE_CLIENT_ID=1245785165455ghdgfhasbddahhhhhhhhm
MAILING_SERVICE_CLIENT_SECRET=Rdfvcnsf4263543624362536
MAILING_SERVICE_REFRESH_TOKEN=000000
USER_EMAIL_ADDRESS=yesyesyesyesyesyes#gmail.com
However, if you need to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_.
NEXT_PUBLIC_CLIENT_URL=vxcxsfddfdgd
This will be available on the browser using:
process.env.NEXT_PUBLIC_CLIENT_URL
For more details about environment variables in Next.js refer to https://nextjs.org/docs/basic-features/environment-variables.
The same principle applies to environment variables you create in Vercel (or any other hosting service), adding the prefix will make them available to the browser.
You can add environment variables in Vercel through the Environment Variables page of your Project Settings, that match the variables in your .env.local.
For more details about environment variables in Vercel refer to https://vercel.com/docs/concepts/projects/environment-variables.

How to properly set environment variables in Next.js app deployed to Vercel?

I am building my web app in Next.js, and I have been doing some tests. What I am doing is to push my code to GitHub and from there deploy the project on to Vercel.
I am using Google APIs dependencies which require some Client ID and Client secret for me to be able to send emails using node-mailer from my client side to inbox (I'm doing this via a contact form).
However, on localhost everything is working fine but when I deploy onto Vercel, I am not able to make my contact form send mails (an issue that has to do with environment variables).
I tried Options A and B
Option A
Created a .env.local, added my variables there, then accessed them in next.config.js as shown in the code below (console log shows that I can access the variables anywhere on my app)
.env.local
env:{
CLIENT_URL:'vxcxsfddfdgd',
MAILING_SERVICE_CLIENT_ID:'1245785165455ghdgfhasbddahhhhhhhhm',
MAILING_SERVICE_CLIENT_SECRET:'Rdfvcnsf4263543624362536',
MAILING_SERVICE_REFRESH_TOKEN:'000000',
USER_EMAIL_ADDRESS:'yesyesyesyesyesyes#gmail.com',
}
next.config.js
module.exports = {
env:{
CLIENT_URL: process.env.CLIENT_URL,
MAILING_SERVICE_CLIENT_ID: process.env.MAILING_SERVICE_CLIENT_ID,
MAILING_SERVICE_CLIENT_SECRET: process.env.MAILING_SERVICE_CLIENT_SECRET,
MAILING_SERVICE_REFRESH_TOKEN: process.env.MAILING_SERVICE_REFRESH_TOKEN,
USER_EMAIL_ADDRESS: process.env.USER_EMAIL_ADDRESS,
}
}
If I do like Option A as per above, then send emails does not work on localhost neither does it work on Vercel.
Option B
I put my variables in next.config.js as below add the next.config.js to .gitignore then push to GitHub.
module.exports = {
env:{
CLIENT_URL:'http://localhost:3000',
MAILING_SERVICE_CLIENT_ID:'7777777777777777777777',
MAILING_SERVICE_CLIENT_SECRET:'R123456789',
MAILING_SERVICE_REFRESH_TOKEN:'1123456789',
USER_EMAIL_ADDRESS:'seiseibaba#gmail.com',
}
}
Option B works on localhost, but if I add environment variable on Vercel as shown in here then send mail does not work.
How can I set this to work properly for me?

Simply creating a .env.local (or .env) file with your environment variables should be enough to be picked by Next.js on the server. There's no need to add anything to your next.config.js.
# .env.local
CLIENT_URL=vxcxsfddfdgd
MAILING_SERVICE_CLIENT_ID=1245785165455ghdgfhasbddahhhhhhhhm
MAILING_SERVICE_CLIENT_SECRET=Rdfvcnsf4263543624362536
MAILING_SERVICE_REFRESH_TOKEN=000000
USER_EMAIL_ADDRESS=yesyesyesyesyesyes#gmail.com
However, if you need to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_.
NEXT_PUBLIC_CLIENT_URL=vxcxsfddfdgd
This will be available on the browser using:
process.env.NEXT_PUBLIC_CLIENT_URL
For more details about environment variables in Next.js refer to https://nextjs.org/docs/basic-features/environment-variables.
The same principle applies to environment variables you create in Vercel (or any other hosting service), adding the prefix will make them available to the browser.
You can add environment variables in Vercel through the Environment Variables page of your Project Settings, that match the variables in your .env.local.
For more details about environment variables in Vercel refer to https://vercel.com/docs/concepts/projects/environment-variables.

proxy not working for create-react-app in production

I am working with reactjs(create-react-app) to create a dashboard application, In my application i am calling multiple host (for that I have configured multiple proxies in package.json to avoid CORS).
ex- www.app.demo1.com, www.app.demo2.com, www.app.demo3.com...
"proxy": {
"/demo1/api/":{
"target":"www.app.demo1.com"
},
"/demo2/api/":{
"target":"www.app.demo2.com"
},
"/demo3/api/":{
"target":"www.app.demo3.com"
}
}
in application i am calling like-
try{
const host1 = process.env.NODE_ENV === 'production'?
'www.app.demo1.com/demo1/api': '/demo1/api/';
const host2 = process.env.NODE_ENV === 'production'?
'www.app.demo2.com/demo2/api': '/demo2/api/';
const host3 = process.env.NODE_ENV === 'production'?
'www.app.demo3.com/demo3/api': '/demo3/api/';
const resp1 = axios.get(host1)
const resp2 = axios.get(host2)
const resp3 = axios.get(host3)
}catch(){}
in development: when making request to /demo1/api/ it is being proxied to
www.app.demo1.com/demo1/api and i am getting the response. but
in production: I have deployed the application on github pages, although I am getting the below error,
enter image description here
Can anybody help..

Proxies are for development purposes only, and they are handled by webpack-dev-server. On production you need to make the calls to the actual host.
This is created because usually, on development, react is served by a standalone server meant just for that (hence, webpack-dev-server). On production, usually there is a backend (node? ruby? php?) that serves the pages and every call made is going to be to some endpoint with the same hostname.
Example:
In your development environment you have a node server running on port 3001 and your react code running on port 3000. When react fetches /api/user, you actually want http://localhost:3001/api/user, which points to your node server.
In your production environment, you have a server (nginx, maybe?) that forwards all /api calls to your node process, and for everything else it serves your react main index.html file (so you can use react-router, for example). In this case, whenever you request /api/user, this is going to be handled by your web server and routed properly.

How to serve static content in a Node Express container with Docker?

I used express generator to create a project, which automatically includes the public folder in app.js ...
I am trying to display an image in my index.ejs but it is not working ...
what would be the correct url to use?
After looking online it says that the src should be this img src="localhost:8000/images/1.png"
However, I am using docker toolbox, so I'm using the docker quick start terminal and I got it to work by using the docker i.p
so its like img src="127.432.343:8000/images/1.png"
but that IP is specific to my computer I want my co-workers to be able to see the image without having to refactor the code ...
the name of my container is web so I also tried I tried src="web:8000/images/1.png"
But this doesn't work, I feel like it should though, any tips please been trying for hours here.
Also if this were to go to production on a server, what would be the best way to do that? I don't want to have to change the code if I end up uploading it to AWS ...

Any chance you can switch to Docker for Mac? That would allow you to see it on localhost

Static content in express must be in the /public folder. Images under public/images folder. If your image is in that folder, then it should be accessible from the url you're saying.
To show it from an ejs file, you need to only point to images/1.png (use a relative route):
<img src="images/i.png" />
This way, you won't have any trouble uploading it to any production server.
For other computers in your network to test your project, you need to check your computer's local network ip (ipconfig / ifconfig) and test with the ip address port 8000. Not every internal network has it's DNS fully configured.
Also check your computer's firewall to allow tcp traffic through port 8000. Hope it helps.

Parse.com cloud app with client javascript production and development keys

I'm really enjoying learning about web development with Parse.com. I have a cloud app that serves jade templates and a few cloud functions that I'd like to call from .js in the browser.
I'm trying to setup for development and production using the parse docs here, but I've become confused. It's my understanding that I'll have one source tree on my development machine, but two parse applications that I'll deploy to alternatively as development and production.
It seems using the command line parse add <alias> will add credentials to my config/global.json file, but what about my statically served .js files that need to make cloud calls? They start out:
Parse.$ = jQuery;
Parse.initialize("my app id", "my app js key");
If I have only one code repository, I'll have to touch these keys before I deploy to production. That can't be right, can it? If I forget, I'll deploy a broken app. Am I mixed up, or is this just something I must deal with?

For a given session you only need to initialize Parse once. This means that you can do this when the browser loads from a single location.
You could create some sort of build script that modifies the keys.
Alternatively, on load, make a call to a seperate service which holds your keys and which returns the correct key depending on your environment.

In case anyone else has this problem, here's what I did (thanks to #Kenneth for suggesting). The script first checks to see if git has any un-staged changes. It refuses to run unless I've checked in all the changes.
Then it replaces all my dev ids/keys in .js files with production versions, deploys to my parse production app and finally restores .js files to contain their development keys...
#!/bin/bash
if git diff-index --quiet HEAD --; then
echo 'Replacing app id and js keys with production keys'
sed -i '' 's/my-development-app-id/my-production-app-id/g' ./public/*.js
sed -i '' 's/my-development-js-key/my-production-js-key/g' ./public/*.js
parse deploy production
echo 'Changing back to development keys'
git checkout *.js
else
echo 'Must commit all changes before deploying to production'
fi

Similarly, to separate our environments we deployed a Parse app for each one needed (say dev, qa, prod) and used the different resulting urls (the subdomain, but really any different part can do) to tell them apart and discover our environment in the code. We then stored the environment in an attribute.
var APP_ID, JS_KEY;
switch(location.host.split(".")[0]){ //Figure out environment off of the url (subdomain here)
case 'myappprod': //ex: myappprod.parseapp.com
MyApp.env = 'prod'
APP_ID = 'theprodappid';
JS_KEY = 'theprodjskey';
break;
case 'myappqa':
MyApp.env = 'qa'
APP_ID = 'theqaappid';
JS_KEY = 'theqajskey';
break;
default: //otherwise dev
MyApp.env = 'dev'
APP_ID = 'thedevappid';
JS_KEY = 'thedevjskey';
break;
}
You can also hint at the environment (app) you want to use in your local setup using this same technique. Just have the virtual host you use with your web server match all three local urls. For example, with nginx:
server_name myappdev.parseapp.dev myappqa.parseapp.dev myappprod.parseapp.dev;