I have created a workflow to build react app to the production.
name: Build and Deploy
on:
push:
branches:
- main
jobs:
build:
name: Build
env:
REACT_APP_ENV: live build
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout#master
- 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:production
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
Build job is running correctly. But for the deploy, I got this error
Error: No project active, but project aliases are available.
Run firebase use with one of these options:
My .firebaserc file
{
"projects": {
"production": "gottamenu-admin",
"development":"gotta-menu-ap"
}
}
I follow instructions on the firebase repo for GitHub actions
If you have multiple hosting environments you can specify which one in the args line. e.g. args: deploy --only hosting:[environment name]
That's why I put args: deploy --only hosting:production
How do I fix this error in GitHub action?
Use deploy --only hosting:production if you want to deploy different sites (targets) on the same firebase-project
And your .firebaserc should look like
{
"projects": {
"default": "gottamenu-admin"
},
"targets": {
"gottamenu-admin": {
"hosting": {
"production": [
"gottamenu-admin",
],
"development": [
"gotta-menu-ap"
]
}
}
}
}
If you want to deploy to different firebase-projects
then your .firebaserc file is correct but
you should use deploy -P production or deploy --project production
Related
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- master
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- master
jobs:
build:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v3
- uses: actions/setup-node#v3
with:
node-version: 16
- run: |
cd src
npm install
npm run citest
npm run build-dev2
rm -rf node_modules
- name: Publish website output
uses: actions/upload-artifact#v3
with:
name: DEMO APP
path: ${{ github.workspace }}/src/build
devDeploy:
runs-on: ubuntu-latest
needs: [build]
steps:
- name: Dev Deploy
uses: actions/download-artifact#v1
with:
name: DEMO APP
path: ${{ github.workspace }}
- name: Dev Deploy
id: builddeploy
uses: Azure/static-web-apps-deploy#v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NEW_SUN_1185DE103 }}
repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
action: "upload"
###### Repository/Build Configurations ######
app_location: "" # App source code path relative to repository root
api_location: "" # Api source code path relative to repository root - optional
output_location: "build" # Built app content directory - optional
skip_app_build: true
env:
REACT_APP_AZURE_AD_KEY: ${{ secrets.REACT_APP_AZURE_AD_KEY }}
REACT_APP_AZURE_AD_REDIRECT_URI: ${{ secrets.REACT_APP_AZURE_AD_REDIRECT_URI }}
REACT_APP_GIS_APP_ID: ${{ secrets.REACT_APP_GIS_APP_ID }}
REACT_APP_TINYMCE_KEY: ${{ secrets.REACT_APP_TINYMCE_KEY }}
###### End of Repository/Build Configurations ######
close_pull_request_job:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request Job
steps:
- name: Close Pull Request
id: closepullrequest
uses: Azure/static-web-apps-deploy#v1
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_NEW_SUN_1185DE103 }}
action: "close"
Using vite v2.9.14
I have a classic web worker that uses importScripts('filename.js')
When using vite it works fine when building locally, however when I run vite build and everything is separated into chunks, the assets folder in the webworker does not contain the necessary scripts that I am importing.
File structure
-- components
-- Player
-- libffmpeg.wasm
-- libffmpeg.js
-- decoder.js
-- downloader.js
-- websocket.js
Current vite config
envDir: root,
root: path.resolve(root, './app/src'),
plugins: [
react({
jsxRuntime: 'automatic',
}),
],
optimizeDeps: {
esbuildOptions: {
keepNames: true,
},
},
build: {
target: 'esnext',
outDir: path.resolve(root, './app/dist'),
emptyOutDir: true,
}
How I am creating web worker
new Worker(
new URL('./downloader.js', import.meta.url),
);
Where webworker fails
importScripts('libffmpeg.js')
What worker looks like when I vite mode --development.
What worker looks like when I vite build, then, vite preview
Says that webpack compiled successfully when I enter git push heroku main but when I check heroku logs --tail it shows that my build failed and the link to my app goes to the default initial heroku page.
I've tried updating my webpack.config.js by adding
resolve: {
extensions: ['.js', '.jsx'],
},
And then removing all my extensions on my actual React components like so
Before:
import SearchContainer from './SearchContainer.jsx';
import Promoted from './Promoted.jsx';
import Products from './Products.jsx';
After:
import SearchContainer from './SearchContainer';
import Promoted from './Promoted';
import Products from './Products';
I've also double-checked my files for case sensitivity multiple times, making sure to re-add the files on git using the below command and back checked that everything matched:
git rm -rf --cached .
git add .
Really stumped on this. A link to my application is here. A similar thing happened when I tried to deploy on Netlify. Everything works locally and then crashes when running on the sites. I switched to Heroku after attempting to debug Netlfiy for most of the day. If anyone has a solution for any either I'd really appreciate it. Below is the error message I get from Netlify, which might be helpful debugging what's happening with Heroku since Heroku isn't descriptive in its build fail output.
7:14:01 PM: ERROR in main
7:14:01 PM: Module not found: Error: Can't resolve 'babel-loader' in '/opt/build/repo'
resolve 'babel-loader' in '/opt/build/repo'
7:14:01 PM: Parsed request is a module
7:14:01 PM: using description file: /package.json (relative path: .opt/build/repo)
7:14:01 PM: resolve as module
7:14:01 PM: /opt/build/repo/node_modules doesn't exist or is not a directory
/opt/build/node_modules doesn't exist or is not a directory
/opt/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
7:14:01 PM: webpack 5.30.0 compiled with 1 error in 54 ms
7:14:01 PM: assets by status 670 bytes [cached] 1 asset
7:14:01 PM: ERROR in main
7:14:01 PM: Module not found: Error: Can't resolve './client/src/index' in '/opt/build/repo'
resolve './client/src/index' in '/opt/build/repo'
7:14:01 PM: using description file: /package.json (relative path: .opt/build/repo)
7:14:01 PM: Field 'browser' doesn't contain a valid alias configuration
using description file: /package.json (relative path: .opt/build/repo/client/src/index)
7:14:01 PM: no extension
7:14:01 PM: Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/client/src/index doesn't exist
.js
7:14:01 PM: Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/client/src/index.js doesn't exist
.jsx
7:14:01 PM: Field 'browser' doesn't contain a valid alias configuration
/opt/build/repo/client/src/index.jsx doesn't exist
as directory
7:14:01 PM: /opt/build/repo/client/src/index doesn't exist
7:14:01 PM: webpack 5.30.0 compiled with 1 error in 11 ms
7:14:06 PM: Build exceeded maximum allowed runtime
Several things that I would recommend:
build command has a --watch option. The watcher might be needed for your local development but it is not on the server. It just hangs in the build pipeline and potentially times-out the build. Have two webpack configs (from one common one); one for development and one for production (server):
webpack.common.config.js:
const path = require('path');
module.exports = {
entry: './client/src/index',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './client/dist'),
publicPath: '/'
},
resolve: {
modules: ['node_modules'],
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react'],
},
},
},
],
},
};
webpack.development.config.js:
const CommonWebpack = require('./webpack.common.config');
module.exports = {
...CommonWebpack,
watch: true,
mode: 'development',
devtool:'inline-source-map'
};
webpack.production.config.js:
const CommonWebpack = require('./webpack.common.config');
module.exports = {
...CommonWebpack,
watch: false,
mode: 'production',
devtool: false,
};
Have a separate command with the watch for local development. For example:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon server",
"build": "webpack --config webpack.production.config.js",
"client-development": "webpack --config webpack.development.config.js"
}
No need for nodemon on the server, change your Procfile to
web: node server/index.js
The express app has a hardcoded PORT of 3000. Heroku assigns each app a PORT (via the run environment) according its own internal systems. Change the listen to:
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`listening on port ${PORT}!`);
});
This is my dockerfile used to building an image for kubernetes/openshift deployment:
FROM node:8.11.4
RUN mkdir /app
WORKDIR /app
COPY package.json .
RUN npm install
COPY src src
COPY public public
EXPOSE 3000
CMD ["npm", "start"]
The source code this app is cloned from: https://github.com/nodeshift-starters/react-web-app
This is my deployment yaml:
apiVersion: v1
kind: DeploymentConfig
metadata:
name: 'react-app'
labels:
app: 'react-app'
spec:
template:
spec:
initContainers:
- name: init-react
imagePullPolicy: IfNotPresent
image: "docker-registry.default.svc:5000/${NAMESPACE}/react-app"
command: ["sh", "-c"]
args: ["cp -n -r /app/* /tmp/app; sleep 1; ls -al"]
volumeMounts:
- mountPath: /tmp/app
name: react-storage-volume
containers:
- image: 'react-app:latest'
name: 'react-app'
securityContext:
privileged: false
ports:
- containerPort: 3000
name: http
protocol: TCP
resources:
limits:
memory: 500Mi
volumeMounts:
- name: react-storage-volume
mountPath: /app
volumes:
- name: react-storage-volume
persistentVolumeClaim:
claimName: "${pv_react}-claim"
metadata:
labels:
app: 'react-app'
replicas: 1
selector:
app: 'react-app'
triggers:
- type: ConfigChange
- type: ImageChange
imageChangeParams:
automatic: true
containerNames:
- 'react-app'
from:
kind: ImageStreamTag
name: 'react-app:latest'
The /app is mounted to nfs mount path : /mnt/k8sMount/react-data/.
The observation is whenever a change is done to src/App.js in the NFS mount path, it is getting updated to the pod(i have exec to the pod and checked its content) but when the web UI is refreshed in the browser the changes are not shown up.
Another observation is if changes to src/App.js inside the pod then upon web UI refresh in browser the changes appear.
Since I would want changes done to src/App.js in the NFS mount path to reflect in the web UI, please suggest to me if anything is wrong the deployment or if any alternative to achieve this. Thanks in Advance.
I am trying to deploy react app to AWS following this tutorial https://medium.com/#sgobinda007/setting-up-react-redux-application-for-production-and-hosting-in-aws-ec2-8bbb8bf3c643 my app is slightly different and when I run pm2 start ecosystem.config.js --env production I get that app status is online but on pm2 show status is errored with the following output: /home/ubuntu/www/react/tools/distServer.js:4
import browserSync from 'browser-sync';
^^^^^^
|
| SyntaxError: Unexpected token import
my ecosystem.config.js file looks like this:
module.exports = {
apps : [
{
name: "blockchainwallet",
script: "tools/distServer.js",
watch: true,
env: {
"PORT": 8080,
"NODE_ENV": "development"
},
env_production: {
"PORT": 3000,
"NODE_ENV": "production",
}
}
]
}
could you give me any suggestions in order to fix this bug?
Check your webpack config and the node version of your environment, as the error you mention is a common error for not supported ES6 syntax.
import is used in ES6, you must use require in ES5