AWS Beanstalk failed to deploy Docker Node(React) app - node.js

I'm deploying Dockerized React app to AWS Beanstalk.
(Type: t2.micro / Docker running on 64bit Amazon Linux 2)
My docker image works when I run locally.(docker run -p 3001:3000 -d todo-app)
But when I try to deploy (eb deploy), failed with error message:
ERROR: ServiceError - Failed to deploy application.
(From eb-engine.log below:)
[ERROR] An error occurred during execution of command [app-deploy] - [Run Docker Container]. Stop running the command. Error: open file failed with error open /opt/elasticbeanstalk/deployment/.aws_beanstalk.current-container-id: no such file or directory
Here is my Dockerfile (Very simple):
FROM node:14-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm ci
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
And here is my Package.json (If it helps)
{
"name": "todo-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false 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"
]
}
}
Could I get some hint what causes error please?

Didn't find a clear reason, but there were two solutions.
Solution 1: Change platform from Docker running on 64bit Amazon Linux 2
to Docker running on 64bit Amazon Linux (Deprecated).
Solution 2:
Update Node.js version from 14 to 16.
(Changing FROM node:14-alpine to FROM node:16-alpine in Dockerfile)

Related

docker-compose cant run react without node_modules already existing

Im using docker/docker-compose to get my react (ts) app up and running.
The script im currently using works perfectly, on 1 condition. That I've already did 'npm install' inside the directory, while not in docker.
I would like to be able to clone my project from github, and just do docker-compose up, and that it works than.
Right now i first have to run 'npm install', and than 'docker-compose up' for it to work sadly.
I tried just using RUN npm install react-scripts -g, and that kinda works. however i than get a error for typescript, and all other packages.
What I want to be happening is. When I clone my repo, and use docker-compose up. That my whole project runs. It also should make a node_modules folder in my react folder that I can see in my IDE. This is so that my IDE knows the code in the package and doesn't yell at me the whole time.
I cant figure out how to get this to work, I'm already struggling on this for hours and can't find online how to fix it. Hope anyone can help me :D
My structure looks something like this:
apps
frontend
Dockerfile
composer.json
// All the other react files/folders
docker-compose.yml
Dockerfile:
FROM node:16.14.2
WORKDIR /usr/src/app
COPY ./package*.json ./
RUN npm install
CMD npm start --host 0.0.0.0 --port 3000 --disableHostCheck true
docker-compose.yml:
version: '3'
services:
frontend:
build:
context: ./apps/frontend
dockerfile: ./Dockerfile
volumes:
- ./apps/frontend:/usr/src/app
ports:
- 3000:3000
environment:
- CHOKIDAR_USEPOLLING=true
- API_BASE_URL=host.docker.internal:8080/api
extra_hosts:
- "host.docker.internal:host-gateway"
The error im getting is:
frontend_1 | > spa#0.1.0 start
frontend_1 | > react-scripts start "0.0.0.0" "3000"
frontend_1 |
frontend_1 | sh: 1: react-scripts: not found
cyldiscordbot_frontend_1 exited with code 127
package.json (idk if you need it, but here it is):
{
"name": "spa",
"version": "0.1.0",
"private": true,
"dependencies": {
"#cylbot/cyldiscordbotlanguage": "^2.0.3",
"#emotion/core": "^11.0.0",
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#mui/icons-material": "^5.3.1",
"#mui/material": "^5.5.0",
"#testing-library/user-event": "^13.2.1",
"#types/node": "^17.0.9",
"#types/react": "^17.0.38",
"#types/react-dom": "^17.0.11",
"axios": "^0.25.0",
"emotion-theming": "^11.0.0",
"enzyme": "^3.11.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"redux": "^4.1.2",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.4.1",
"styled-components": "^5.3.3",
"typescript": "^4.5.4",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#material-ui/core": "^4.12.3",
"#storybook/addon-actions": "^6.4.19",
"#storybook/addon-essentials": "^6.4.19",
"#storybook/addon-interactions": "^6.4.19",
"#storybook/addon-links": "^6.4.19",
"#storybook/builder-webpack5": "^6.4.19",
"#storybook/manager-webpack5": "^6.4.19",
"#storybook/node-logger": "^6.4.19",
"#storybook/preset-create-react-app": "^4.0.1",
"#storybook/react": "^6.4.19",
"#storybook/testing-library": "^0.0.9",
"#testing-library/jest-dom": "^5.16.2",
"#testing-library/react": "^12.1.4",
"#testing-library/react-hooks": "^7.0.2",
"#types/jest": "^27.4.1",
"#types/styled-components": "^5.1.20",
"jest": "^27.5.1",
"react-test-renderer": "^17.0.2",
"ts-jest": "^27.1.3",
"webpack": "^5.70.0"
}
}
I can give out a lot of info about this project, so if more info is required just ask! :D
I figured it out. I asked a friend, and he helped me out.
I needed to change my Dockerfile to:
FROM node:16.14.2
WORKDIR /usr/src/app
RUN npm install -g react-scripts
RUN chown -Rh node:node /usr/src/app
USER node
EXPOSE 3000
CMD [ "sh", "-c", "npm install && npm run start" ]
Your Dockerfile is missing the application code; it only copies the package.json file in. This gives you an incomplete image that you can't just run. You're missing a line:
COPY ./ ./
I'd put this after the RUN npm install line, to make rebuilding the image faster.
Since your image is incomplete, in your current setup you have to inject the code from the host, and that hides the node_modules directory that the image builds. That's why you also have to run npm install on the host. If you COPY the application code into the image, you don't need the volumes: block.
version: '3.8'
services:
frontend:
build: ./apps/frontend # short form with default dockerfile:
ports:
- 3000:3000
environment:
- API_BASE_URL=host.docker.internal:8080/api
extra_hosts:
- "host.docker.internal:host-gateway"
# no volumes: or polling environment variable

Folder structure for backend and frontend

Im setting up a project with a express node.js backend and react frontend. This is my first time setting a project up with a backend and their are a few things im unsure of...
First question:
So my current folder structure is this:
--backend
   --node_modules
   --package-lock.json
   --package.json
   --server.js
   --yarn.lock
--client
   --node_modules
   --package.json
   --public
   --.gitignore
   --README.md
   --yarn.lock
   --src
      --boilerplate create-react-app files
My package.json file:
BACKEND
{
"name": "yelp-clone-2-backend",
"license": "MIT",
"version": "1.0.0",
"scripts": {
"client": "cd client && yarn start",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.17.1"
},
"devDependencies": {
"concurrently": "^4.0.1"
}
}
My package.json file:
FRONT-END
{
"name": "yelp-clone-2-front-end",
"version": "0.1.0",
"license": "MIT",
"private": true,
"proxy": "http://localhost:5000/",
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"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"
]
}
}
I am using the command from the BACKEND package.json to combine the frontend and backend server
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
The problem im having is with my current folder structure when i run this command (from the /backend dir) i get
[1] /bin/sh: line 0: cd: client: No such file or directory
error Command failed with exit code 1.
But... if i move everything out of backend and into the root dir so outside of client and not in backend folder anymore, the command works and the server starts and listens on port 5000 like expected.
Why does the command only work with the backend files in the root dir and not in the backend folder like i want.
Ive tried running the following commands with everything back inside of the backend folder before starting the server with no luck:
rm -rf node_modules
yarn cache clean
yarn
yarn start
For the cd command which fails to run, you need to understand that the npm command executes inside the backend folder. That means that if you want to change the directory to the client folder you need to append two dots before the folder: cd ../client. You tried to go to backend/client which is nonexistant.
To generate a git repository you need to run git init and not npm init.
Please understand how the cd command works before using it blindly as it could have some really bad results on a professional environment.
For any more questions reply to this answer and I can gladly edit it.

Heroku deployment failing: Failed to load plugin 'cypress' declared in 'package.json': Cannot find module 'eslint-plugin-cypress'

Update #2 after some more research
Looking into the build logs some more, it looks like Cypress gets installed via a postinstall hook that downloads a binary that Heroku doesn't pick up in the build process for some reason unless config is set to NPM_CONFIG_PRODUCTION=false. Comparing the failed build log with the successful build log, this postinstall hook doesn't run:
> cypress#6.0.0 postinstall /tmp/build_0453cc7d/frontend/node_modules/cypress
Why this and potentially other devDependencies don't get installed prior to npm run build doesn't appear to be documented and runs contrary to Heroku's documentation that devDependencies are installed by default.
Update #1 with more build info
Here's a gist that shows the failing build log and the succeeding build log (after configuring Heroku not to prune devDependencies using heroku config:set NPM_CONFIG_PRODUCTION=false).
https://gist.github.com/ddehart/9e0ca72a3f20f104e05d70eed6de6c64
The pruning appears to be initiated after the build process installed Cypress, so it's not clear why setting NPM_CONFIG_PRODUCTION=false prompted the Cypress installation, despite Heroku's documentation that says:
By default, Heroku will install all dependencies listed in package.json under dependencies and devDependencies.
Original question
I'm getting this npm run build error when deploying to Heroku:
Failed to load plugin 'cypress' declared in 'package.json': Cannot find module 'eslint-plugin-cypress'
Here's my package.json for reference:
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.2.2",
"#testing-library/user-event": "^12.2.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "^4.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"cypress:open": "cypress open",
"cypress:run": "cypress run"
},
"eslintConfig": {
"extends": [
"react-app",
"plugin:cypress/recommended"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#testing-library/cypress": "^7.0.2",
"cypress": "^6.0.0",
"eslint-plugin-cypress": "^2.11.2"
}
}
The project was initiated using Create React App. npm run build succeeds without any issues locally, so I first thought maybe Heroku was pruning devDependencies, but looking back at other build logs that succeeded show that pruning happens after a successful build.
If it helps, here's my package.json from the last successful build.
{
"name": "frontend",
"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.14.0",
"react-dom": "^16.14.0",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"cypress:open": "cypress open"
},
"eslintConfig": {
"extends": [
"react-app",
"plugin:cypress/recommended"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"cypress": "^5.4.0",
"eslint-plugin-cypress": "^2.11.2"
}
}
I think the build is complaining about this, although that hasn't changed at all from the last successful build.
"eslintConfig": {
"extends": [
"react-app",
"plugin:cypress/recommended"
]
},
Removing that plugin declaration of course ruins Cypress in my IDE. Is there any way to work around the build error or troubleshoot on the Heroku instance itself?
Rather than setting NPM_CONFIG_PRODUCTION=false, I ended up moving the Cypress eslintConfig into its own .eslintrc.json file within the cypress directory. Since Heroku only seems to be getting hung up on the Cypress plugin referenced in the main package.json, removing that configuration altogether fixed the Heroku build issue without affecting my IDE and without having to rely on the non-standard NPM_CONFIG_PRODUCTION setting.
Per Cypress's documentation, the .eslintrc.json file just needs this for the recommended rules:
{
"extends": [
"plugin:cypress/recommended"
]
}

Could not complete "npm run deploy" command for React to use on Github Pages

I'm trying to deploy a website on Github pages, and the project was created using create-react-app and has gh-pages module installed. All of my local and remote repositories are up to date, and using npm start launches the page on local host with no issues.
However when I try to deploy this site to Github Pages using npm run deploy, it compiles successfully but then hangs forever on the gh-pages -d build command. It goes on forever, and does not exit out of it by itself with an error message nor is an error log created. I suppose the command could just be taking really long to finish, but I waited for 30 minutes without it ending so I am not sure.
Below is my package.json:
{
"name": "website",
"version": "0.1.0",
"private": true,
"homepage": "https://xxx.github.io/website",
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"gh-pages": "^2.2.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
},
"scripts": {
"start": "react-scripts start",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"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"
]
}
}
here is my shell log after force termination of npm run deploy:
> website#0.1.0 predeploy C:\Users\user\directory
> npm run build
> website#0.1.0 build C:\Users\user\directory
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
40.32 KB build\static\js\2.08db1231.chunk.js
2.9 KB build\static\js\main.0c674757.chunk.js
784 B build\static\js\runtime-main.e77b87bb.js
547 B build\static\css\main.d1b05096.chunk.css
The project was built assuming it is hosted at /website/.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
To publish it at https://xxx.github.io/website , run:
npm run deploy
Find out more about deployment here:
bit.ly/CRA-deploy
> website#0.1.0 deploy C:\Users\user\directory
> gh-pages -d build
as an aside does my github free account status have to do with anything?
Use version 2.0.1 instead of 2.2.0 for gh-pages
running "gh-pages -d public" hangs on "pushing" per node debug #324

How can I deploy a react app with a node backend on GitHub Pages?

I just started learning about concurrently npm to React.
I want to know how to deploy React project on Github page with concurrently npm.
Normally on local machine we would run the app with server side package.json file
"dev": "concurrently "npm run server" "npm run client""
In Terminal> npm run dev
I tried with gh-pages npm to deploy react app on Github page but with concurrently npm,
I have no idea how to do it since there are two package.json.
Also, I don't know much about NODE environment and npm run build.
Server side package.json:
{
"name": "contact-keeper",
"version": "1.0.0",
"description": "Contact manager app",
"main": "server.js",
"homepage": "https://myprofile.github.io/Contact-Keeper-with-React",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"clientinstall": "npm install --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"config": "^3.1.0",
"dotenv": "^8.0.0",
"express": "^4.17.1",
"express-validator": "^6.1.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.6.4"
},
"devDependencies": {
"concurrently": "^4.1.1",
"gh-pages": "^2.1.1",
"nodemon": "^1.19.1"
}
}
Client side server package.json:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1",
"react-transition-group": "^4.2.1",
"uuid": "^3.3.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"
]
},
"proxy": "http://localhost:5000"
}
Is there any document or basic knowledge about setting environment that I need to learn more to understand this topic?
Github is not (quite) a service for serving your working application to other users. Github is a repository for storing your code, updating it, and managing versions.
I think that to deploy your app "concurrently" to github means there is a way of updating Github with the new version code, at the same time as you deploy it online to a service, such as Heroku.
You should research and understand what Git (as opposed to github) is, as its essential for development. Get skilled at managing your app code with git first, before trying to deploy to a service like Heroku, AWS etc....
EDIT
As pointed out by Asaf Aviv, you can serve front-end apps from Github, with github pages, but you still need to be able to push your local code up to github for this to work.

Resources