NPM run build with React + Node + concurrently How to? - node.js

I have spend hours trying to figure this out any advice is welcome. The objective here is to assemble a postbuild script that will work on a nodeJS app running a react client.
React is on post 3000 and node is on 5000. So it requires the concurrently library. Below are two attempts do-postbuild and heroku-postbuild (both fail).
"scripts": {
"server": "nodemon server.js --ignore client",
"client": "npm start --prefix ../client",
"dev": "concurrently \"npm run server\" \"npm run client\" ",
"do-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix && npm run build --prefix client",
"heroku-postbuild": "cd ../client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
},
folder structure
client
server
|_package.json (above)
|_server.js
npm run dev - WORKS perfectly
When I attempt npm run heroku-postbuild it yields the following:
npm ERR! errno 1
npm ERR! ver1.02#1.0.0 heroku-postbuild: `cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build`
npm ERR! Exit status 1
When attempting to write npm run do-postbuild it throws an error like it is searching for client in the server folder
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/sites/server/client/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

This is not a HEROKU solution it is for general UBUNTU server with root access.
Solution here is you don't have to dockerize the app as a bundle (client and server together).
What worked for me was to treat the client and server as two different apps.
Client side:
npm run build locally from the same folder as contains your package.json file
then post the app build folder as very straight forward client side app with HTML CSS Javascript
Server side:
upload the server files (not including node_modules folder)
run npm i(from the folder with the package.json file)
I set up reverse proxy to map the port to a specific location on the server for the react to reach it
set up cron job to start server side (and check periodically to ensure it is running)
Thats it - works perfect.

Please add below Scripts and try, it will work 100%.
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
}

Add this in your scripts
"client-install": "npm install --prefix client",

Related

package.json configuration to run server and Client

This is my configuration for the global package.json
"server": "npm run watch --prefix server",
"client": "npm run start --prefix client",
"deploy": "npm run server & npm run client",
when i run directly in the terminal : npm run server & npm run client it it runs correctly
but if I write: npm run deploy it runs only the server.I don't know why. please if u know guys tell me.
I think the problem solve by using this command
npm server & npm client
USE Start keyword
{ "server": "npm run watch --prefix server",
"client": "npm run start --prefix client",
"deploy": "start npm run server & start npm run client",
}
then run command
npm run deploy

How to run mongodb via npm script?

Under the script in my package.json, the code is written as:
"scripts": {
"db": "mongod",
"start": "node app.js",
"server": "nodemon app.js",
"client": "npm run start --prefix client",
"dev": "concurrently \"npm run db\" \"npm run server\" \"npm run client\"",
"postinstall": "cd client && npm install"
},
I want the mongodb to start running after typing in npm run dev. However, it failed and the error messages showing up in my command prompt were as follows:
[0] npm ERR! code ELIFECYCLE
[0] npm ERR! errno 100
[0] npm ERR! projectName db: `mongod`
[0] npm ERR! Exit status 100
There is no problem running mongodb if I open a separate terminal and type mongod. It only arises when I try to run the database, server and client in one line of code via npm run dev.
If you intend to simply start mongo before your project then best approach will be just write a shellscript which executes command to perform your operations , and to save and check command output you can write that logs in another file . in your Case below will be the best idea, create file called runLocalSetup.sh and add below code
#!/bin/bash
exec &> logfile.txt
service mongod start
npm run dev
above code will start mongo service and then execute the app, and create the log of command output

npm run build works fine on local machine but shows error on remote ubuntu server

I'm trying to deploy my MERN app on the digital ocean remote ubuntu server. After git clone, I did npm install to my root folder, client folder, and server folder. But when I tried to run npm start from the root folder then only the server app was running and an error came on the client-side. So I did cd into the client folder and tried the command npm run build (which I did on my local machine as well and the optimized build got created successfully) but it showed the below error on the remote server
> client#0.1.0 build /home/nishant/apps/rentaporta/client
> react-scripts build
Creating an optimized production build...
The build failed because the process exited too early. This probably means the system ran out of memory or someone called `kill -9` on the process.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/nishant/.npm/_logs/2020-10-27T05_22_30_755Z-debug.log
I deleted node_modules, package-lock.json, and tried the npm ci command as well but there was no improvement. My folder structure is
root
client
server
Below is my package.json script in root folder
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"client-install": "npm install --prefix client",
"server-install": "npm install ---prefix server",
"server": "npm start --prefix server",
"client": "npm start --prefix client",
"build-client": "npm run build --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"start": "npm run server-install & concurrently \"npm run build-client\" \"npm run server\""
},
Please, someone, help me. If you need more explanation I'm ready to put more details as needed.
finally, I figured out the problem. My remote ubuntu server had 1GB ram but there was no swap memory. I used the command sudo free -h, and found swap memory was 0. So, I followed this article (https://www.digitalocean.com/community/tutorials/how-to-add-swap-space-on-ubuntu-16-04) to create the swap memory, and finally, my app got deployed.
Also, cd into your client folder and run this command in the terminal-
$ export NODE_OPTIONS=--max-old-space-size=8192

How can I deploy a Node Express and React app to Heroku, after running with Travis CI?

Following Setup:
A Node Express server, running on localhost:5000.
A client folder created with create-react-app directly in the server folder.
CI Integration with Travis CI
I want to deploy my app to heroku when it's passing. Therefore I created following .travis.yml:
language: node_js
before_install:
- npm install && node index.js &
before_script: cd ./client && npm install
node_js:
- "stable"
cache:
directories:
- node_modules
script:
- npm run test
- npm run lint
- npm run build
notifications:
slack: clicker-web:myslack
deploy:
provider: heroku
api_key: "mykey"
app: test999111test
on: heroku-deployment-testing
So I got it to deploy to heroku and not failing with travis.
But in the heroku app itself I just get the error (in the console):
npm ERR! code ELIFECYCLE
2018-04-15T15:15:31.033343+00:00 app[web.1]: npm ERR! errno 1
2018-04-15T15:15:31.034412+00:00 app[web.1]: npm ERR! Clicker#0.1.0 start: `node scripts/start.js`
2018-04-15T15:15:31.034622+00:00 app[web.1]: npm ERR! Exit status 1
2018-04-15T15:15:31.034841+00:00 app[web.1]: npm ERR!
2018-04-15T15:15:31.035019+00:00 app[web.1]: npm ERR! Failed at the Clicker#0.1.0 start script.
So I'm pretty sure it has to be something wrong with my setup.
This is the package.json I have set up in the server (root) directory (just a snippet of code you need):
"engines": {
"node": "8.1.1",
"npm": "5.0.3"
},
"scripts": {
"client": "npm start --prefix client",
"buildclient": "npm build --prefix client",
"server": "nodemon index.js",
"dev":
"concurrently --kill-others-on-fail \"npm run server\" \"npm run client\"",
"build": "concurrently \"npm run server\" \"npm run client\"",
"test": "npm run server",
"start": "node index.js",
"heroku-postbuild":
"npm run install --prefix client && npm run build --prefix client"
I use a proxy in my application for development which is working just fine. But in prod on heroku I don't need it. I have created these lines in the index.js (in server root):
const path = require("path");
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
But I always get the same error from Heroku. What did I do wrong and how to deploy a project with server + client combined to heroku from Travis with best practice?
Here is the Project, where you can see the file structure. I'm on the heroku-deployment-testing branch right now.
Github Repo
Also here is the herokuapp which isn't showing anything besides an error:
Heroku App
Last but not least the travis logs (the last part where it's deploying):
Try to use this config
language: node_js
node_js:
- '8'
cache:
directories:
- node_modules
- client/node_modules
install:
- npm install
- npm run build
script:
- nohup npm run start &
- sleep 3
- npm run test
- npm run lint
deploy:
provider: heroku
api_key:
secure: API_KEY
app: YOUR_APP_NAME
I believe you don't need before_install and before_script sections.
And also you don't need to run npm run build script since you're building your application with "heroku_postbuild" script in your package.json.

Getting "Cannot find module '/app/dist'" error on deploying to Heroku

I have the following script in my package.json:
"scripts": {
"dev": "nodemon server --exec babel-node --presets es2015,stage-2",
"build": "babel ./server -d ./dist",
"start": "node ./dist",
"heroku-postbuild": "cd react-ui/ && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
},
On deploying to Heroku I get the following error
Error: Cannot find module '/app/dist'
On local npm run dev, npm run build, and npm run start work fine.
Where is it getting the /app folder? How to fix this?
Thanks
Matloob
You should build your app npm run build before deploy to heroku. It will run heroku-postbuild first then start your app.
Try this :
"start:heroku": "node dist/YOUR-APP-NAME/server/main.js",

Resources