I can deploy React app to Firebase properly but If I try to deploy from Github Actions, It can't be deployed(404 error).
The directory structure is like this:
- github
- workflow
- action.yaml
- public
- sub-dir(React App)
- build
When I deploy a project with this command,
firebase deploy --only hosting
It will run correctly.
(The URL is [my-domain]/sub-dir/build)
but when it is deployed from github actions, getting 404 error page even though accessing the same URL.
this is the statement of action.yaml
name: Continuous Deployment
on:
push:
### Triggers a push to the main branch and executes the process
branches:
- main
jobs:
deploy:
runs-on: ubuntu-20.04
steps:
- name: checkout branch
uses: actions/checkout#v3
with:
fetch-depth: 0
- name: configure git info
run: |
git remote set-url origin https://github-actions:${GITHUB_TOKEN}#github.com/${GITHUB_REPOSITORY}
git config --global user.name "${GITHUB_ACTOR}"
git config --global user.email "${GITHUB_ACTOR}#users.noreply.github.com"
- name: check git status and branch
run: |
git status
git branch
### sub-dir build
- name: sub-dir build
run: |
cd public/sub-dir
yarn install
yarn build
- name: push the built project
run: |
git add .
git commit -m "Push different part from GitHub Actions"
git push origin HEAD:${GITHUB_REF}
### Firebase deploy
- uses: actions/setup-node#v3
with:
node-version: "14.18.3"
cache: npm
- name: Checkout Repo
uses: actions/checkout#master
- name: Install Dependencies
run: npm install
- name: Install Functions Dependencies
run: |
node -v
cd functions && npm install
npm i -g firebase-tools
firebase --version
git pull origin HEAD:${GITHUB_REF}
- name: Deploy to Firebase
uses: w9jds/firebase-action#master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
package.json
{
"name": "xxx",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.18.11",
"#types/react": "^18.0.26",
"#types/react-dom": "^18.0.10",
"firebase": "^9.15.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.5",
"react-scripts": "5.0.1",
"redux": "^4.2.0",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/react-redux": "^7.1.25"
},
"homepage": "./"
}
I have no idea about the reason. I would be happy to get the answer to this.
Thank you in advance.
Related
I am trying to figure out why the directory for my build can't be found. I have tried many versions that I found on other pages ./myapp/build, build, ./build/. I have tried cding into the folder. I am hosting my code in AWS CodeCommit.
I am at a loss. I am not a front-end developer, so maybe I am missing something very simple here. It loads locally perfectly fine.
package.json
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
amplify.yml
version: 1
frontend:
phases:
# IMPORTANT - Please verify your build commands
preBuild:
commands:
- npm ci
build:
commands:
- echo 'BEFORE BUILD'
- ls
- npm run build
- echo 'AFTER BUILD'
- ls
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: /myapp/build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
I had luck following this tutorial integrating github and amplify. Also here is my buildspec for reference as well : )
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
I have a ReactJS app that I am building and deploying with AWS CodePipeline.
My CodePipeline is triggered on pushes to Github. For some reason, the build is failing in CodeBuild with error:
[Container] 2021/01/18 02:59:02 Running command npm run build
> liferoll-web#0.1.0 build /codebuild/output/src739247890/src
> react-scripts build
Creating an optimized production build...
Failed to compile.
./src/App.tsx
Cannot find module: 'package-name'. Make sure this package is installed.
You can install this package by running: npm install package-name.
But is succeeding fine on other machines. This is so strange to me as the only place I can reproduce the error is on CodeBuild.
buildspec.yml
version: 0.2
phases:
pre_build:
commands:
- npm install
build:
commands:
- echo Build started on `date`
- npm run build
files:
- '**/*'
base-directory: build
package.json
{
"name": "my-website",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"#types/jest": "^26.0.20",
"#types/node": "^12.19.13",
"#types/react": "^16.14.2",
"#types/react-dom": "^16.9.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.1",
"react-stacked-carousel": "github:liferoll/react-stacked-carousel",
"typescript": "^4.1.3",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
App.tsx imports:
import React, {useRef, useState} from 'react';
import logo from './assets/liferoll-logo.png';
import iosDownloadSVG from './assets/download-ios.svg'
import qrCode from './assets/qrcode.png'
import loaderGif from './assets/loading.gif'
import clip1 from './assets/clip1.mov'
import clip2 from './assets/clip2.mov'
import clip3 from './assets/clip3.mov'
import clip4 from './assets/clip4.mov'
import './App.css';
//https://github.com/saadqbal/react-stacked-carousel/issues/1
import {StackedCarousel} from 'react-stacked-carousel'
import 'react-stacked-carousel/dist/index.css';
I have no idea how to correctly debug this and would appreciate guidance. Posting here to vet-out any obvious issues
There are many reasons why something would work the way you intend locally, but fail on a remote machine such as CodeBuild.
From the immediate error however, it's telling you that something is not installed or available at the time of building.
Cannot find module: 'package-name'. Make sure this package is installed.
This may not have to do with a direct import, but an import of something you're importing. My perception is your usage of "react-stacked-carousel" is abnormal and highly suspect.
I have a problem with Heroku deployment.
I want to deploy the production build of my application, however the development version somehow keeps getting deployed, as you can see in this screenshot:
This is my package.json
{
"name": "portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"bootstrap": "^4.5.3",
"react": "^17.0.1",
"react-bootstrap": "^1.4.0",
"react-dom": "^17.0.1",
"react-player": "^2.7.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "GENERATE_SOURCEMAP=false react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build ",
"test": "GENERATE_SOURCEMAP=false react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
This is my bitbucket-pipeline.yml content:
image: node:10.16.0
pipelines:
default:
- step:
script: #default script to run
- npm install
branches:
master:
- step:
name: Joseph production Deployment to Heroku
deployment: production
caches:
- node
script: #deploy master branch to heroku master
- npm install
- git push *(my git details here)*
If I run npm run build and serve a static version of the website using serve -s build, a production version works locally, how can I do that on the heroku server?
I have a create-react-app that I have successfully gotten up and running on my localhost, with all of the features of tailwind.css available for me to integrate with my JSX. It compiles fine and I used this tutorial to accomplish this: https://codingthesmartway.com/using-tailwind-css-with-react/.
An example of an error, commas representing new console log lines, is: npm ERR! react-tailwindcss#0.1.0 build:css: postcss src/styles/tailwind.css -o src/styles/main.css, npm ERR! spawn ENOENT, npm ERR!, npm ERR! Failed at the react-tailwindcss#0.1.0 build:css script. I used heroku logs --tail to get this information. I am at a loss as to how to fix this issue. This is the app: https://peaceful-island-18911.herokuapp.com/. It should look like (and does on my localhost) the end result of the tutorial mentioned. I know there has to be a way to get a react w/ tailwindcss app deployed to heroku and function as it does on localhost. I have done it before using the more common css framework bootstrap.
Below is my package.json file with my scripts and dependencies. I followed the tutorial I mentioned above for my file architecture. I am a newer dev so please go easy on me but any help or guidance in solving this issue will be greatly appreciated. I really hope this is a simple fix beginner mistake! Thank you.
{
"name": "react-tailwindcss",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "npm run build:css && react-scripts start",
"build": "npm run build:css && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:css": "postcss src/styles/tailwind.css -o src/styles/main.css",
"prebuild": "npm run build:css",
"prestart": "npm run build:css"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^9.8.6",
"postcss-cli": "^7.1.1",
"tailwindcss": "^1.6.2"
}
}
I am new to docker and I want to build a react app (with typescript) inside docker and I need to use semantic-ui-react for that.
I followed the instruction from here to build by app : https://mherman.org/blog/dockerizing-a-react-app/
I added semantic ui usingnpm i -g semantic-ui-react and this is my App.tsx:
import React from 'react';
import './App.css';
import {Button} from "semantic-ui-react";
class App extends React.PureComponent {
render() {
return (<div>
This is text
<Button>
ok
</Button>
</div>)
}
}
export default App;
When I open http://localhost:3001 I get this error :
./src/App.tsx
Module not found: Can't resolve 'semantic-ui-react' in '/app/src'
I tried to build the docker image using npm then I changed to yarn thinking it will fix.
Build commands i've used so far:
docker-compose build --no-cache && docker-compose up -d --force-recreate
docker-compose build --no-cache
docker-compose up -d --force-recreate --build
my Dockerfile
# base image
FROM node:12.2.0-alpine
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /app/package.json
RUN cat package.json
RUN yarn install
# start app
CMD ["yarn", "start"]
my docker-compose.yml:
version: '2.2'
volumes:
frontend:
services:
frontend:
container_name: container
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/app'
- '/app/node_modules'
ports:
- '3001:3000'
environment:
- NODE_ENV=development
I'm using Ubuntu 18.04
Inside my Dockerfile I've added cat package.json to see if semantic ui is added and it is.
Step 5/7 : RUN cat package.json
---> Running in b6bbcda3221b
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/jest": "^24.0.0",
"#types/node": "^12.0.0",
"#types/react": "^16.9.0",
"#types/react-dom": "^16.9.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.0",
"semantic-ui-react": "^0.88.2",
"typescript": "~3.7.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I've executed yarn start from terminal and there is no error and the project works fine when I open it in browser.
Why doesn't docker find the semantic ui module ?
Apparently this is a duplicate of Docker-compose: node_modules not present in a volume after npm install succeeds
And the answer from FrederikNS applies here as well. I removed
- '/app/node_modules' from volumes inside docker-compose.yml and now it recognize all modules