Сборка приложения react не работает на heroku, но работает на локальном

Я разрабатываю приложение React с помощью webpack локально, и у меня нет проблем с его запуском в режиме dev-server. Я также успешно создал приложение локально и без проблем запустил его с локального сервера. Все внутренние функции работали нормально.

Однако после развертывания на heroku сборка, похоже, не может найти конфигурацию firebase. Это делается с помощью файлов dotenv, чтобы различать переменные тестирования и разработки. Кажется, я не могу найти для этого причину, поскольку я пытался распечатать эти переменные как в режиме dev-server, так и в локальной сборке, и все они распечатывали правильные значения.

package.json

    {
  "name": "direct-compete",
  "version": "1.0.0",
  "main": "index.js",
  "engines": {
    "node": "9.4.0"
  },
  "author": "Malik badaruddin",
  "license": "MIT",
  "scripts": {
    "build:dev": "webpack",
    "build:prod": "webpack -p --env production",
    "dev-server": "webpack-dev-server",
    "dev": "parcel watch public/index.html ",
    "parcel:build": "parcel build public/index.html --out-dir dist",
    "test": "cross-env NODE_ENV=test jest --config=jest.config.json",
    "start": "node server/server.js"
  },
  "dependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-cli": "6.24.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.4",
    "babel-polyfill": "^6.26.0",
    "css-loader": "0.28.4",
    "express": "^4.16.4",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "firebase": "4.2.0",
    "formik": "^1.3.1",
    "history": "^4.7.2",
    "mini-css-extract-plugin": "^0.4.4",
    "moment": "^2.22.2",
    "node-sass": "^4.9.4",
    "normalize.css": "^8.0.0",
    "numeral": "^2.0.6",
    "punycode": "^2.1.1",
    "raf": "3.3.2",
    "react": "^16.5.2",
    "react-addons-shallow-compare": "^15.6.2",
    "react-dates": "^18.1.1",
    "react-dom": "^16.5.2",
    "react-modal": "2.2.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "4.2.2",
    "react-with-direction": "^1.3.0",
    "redux": "3.7.2",
    "redux-mock-store": "^1.5.3",
    "redux-thunk": "^2.3.0",
    "regenerator-runtime": "^0.12.1",
    "sass-loader": "^7.1.0",
    "style-loader": "0.18.2",
    "uuid": "^3.3.2",
    "validator": "8.0.0",
    "webpack": "^4.22.0",
    "yup": "^0.26.6"
  },
  "devDependencies": {
    "cross-env": "^5.2.0",
    "dotenv": "^6.1.0",
    "enzyme": "3.0.0",
    "enzyme-adapter-react-16": "1.0.0",
    "enzyme-to-json": "3.0.1",
    "jest": "^23.6.0",
    "parcel-bundler": "^1.10.3",
    "react-test-renderer": "16.0.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^4.1.4"
  }
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

if (process.env.NODE_ENV === 'test '){
    require('dotenv').config({path:'.env.test'});
} else if (process.env.NODE_ENV === 'development'){
    require('dotenv').config({path:'.env.development'});
}
module.exports = (env) => {
    const isProduction = env === 'production';
    const CSSExtract = new MiniCssExtractPlugin({
        filename: "styles.css"
    });


    return {
        entry: ['@babel/polyfill','./src/app.js'],
        output: {
            path: path.join(__dirname, 'public','dist'),
            filename: 'bundle.js'
        },
        module: {
            rules: [{
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }, {
                test: /\.s?css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]

            }]
        },
        plugins: [
            CSSExtract,
            new webpack.DefinePlugin({
                'process.env.FIREBASE_API_KEY' : JSON.stringify(process.env.FIREBASE_API_KEY),
                'process.env.FIREBASE_AUTH_DOMAIN' : JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
                'process.env.FIREBASE_DATABASE_URL' : JSON.stringify(process.env.FIREBASE_DATABASE_URL),
                'process.env.FIREBASE_PROJECT_ID' : JSON.stringify(process.env.FIREBASE_PROJECT_ID),
                'process.env.FIREBASE_PROJECT_BUCKET' : JSON.stringify(process.env.FIREBASE_PROJECT_BUCKET),
                'process.env.FIREBASE_MESSAGING_SENDER_ID' :JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID)
            })
        ],
        devtool: isProduction ? 'source-map' :'inline-source-map',
        devServer: {
            contentBase: path.join(__dirname, 'public'),
            historyApiFallback: true,
            publicPath :'/dist/'
        }
    }
}

Вы пробовали напрямую добавлять переменные в heroku? Установка переменных конфигурации heroku

c-chavez 31.10.2018 12:56

Круто, спасибо ... у меня создалось впечатление, что он снимет переменные с веб-пакета

malik badaruddin 05.11.2018 23:55
1
2
305
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вам нужно установить переменные в Heroku, посмотрите официальную документацию на использование-the-heroku-dashboard.

  1. Перейдите в Настройки вашего проекта

  2. Нажмите Показать конфигурационные переменные

enter image description here

  1. Добавьте свои config var ключ и ценить и нажмите Добавлять

enter image description here

Другие вопросы по теме