I currently have the following folder structure and will deploy in Heroku. I will remove if it's duplicated but I couldn't find proper answer
-Client
-Google.js (contains CLIENT id)
-App.js
-package.json
-env
server.js
models
routers
package.json
env
My Google.js contains app id and env is prefixed with REACT_APP_CLIENT_ID
I have used proxy https://localhost:5000 in Client package.json
My server.js - I am accessing static client files here
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const path = require('path')
const app = express();
require('./database');
require('dotenv').config()
app.use(bodyParser.json());
app.use(cors());
const users = require('/api/users');
app.use('/api/users', users);
app.use(express.static(path.join(__dirname, '../build')))
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '../build'))
})
-----
const port = process.env.PORT || 5000;
app.listen(port, () => {
console.log(`Server started on port ${port}`);
});
When I have 2 env files, It runs perfectly. But when I try to run only with my server and deploy in heroku, client env cannot be accessed from server.
I understand client and server env should be separated. But is there any way, I could ACCESS Google.js env file(present in client folder) from single env file in my root folder?
My Google.js
import React from 'react';
import ReactDOM from 'react-dom';
import GoogleLogin from 'react-google-login';
const responseGoogle = (response) => {
console.log(response);
}
ReactDOM.render(
<GoogleLogin
clientId={`${process.env.REACT_APP_CLIENT_ID}`}
buttonText="Login"
onSuccess={responseGoogle}
onFailure={responseGoogle}
cookiePolicy={'single_host_origin'}
/>,
document.getElementById('googleButton')
);