I am trying to accomplish build/deploy my react app that uses Firebase(for now only auth module) using github actions with secrets. For local development I use .env file with webpack and dotenv-webpack library. On local machine all works fine. Dev server get environment varialbles from .env file and inject it. But after build in github actions and deploying package on firebase hosting page return me an error:
code: "auth/invalid-api-key"
message: "Your API key is invalid, please check you have copied it correctly."
After some investigation I got that environment variables aren't defined properly:
apiKey: undefined
authDomain: undefined
databaseURL: undefined
messagingSenderId: undefined
projectId: undefined
storageBucket: undefined
The main question if i'm doing variable injection correct or maybe there is another way to do it? My webpack config that I use in build:
webpack.build.conf.js
const { merge } = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const buildWebpackConfig = merge(baseWebpackConfig, {
//!!!
//CAUTION Production config
//!!!
mode: 'production',
});
module.exports = new Promise((resolve, reject) => {
resolve(buildWebpackConfig);
});
webpack.base.conf.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/',
filename: 'bundle.min.js',
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
'@constants': path.resolve(__dirname, './src/constants'),
'@components': path.resolve(__dirname, './src/components'),
'@utils': path.resolve(__dirname, './src/utils'),
'@styles': path.resolve(__dirname, './src/style'),
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader'],
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('./index.html'),
}),
new Dotenv(),
],
};
File that get variables from .env file:
//Firebase config
export const FB_API_KEY = process.env.REACT_APP_API_FB_KEY;
export const FB_AUTH_DOMAIN = process.env.REACT_APP_FB_AUTH_DOMAIN;
export const FB_DATABASE_URL = process.env.REACT_APP_FB_DATABASE_URL;
export const FB_PROJECT_ID = process.env.REACT_APP_FB_PROJECT_ID;
export const FB_STORAGE_BUCKET = process.env.REACT_APP_STORAGE_BUCKET;
export const FB_MESSAGING_SENDER_ID = process.env.REACT_APP_FB_MESSAGING_SENDER_ID;
Pipeline file:
name: Firebase Deploy
on:
push:
branches:
- master
jobs:
build:
name: Build
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@master
env:
REACT_APP_API_FB_KEY: ${{ secrets.REACT_APP_API_FB_KEY }}
REACT_APP_FB_AUTH_DOMAIN: ${{ secrets.REACT_APP_FB_AUTH_DOMAIN }}
REACT_APP_FB_DATABASE_URL: ${{ secrets.REACT_APP_FB_DATABASE_URL }}
REACT_APP_FB_PROJECT_ID: ${{ secrets.FB_PROJECT_ID }}
REACT_APP_FB_STORAGE_BUCKET: ${{ secrets.FB_STORAGE_BUCKET }}
REACT_APP_FB_MESSAGING_SENDER_ID: ${{ secrets.FB_MESSAGING_SENDER_ID }}
- name: Variable to dotenv
uses: CallePuzzle/envvar-to-dotenv-action@0.1.0
with:
variableNamesByFilter: ^REACT_(APP.*)
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
- name: Archive Production Artifact
uses: actions/upload-artifact@master
with:
name: build
path: build
deploy:
name: Deploy
needs: build
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@master
- name: Download Artifact
uses: actions/download-artifact@master
with:
name: build
path: build
- name: Deploy to Firebase
uses: w9jds/firebase-action@master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}