Heroku deployment issues with create-react-app - node.js

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.

Related

Issues while building the Next js website

I'm working on a nextjs webapp, it's a static website built with Chakra UI. Everything was working quite good till now but suddenly my productions stopped building. It is showing building forever. I'm deploying it on the Vercel but the same issue is arising there as well.
My previous deploymnt is live at https://siws.vercel.app and it's working fine but I'm not able to push another deployment due to this issue. And I don't even know the root cause of this.
I even tried deleting the ./next folder and building again but the facing the same issue.
Here is some information that maybe relevant:
Node JS version: 19.1.0
And here is my package.json file:
"name": "slayitwithskin",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"#chakra-ui/react": "^2.4.1",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#splidejs/react-splide": "^0.7.12",
"eslint": "8.27.0",
"eslint-config-next": "13.0.3",
"framer-motion": "^7.6.6",
"next": "13.0.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.6.0",
"react-rainbow-components": "^1.31.0",
"sass": "^1.56.1"
}
}
Any sort of help is really appreciated.
I checked my package.json file, I was using react-rainbow-components which was the root cause of this issue. I completely removed and the app is now building quickly.

Deploy to Node App Azure App Service tsc not recognized as command

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

Npm ‘Dev’ Watchify/Browserify/vueify cmd to compile Vue component and start Express server fails? (server fails to start)

I’m following a tutorial https://mindthecode.com/using-vue-components-in-your-express-app/ to use vue components with Express.
Part of that is configuring an npm dev script to compile the vue component with Browserify/vueify, start Watchify, then start the Express Server.
Every step of the turorial worked but the ‘dev’ script doesn't work 100% as the express server doesn't start.
Can anyone help figure how what is wrong or what I need to do to get that script working?
Package.json
"scripts": {
"start": "echo 'server starting on port 3000' & node ./bin/www",
"dev": "watchify -vd -p browserify-hmr -t vueify -e public/javascripts/main.js -o public/javascripts/bundle.js & node ./bin/www"
},
‘npm run dev’ compiles the vue component and starts watchify and the hot reload works if I change the vue component code. HOWEVER, the express server fails to start?
Note:
browserify -t vueify -e public/javascripts/main.js -o public/javascripts/bundle.js – works fine at the command line to compile the .vue files
npm start – works fine and can load page at ‘localhost:3000’
I'm using windows10, node v8.9.4 and some of the relevant dependencies from package.json
"browserify-hmr": "^0.3.5",
"express": "~4.14.0",
"vue": "^2.5.0",
"vueify": "^9.4.1",
"watchify": "^3.9.0"
You can see completed package.json and full repo from this tutorial
https://github.com/Hyra/vue-components-in-express/blob/master/package.json
{
"name": "vue-components-in-express",
"version": "0.0.1",
"private": false,
"description": "Sample code to support blog post 'Using Vue Components in your Express app' at https://mindthecode.com/using-vue-components-in-your-express-app/",
"author": "Stef van den Ham <stef#mindthecode.com>",
"scripts": {
"start": "node ./bin/www",
"dev": "watchify -vd -p browserify-hmr -t vueify -e public/javascripts/main.js -o public/javascripts/bundle.js & node ./bin/www"
},
"dependencies": {
"body-parser": "~1.15.2",
"browserify-hmr": "^0.3.5",
"cookie-parser": "~1.4.3",
"debug": "~2.2.0",
"express": "~4.14.0",
"morgan": "~1.7.0",
"node-sass": "^4.5.3",
"pug": "~2.0.0-beta6",
"serve-favicon": "~2.3.0",
"vue": "^2.5.0",
"vueify": "^9.4.1",
"watchify": "^3.9.0"
}
}

How to deploy 'create-react-app' to Heroku with custom back-end api

I'm trying to deploy a 'create-react-app' project to Heroku. I used the Heroku Create-React-App boilerplate and followed another tutorial on setting up a backend api for connecting to my custom server.js file.
When I deploy to Heroku, the build runs fine but my app still will not connect to my server.js file.
I assume this is either because the proxy property in my package.json is supposed to point to the same port defined in my server.js file (which Heroku would assign automatically, which I don't know how to check) or perhaps my server.js file isn't running at all.
Been having a very hard time finding any resources that properly explain how to deploy a 'create-react-app' with a custom back-end (server.js).
package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"proxy": "https://localhost:5000",
"dependencies": {
"axios": "^0.17.1",
"body-parser": "^1.18.2",
"md5": "^2.2.1",
"mongodb": "^3.0.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2"
},
"scripts": {
"start": "react-scripts start",
"start:server":"node server.js",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Line in server.js where I set the port:
const port = process.env.PORT || 5000;
I was able to deploy my app to Heroku by following this tutorial from fullstackreact.com and studying the accompanying repo.
Basically, I needed to bundle my client-side code and then make sure my server.js file was serving that bundle as a static file. I'm sure there's other ways to go about this, like running concurrent scripts for the webpack-dev-server and the backend api (server.js), but this worked for me without much headaches.

Error R10 (Boot timeout) on heroku, works in <5 sec using npm start and heroku locally

I'm trying to run a node.js app on heroku, it runs fine using npm start and using heroku locally, but does not run when hosted on heroku. I have looked through all the solutions i could find, the remote mongodb database works fine when run using npm start, my port is set up correctly, have restarted heroku and dynamos a bunch of times, and I have a procfile with the following:
web node index.js
The following is the console messages I get:
Starting process with command `node index.js`
Warning: connect.session() MemoryStore is not
designed for a production environment, as it will leak
memory, and will not scale past a single process.
Application ready to serve requests.
Environment: production
app[web.1]: (node:4) DeprecationWarning: `open()` is deprecated in
mongoose >= 4.11.0,
use `openUri()` instead, or set the `useMongoClient` option if using
`connect()`
or `createConnection()`. See
http://mongoosejs.com/docs/connections.html#use-mongo-client
Db.prototype.authenticate method will no longer be available in the
next major
release 3.x as MongoDB 3.6 will only allow auth against users in the
admin db
and will no longer allow multiple credentials on a socket. Please
authenticate using MongoClient.connect with auth credentials.
DB Connection Open...
Error R10 (Boot timeout) -> Web process failed to bind to $PORT within
60 seconds of launch
Stopping process with SIGKILL
Process exited with status 137
This is my package.json:
{
"name": "shop",
"version": "0.1.0",
"description": "eCommerce Site",
"author": "Slav Bugryn",
"main": "index.js",
"scripts": {
"test": "grunt test",
"build": "grunt build",
"all": "npm run build && npm run test",
"start": "node server.js"
},
"dependencies": {
"connect-flash": "^0.1.1",
"construx": "^1.0.0",
"construx-copier": "^1.0.0",
"construx-dustjs": "^1.1.0",
"construx-less": "^1.0.0",
"dust-makara-helpers": "^4.2.0",
"dustjs-helpers": "^1.7.3",
"eslint": "^4.12.1",
"express": "^4.12.2",
"express-messages": "^1.0.1",
"kraken-js": "^2.0.0",
"makara": "^2.0.3",
"mongodb": "^2.2.33",
"mongoose": "^4.13.6",
"requirejs": "^2.3.5"
},
"devDependencies": {
"grunt": "^1.0.1",
"grunt-cli": "^1.2.0",
"grunt-config-dir": "^0.3.2",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-less": "^1.4.1",
"grunt-contrib-requirejs": "^1.0.0",
"grunt-copy-to": "0.0.12",
"grunt-dustjs": "^1.4.0",
"grunt-eslint": "^20.1.0",
"grunt-makara-amdify": "^1.0.1",
"grunt-mocha-cli": "^3.0.0",
"mocha": "^4.0.1",
"supertest": "^3.0.0"
},
"directories": {
"lib": "lib",
"test": "test"
},
"keywords": [],
"license": "ISC"
}
Any advice would be greatly appreciated, thanks in advance.
Figured it out! I sent the Procfile to the wrong place (had to go to server.js, which i found out by looking in package.json and finds start under scripts), after fixing that I got another error (same as here, where i also got the fix: Got a internal server error after I deploy my node js project to the host) which i fixed by running grunt build (had to use --force too).

Resources