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.
Related
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.
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.
I have built up WebApp in MERN stack with MongoDB, Express, React, Nodejs.
I hosted it to Heroku-Cloud as https://connectgeeks.herokuapp.com.
Github-repo of the project- Find_Geeks.
it works on my Desktop browsers but can't run on any Android chrome.
I have an auto-build app in Heroku cloud with command in package.json as
"scripts:{
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"
}
when it loads on android, it's search bar background changes to black and I assume the page is loaded that time, but can't display components.
Screenshot of Desktop-chrome, in the working state.
Screenshot of Desktop-chrome, in Incognito-mode, the working state.
Screenshot of Mobile-mode in chrome, the working state.
my package.json contents are
{
"name": "find-geeks",
"version": "1.0.0",
"description": "social media for developers, quite same as Linkedin.",
"main": "server.js",
"scripts": {
"client-install": "npm install --prefix frontend",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix frontend",
"dev": "concurrently \"npm run server\" \"npm run client \"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ganesh-deshmukh/connect-geeks.git"
},
"author": "Ganesh Ashok Deshmukh",
"license": "MIT",
"bugs": {
"url": "https://github.com/ganesh-deshmukh/connect-geeks/issues"
},
"homepage": "https://github.com/ganesh-deshmukh/connect-geeks#readme",
"dependencies": {
"bcryptjs": "2.4.3",
"body-parser": "1.18.2",
"concurrently": "3.5.1",
"express": "4.16.3",
"gravatar": "1.6.0",
"jsonwebtoken": "8.2.0",
"mongoose": "5.4.0",
"passport": "0.4.0",
"passport-jwt": "4.0.0",
"validator": "9.4.1"
},
"devDependencies": {
"nodemon": "1.17.3"
}
}
Edit 1:
I tried debugging on mobile screen via localhost-server, at url http://192.168.43.171:3000/,
then it showed error location as,
Removed DevTools from store.js, and now it works on Mobile browsers, through localhost-server.
maybe that's due to Heroku-build script or any other.
it works on a mobile screen just after removing redux-dev-tools, as this locally.
but it won't work with URL as https://connectgeeks.herokuapp.com
this question doesn't have any error but the mistake of not pushing Heroku master once changes were done.
I checked logs on Heroku dashboard, and it showed activity at old-date, though I updated and push git-repo.
my mistake was not pushing Heroku-repo after removing redux-dev-tools.
after solving it, in the activity tab, it shows new logs, means it's updated.
It works on mobile now, both through localhost-server and url as https://connect-geeks.herokuapp.com/
I know this is an old question, but I'll post the answer in case anyone needs it.
The problem is in your server.js (Backend) file.
You need to put the middlewares in server.js in the following order.
order of the middlewares
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
Hey i'm trying to run nodemon to perform the command npm start which uses concurrently to open 3 nodejs processes
this is my package.json
{
"name": "web",
"version": "1.0.0",
"description": "Classic website",
"main": "index.js",
"scripts": {
"site": "node site/index.js",
"socket": "node socket/index.js",
"bots": "node bots/index.js",
"start": "concurrent \"npm run site\" \"npm run socket\" \"npm run bots\" "
},
"keywords": [
"gsa",
"web"
],
"author": "sas",
"license": "ISC",
"dependencies": {
"child_process": "^1.0.2",
"concurrently": "^3.5.1",
"express": "^4.16.2",
"express-handlebars": "^3.0.0"
}
}
However when i run nodemon i get an error -
Error: Cannot find module 'D:\skindole\index.js'
What command exactly are you entering when you run nodemon? I think perhaps if you remove "main": "index.js", from the package.json you may have success.
I think what you want to do is in the start scripts for each of the site, socket, and bots replace node with nodemon.
I ran into the same issue with concurrently, however, adding --raw param to concurrently did a trick for me.
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"wave": "concurrently --raw \"npm run client\" \"npm run server \""
},
Try using && instead of concurrent?
"start": "npm run site && npm run socket && npm run bots"