Я создал приложение с помощью Create-React-App на стороне клиента и с помощью Express на стороне сервера. Я создал файл .env для переменных среды, в котором будут храниться DB_USER и DB_PASSWORD.
На стороне сервера я хотел бы использовать соединение mongoose, а переменные .env будут учетными данными при подключении к серверу mongodb.
Я получаю неопределенные переменные в консоли терминала, когда я process.env.DB_USER. Вместо этого я получаю переменные среды моей ОС и переменные NodeJS. Тем не менее, я вижу переменные, когда я * console.log(process.env.DB_USER) на стороне chrome консоли / клиента.
Я попытался установить dotenv, dotenv-webpack и настроить webpack.config, но, похоже, ничего не работает. Я также добавил REACT_APP_* в качестве префикса к моим переменным, но все еще неопределенные значения.
Также, когда я использую dotenv и задаю require('dotenv').config() в своем файле index.js, он жалуется на зависимость fs ??
Я просто не могу заставить переменные среды считываться в папке сервера, в идеале было бы хорошо, чтобы эти переменные читались в папке клиента и сервера. Кто-нибудь сталкивался с этой проблемой раньше? Я только учусь использовать Create-React-App и webpack. Ваша помощь будет оценена !!!
server.js
//server.js
const express = require('express');
const path = require('path');
const router = require('./routes/routes.js')
const app = express();
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const user = process.env.REACT_APP_DBUSER;
const password = process.env.REACT_APP_DBPASSWORD;
//tells express frontend will reside in client folder
app.use(express.static(path.join(__dirname, '../build')));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
console.log('node', process.env);
console.log(user);//this is undefined
//connect to mongoDB
mongoose.connect(`mongodb://${user}:${password}@ds141812.mlab.com:41812/note_app_db`, { useNewUrlParser: true });
let conn = mongoose.connection;
conn.on('error', console.error.bind(console, 'connection:'));
conn.once('open', () => {
console.log('connected to database');
});
//pass in routes from router const
app.use('/',router)
module.exports=app;
webpack.config
const webpack = require('webpack');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const config = {
entry: __dirname + '/client/js/index.jsx',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx', '.css']
},
module: {
rules: [
{
test: /\.jsx?/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['@babel/preset-env', '@babel/react']
}
},
{
test: /\.(png|jpg|svg|gif|mp4|mov)$/,
use: [{
loader: 'file-loader',
options: {
name: '/assets/[name]-[hash:8].[ext]'
}
}]
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
}
]
},
devServer: {
publicPath: '/',
contentBase: __dirname + '/build',
port: 5000,
historyApiFallback: {
index: 'index.html'
}
},
plugins: [
new CopyWebpackPlugin([
{ from: './client/index.html', to: './index.html' }
]),
new Dotenv({
path: './.env',
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify("development"),
REACT_APP_DBUSER: JSON.stringify(process.env.REACT_APP_DBUSER),
REACT_APP_DBPASSWORD: JSON.stringify(process.env.REACT_APP_DBPASSWORD)
}
})
]
}
module.exports = config
index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
require('dotenv').config({path: '../../.env'});//is this how it supposed to look like???
ReactDOM.render(<App />, document.getElementById('root'));
package.json
{
"name": "note_app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/core": "^7.1.5",
"@babel/preset-env": "^7.1.5",
"@babel/preset-react": "^7.0.0",
"axios": "^0.18.0",
"babel-loader": "^8.0.4",
"body-parser": "^1.18.3",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^1.0.1",
"dotenv": "^6.1.0",
"dotenv-webpack": "^1.5.7",
"env-cmd": "^8.0.2",
"express": "^4.16.4",
"file-loader": "^2.0.0",
"mongoose": "^5.3.11",
"node-sass": "^4.10.0",
"nodemon": "^1.18.6",
"react": "^16.6.1",
"react-dom": "^16.6.1",
"react-modal": "^3.6.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"webpack-cli": "^3.1.2"
},
"scripts": {
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"webpack": "webpack --mode development",
"dev": "npm run webpack && nodemon bin/www"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
.env file
REACT_APP_DBUSER="username"
REACT_APP_DBPASSWORD="password"
структура файла
