I developed React app which the runtime is nodejs and this app contains server/client and I want to deploy it to Google Cloud Platform - App Engine and this is my package.json but what is happening is after deployed only the server is deployed and working but the client is not get deployed
{
"name": "newapp",
"version": "1.0.0",
"description": "my test app",
"scripts": {
"client": "cd client && yarn start",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
"dependencies": {
"bootstrap": "^4.0.0-beta.3",
"express": "^4.16.2",
"mx-react-components": "^5.1.11",
"mysql": "^2.15.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"reactstrap": "^5.0.0-alpha.4"
},
"devDependencies": {
"concurrently": "^3.5.0"
}
}
Then I am trying to deploy the app by this Command line
gcloud app deploy
Related
In Procfile:
web: node Backend/server.js
In package.json of backend, I am using post build for react app. its saying cannot find module /app/backend/server.js.
{
"name": "ecommerce",
"version": "1.0.0",
"description": "",
"main": "Backend/server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node backend/server.js",
"dev": "nodemon backend/server.js",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false && npm install --prefix frontend && npm run build --prefix frontend"
},
"author": "",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.0",
"cloudinary": "^1.28.1",
"cookie-parser": "^1.4.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"express-fileupload": "^1.2.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.0.10",
"nodemailer": "^6.7.0",
"nodemon": "^2.0.13",
"stripe": "^8.197.0",
"validator": "^13.6.0"
}
}
My project is laid out like this:
Backend/
frontend/
Procfile
package-lock.json
package.json
Your start script tries to run node backend/server.js, but your file is actually at Backend/server.js. Heroku's filesystem is case-sensitive. You can use either option, but you must be consistent.
Here is one solution. Rename your directory:
git mv Backend backend
And update your Procfile:
web: node backend/server.js
Then commit and redeploy.
How to run Nextjs app and Express server concurrently using npm concurrently package?
I have a project which is created using Node Express as the backend and NextJs as the frontend. I want to use concurrently npm package to start both Express server and NextJs frontend using npm run dev. The server uses port 5000 and the frontend uses port 3000 And the Folder structure as follows.
1.
|-next-bootstrap-express-app.
|frontend(NextJs App)
|.env
|package.json
|src
|server.js
|package.json
package.json(next-bootstrap-express-app):
{
"name": "next-bootstrap-express-app",
"version": "1.0.0",
"description": "Next Bootstrap Express App",
"main": "server.js",
"scripts": {
"frontend-install": "npm install --prefix frontend",
"start": "nodemon server.js",
"server": "nodemon server.js",
"frontend": "npm start --prefix frontend",
"dev": "concurrently \"npm run server\" \"npm run frontend\""
},
"author": "test",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"config": "^3.3.6",
"express": "^4.17.1",
"express-validator": "^6.12.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.0.2",
"request": "^2.88.2",
"concurrently": "^6.2.1"
},
"devDependencies": {
"nodemon": "^2.0.12"
}
}
How can I use concurrently npm package to start Nextjs 3000 for client and Express Server which uses port 5000 for admin.
In your next-bootstrap-express-app directory's packages.json file you can include your frontend script like this
"frontend": "cd ./frontend && npm run dev"
Then you can run npm run dev command from the next-bootstrap-express-app directory.
I am trying to deploy a nodejs app onto Azure App Service. I did the basics of deploying it, but it's failing to run. It seems it is designed to run "node run.js" commands rather than "npm run start".
I'm playing in the console, and if I try to run npm run start manually, I get a series of errors tied to build. Basically:
'tsc' is not recognized as an internal or external command
I'm wondering if there's something really obvious here about how tsc (and others) can be added to path. I have to admit, I'm not particularly well versed in using Azure or Node for that matter. Any help would be very much appreciated! Thanks!
This is the package.json file:
{
"name": "test-scraper",
"version": "0.1.1",
"description": "",
"main": "dist/main.js",
"scripts": {
"build": "tsc",
"build:dev": "tsc --watch",
"prestart": "npm run build",
"start:dev": "nodemon",
"start": "pm2 start dist/src/main.js --node-args=\"-r ./tsconfig-paths-bootstrap.js\" && pm2 monit",
"stop": "pm2 delete main"
},
"author": "",
"license": "MIT",
"devDependencies": {
"#types/lodash": "^4.14.161",
"#types/node": "^14.11.8",
"#types/puppeteer": "^3.0.2",
"nodemon": "^2.0.4",
"prettier": "^2.1.2",
"typescript": "^4.0.3"
},
"dependencies": {
"axios": "^0.20.0",
"discord-webhook-node": "^1.1.8",
"lodash": "^4.17.20",
"messaging-api-telegram": "^1.0.1",
"playwright-firefox": "^1.4.2",
"pm2": "^4.5.0",
"tsconfig-paths": "^3.9.0",
"winston": "^3.3.3"
}
}
Run this command locally for installing typescript, because your code is compiled with the tsc command.
npm install -g typescript
Mostly I was following this tutorial.
Add the tsc command to package.json and add the dependencies:
"build": "tsc --project ./"
...
"devDependencies": {
"#types/express": "^4.17.9",
"#types/node": "^14.14.20",
"ts-node": "^9.1.1",
"typescript": "^4.1.3"
},
Here is my file structure:
I add a empty file.ts and add this scripts to the tsconfig.jason file:
"exclude": [ "src", "wwwroot" ],
"include": [ "file.ts" ]
Deploy through Azure Web App deployment center:
And the app build (tsc) run successfully:
if you are deploying to Production (NODE_ENV: production), devDependencies will no longer being installed, and you need to edit your package.json and move typescript to dependencies.
Source
I've built a react app from create-react-app that uses an API built on express.
I'm trying to deploy the app to heroku and I've run into some issues. This will be my first deploy.
Originally, I separated the express API backend from the React front end by using two servers operating on different PORTS. Then I used concurrently to start both servers in the app's top level package.json file.
The project looks like:
app
|package.json
|client
|package.json
|public
|src
|server
|package.json
|app.js
This works fine locally when webpack launches a development server for the React app. On deploy, however, Heroku would point the landing page to the express server, rather than the react-app home page, resulting in, well, a whole lot of nothing.
I'm wondering if I should:
A. Run everything through a single express server and just serve the react app from there
B. Find a way to run both servers but point to the React app server.
Here is the top level package.json file
{
"name": "",
"version": "2.0.0",
"description": "",
"main": "app.js",
"dependencies": {
"#material-ui/icons": "^4.9.1",
"concurrently": "^5.3.0",
"cors": "^2.8.5",
"#material-ui/core": "^4.11.0",
"axios": "^0.20.0",
"chart.js": "^2.9.4",
"material-table": "^1.69.1",
"query-string": "^6.13.2",
"react": "^16.13.1",
"react-chartjs-2": "^2.10.0",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.3",
"spotify-web-api-js": "^0.22.1",
"bluebird": "^3.7.2",
"body-parser": "^1.19.0",
"cookie-parser": "1.3.2",
"dotenv": "^8.2.0",
"express": "~4.0.0",
"express-session": "^1.17.1",
"handlebars": "^4.7.6",
"querystring": "~0.2.0",
"request": "~2.34.0",
"uuid": "^8.3.0"
},
"devDependencies": {},
"scripts": {
"start": "concurrently \"npm run server\" \"npm run client\"",
"test": "echo \"Error: no test specified\" && exit 1",
"client": "cd client && npm start",
"server": "cd server && npm start"
},
"engines": {
"node": "12.16.2",
"npm": "6.14.4"
},
}
A. Run everything through a single express server and just serve the react app from there
This would be the best choice as far as complexity of the deployment, performance and security are concerned.
To further reduce the possibility of getting issues during Heroku deployment, consider optionally containerizing your solution. You can install Docker, build a container and run it locally. After Heroku deployment the software running inside the container e.g. Express cannot (well, almost) tell the difference between running locally and in the cloud. It eliminates many deployment issues due to differences between the run-time environment you provide locally and that of Heroku. Practical example, it provides the sequence of seven commands to execute in order to get a container with Express/React built and deployed. I'm the author.
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.