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

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.

Related

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.

How to run a Node.Js backend project from another developer?

I'm new to Nodejs, normally when I make a project, I install the dependencies myself, and in order to run the project set something like this in the packaje.json:
"scripts": {
"dev": "nodemon server.js"
}
and then I just run my project with something like this npm run dev
But in a project made by someone else it doesn't seem to be that simple because it has the dependencies like this:
{
"name": "proyecto API",
"version": "1.0.0",
"description": "proyecto Main Backend Repo",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "cross-env NODE_ENV=production node --harmony index.js",
"dev": "cross-env NODE_ENV=development nodemon --harmony index.js",
"lint": "eslint --ext .js --ignore-path .gitignore .",
"lint:fix": "eslint --ext .js . --fix",
"superuser": "node --harmony createSuperUser.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/proyecto-Network/lolagato"
},
"author": "gatito",
"license": "MIT",
"bugs": {
"url": "https://github.com/proyecto-Network/lolagato/issues"
},
"homepage": "https://github.com/proyecto-Network/lolagato/erths",
"dependencies": {
"#google-cloud/storage": "^5.14.2",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"mongo-project": "^1.0.1",
"mongodb": "^4.1.0",
"morgan": "^1.10.0"
},
"devDependencies": {
"cross-env": "^7.0.3",
"nodemon": "^2.0.12"
}
}
Apparently here I can't just do npm run dev because as you can see in the packaje.json it comes out this:
"dev": "cross-env NODE_ENV=development nodemon --harmony index.js"
So my questions are, how can I run this project on my PC and what does that say "cross-env" and --harmony mean?
I have to install all that that appears in the packaje.json?
Just do,
npm install
This will install all the required dependencies. If you notice, in the devDependencies there is cross-env which is required for your npm run dev.
Once the dependencies are brought up, do npm run dev.
Or you could just do -
nodemon index.js
or
nodemon --harmony index.js
To see what happens.
cross-env NODE_ENV=development is just setting the environment variables. From their npm page -
cross-env makes it so you can have a single command without worrying about setting or using the environment variable properly for the platform.

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"
]
}

how to resolve "EADDRINUSE" error and "Proxy error"?

I have two problems when running my NPM. The first problem is whenever I save my files. I get this error message.
Also when I make a request to the server from my frontend. I get the proxy error message
This is my scripts in my package.json for my backend
"scripts": {
"client": "npm start --prefix client",
"server": "node app.js --ignore client",
"start": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"test": "echo \"Error: no test specified\" && exit 1"
},
And also my package.json for my client as you can see below
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.8",
"#fortawesome/free-brands-svg-icons": "^5.6.3",
"#fortawesome/free-solid-svg-icons": "^5.5.0",
"#fortawesome/react-fontawesome": "^0.1.3",
"axios": "^0.19.0",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0",
"react-spring": "^8.0.27"
},
"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"
]
},
"devDependencies": {
"node-sass": "^4.12.0"
}
}
Assuming you're on windows:
Run netstat -aon to view the processes running on each port
Find the process running on 0.0.0.0:5000 or 127.0.0.1:5000 and note its PID
Run taskkill /F /PID <pid_number> to kill that process
You should now be able to run your npm service on that port
If you're on Linux or Mac you should be able to follow the same process, just google what the commands are called on those OSs
EADDRINUSE tells you, port 5000 is already open by another process or the same process. So either something else is running on the port, or in your case it is more likely your app doesn't close the port properly when restarting.
You can manually force close the process and restart it, but that can be quite a pain, instead of restarting when you save. Since you probably want the latter.
So I'd suggest looking at your code and check for things that could prevent your app from shutting down, or delay your shut down. So Pay attention to things such as promises that have not resolved yet, and timeouts that are still running.
As for your proxy issue you get a ECONNRESET, which basically says your connection has been shut down by the peer (so the proxy in your case), most likely because port 5000 gets shutdown and restarted. I reckon that one will be solved once you resolve your first issue.
Hope this helps with resolving your issue.

Deploying ember-cli app to Heroku

What do I put in my Procfile to deploy an ember-cli generated app to Heroku?
=== web (1X): `ember server`
web.1: crashed 2014/04/10 13:19:57 (~ 48s ago)
=== web (1X): `npm start`
web.1: crashed 2014/04/10 13:22:11 (~ 2m ago)
You could use the Heroku Ember CLI buildpack: https://github.com/heroku/heroku-buildpack-emberjs
I have this in my Procfile and it's is working for me:
web: ember serve --environment production --port $PORT
I followed the instructions from this gist, which is where I got that Procfile.
The ember-cli version and dependencies in the gist are out of date, which was causing my app to crash similar to yours.
I needed to add/replace the packages listed in the "dependencies" section of my package.json file with the packages ember-cli puts into the "devDependencies" section of package json. When I was done my package.json file looked like this:
{
"name": "your-apps-name",
"version": "0.0.0",
"private": true,
"directories": {
"doc": "doc",
"test": "test"
},
"scripts": {
"start": "ember server",
"build": "ember build",
"test": "ember test",
"postinstall": "bower install"
},
"repository": "https://github.com/stefanpenner/ember-cli",
"engines": {
"node": ">= 0.10.0"
},
"author": "Your Name",
"license": "Your App's License",
"devDependencies": {
"ember-cli": "0.0.28",
"originate": "0.1.5",
"broccoli-ember-hbs-template-compiler": "^1.5.0",
"loom-generators-ember-appkit": "^1.1.1",
"express": "^4.1.1",
"body-parser": "^1.2.0",
"glob": "^3.2.9"
},
"dependencies": {
"bower": "^1.3.3",
"broccoli-template": "0.1.1",
"ember-cli": "0.0.28",
"originate": "0.1.5",
"broccoli-ember-hbs-template-compiler": "^1.5.0",
"loom-generators-ember-appkit": "^1.1.1",
"express": "^4.1.1",
"body-parser": "^1.2.0",
"glob": "^3.2.9"
}
}
Procfile:
web: npm run start
Package.json:
"scripts": {
"start": "ember serve --port=${PORT}",
"build": "ember build",
"test": "ember test",
"postinstall": "bower install"
},
and rename devDependencies block and add bower as a depency:
"devDependencies": { ... }
to
"dependencies": {
"bower": "1.3.12"
...
}
but add devDependencies again and add ember-cli there for ember to detect your app:
"devDependencies": {
"ember-cli": "0.1.15"
}
A bit more information and further links can be found from my blogpost:
https://personalwebdevelopment.wordpress.com/2015/02/23/deploying-ember-cli-app-to-heroku/
you can try with 'npm start' or 'ember server'
You could use the Ember buildpack recommended by Heroku: https://www.heroku.com/emberjs
To define this buildpack for an existing application, you'll need to run the command below:
heroku buildpacks:set https://codon-buildpacks.s3.amazonaws.com/buildpacks/heroku/emberjs.tgz

Resources