Heroku Express Creat-React-App Mlab deployment - cannot GET - reactjs

Looking for some help. I've just deployed my first react/express/mongo app to heroku but it loads up with cannot GET and I can't seem to see any errors which indicate why.
This is my folder structure:
My top level package.json file looks like
{
"name": "russia_2018",
"version": "1.0.0",
"description": "",
"main": "index.js",
"engines": {
"node": "9.5.0"
},
"scripts": {
"build": "concurrently \"cd client && yarn build\" \"cd server &&
yarn build\"",
"clean": "concurrently \"rimraf node_modules\" \"cd client && rimraf
node_modules build\" \"cd server && rimraf node_modules build\"",
"heroku-postbuild": "yarn build",
"install": "(cd client && yarn) && (cd server && yarn)",
"start": "concurrently \"cd client && PORT=3000 yarn start\" \"cd
server && PORT=3001 yarn start\"",
"start:prod": "cd server && yarn start:prod",
"heroku-postbuild": "cd client && yarn && yarn run build"
}
Procfile:
web: yarn start:prod
Server package.json
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel . --ignore node_modules,build --out-dir build",
"start": "nodemon -r babel-register server.js",
"start:prod": "node server.js",
"seeds": "mongo < db/seeds.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"nodemon": "^1.17.5"
},
"dependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"body-parser": "^1.18.3",
"express": "^4.16.3",
"mongod": "^2.0.0",
"mongodb": "^3.1.1"
}
}
And server.js:
const express = require('express');
const app = express();
const path = require('path');
const parser = require('body-parser');
const MongoClient = require('mongodb').MongoClient;
const createRouter = require('./helpers/create_router.js');
const staticFiles = express.static(path.join(__dirname,
'../../client/build'))
app.use(staticFiles)
app.use(parser.json())
MongoClient.connect('mongodb://full-url...
||'mongodb://localhost:27017'', (err, client) => {
if(err){
console.log(err);
}
const db = client.db('russia');
const games = db.collection('games');
const gamesRouter = createRouter(games);
app.use('/api/games', gamesRouter);
app.use('/*', staticFiles)
app.listen(process.env.PORT || 3001, function(){
console.log('listening on port 3001');
})
});
I can't see where the error is coming from as the logs show that the app has connected to the home route fine. The only line which looks like it may be an error is Stopping all processes with SIGTERM but the app continues to connect after that.
Thanks

Seems like heroku is never getting your build folder. Your procfile species this command for herkou to call on deploy web: yarn start:prod. Looking at your top level package.json it seems that start:prod only does this "start:prod": "cd server && yarn start:prod" which does not include any instructions about building the react app.
You may need change your procfile to call a command which will build the client folder for you and then start the server once that's done.
You can also build the folder locally, and remove it from the client side .gitignore so that heroku can just start the server and already have the build folder available.
You may have already seen this article, but if not, it's a very good read on the topic.

Related

I am trying to deploy my nextjs app to git hub page. but it is not deploying in the correct way

I'm trying to deploy my nextjs app to git hub page. but the production is very slow. and everytime it publishes shows only the read.md. the way I deployed is below.
installed the gh-pages into devDependencies.
added replacer.js with following code..
const replace = require("replace-in-file");
const options = {
//you may need to modify the file address to suite your project
files: "./build/index.html",
from: [/src="\//g, /href="\//g],
to: ['src="./', 'href="./'],
};
(async function () {
try {
const results = await replace(options);
console.log("Replacement results:", results);
} catch (error) {
console.error("Error occurred:", error);
}
})();
updated next.config.js is below
module.exports = {
Images: {
domains: ["/public", "fakestoreapi.com"],
env: {
PUBLIC_URL: "https://imangi.github.io/amazon-clone",
assetPrefix: "./",
},
},
};
updated package.json file is as below.
{
"name": "amazon-clone",
"version": "1.0.0",
"homepage": "https://imangi.github.io/amazon-clone",
"description": "amazon clone with react & next.js",
"main": "index.js",
"scripts": {
"replaceFilePaths": "node replacer.js",
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build && next export -o build && npm run replaceFilePaths",
"deploy": "gh-pages -d build",
"predeploy": "npm run build",
"export": "next export -o build && npm run replaceFilePaths",
"start": "next start"
},
"author": "Imangi Nanayakkara",
"license": "ISC",
"dependencies": {
"#heroicons/react": "^1.0.6",
"#reduxjs/toolkit": "^1.8.2",
"#tailwindcss/line-clamp": "^0.4.0",
"firebase": "^9.8.2",
"firebase-admin": "^10.2.0",
"next": "^12.1.6",
"next-sitemap": "^3.0.5",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-redux": "^8.0.2",
"react-responsive-carousel": "^3.2.23"
},
"devDependencies": {
"autoprefixer": "^10.4.7",
"gh-pages": "^4.0.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.2"
}
}
Executed the following command:
npm run deploy
pushing _next folder with .nojekyll file to gh-pages branch.

Deploy Next.JS web-app that used Yarn to Google App Engine

I'm trying to deploy a web-app that I've built using templates from a friend. I'm quite unfamiliar with React/NextJS frameworks so I'm unsure with the differences between yarn and npx.
I've used yarn next-build to get the app running locally and it works fine. However, now I'm trying to deploy it to Google App Engine on NodeJS and I can't get it working.
This is the project structure:
/dist/functions/next
/nginx
/node_modules
/packages
/public
.gcloudignore
.nowignore
.prettierrc
.yarnrc
app.yaml
babel.config.js
firebase.json
landing.now.json
lerna.json
package-lock.json
package.json
yarn.lock
This is app.yaml:
runtime: nodejs10
handlers:
- url: /.*
script: auto
This is package.json:
{
"name": "streamplate-landing",
"description": "Your universal health app",
"version": "1.0.0",
"private": true,
"author": "Streamplate",
"devDependencies": {
"#babel/cli": "^7.10.3",
"cpx": "^1.5.0",
"cross-env": "^7.0.2",
"firebase-tools": "8.4.3",
"husky": "^4.2.5",
"lerna": "^3.22.1",
"lint-staged": "^10.2.11",
"prettier": "^2.0.5",
"rimraf": "^3.0.2",
"polished": "^3.4.4"
},
"workspaces": [
"packages/common",
"packages/landing",
"packages/landing-gatsby"
],
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"clean": "lerna clean --yes && rimraf node_modules",
"preweb": "cpx \"packages/common/src/assets/image/**/*.*\" \"packages/landing/static\" -C",
"next-dev": "yarn workspace next-landing run dev",
"next-build": "rimraf dist && yarn workspace next-landing run build",
"next-start": "yarn workspace next-landing run start",
"next-export": "yarn workspace next-landing run export",
"gatsby-dev": "yarn workspace gatsby-landing run dev",
"gatsby-build": "yarn workspace gatsby-landing run build",
"gatsby-serve": "yarn workspace gatsby-landing run serve",
"prebuild-public": "rimraf \"dist/functions/**\" && rimraf \"dist/public\"",
"prefirebase-serve": "yarn run build-public && yarn run build-funcs && yarn workspace next-
landing run build && yarn run copy-deps && yarn run install-deps",
"firebase-serve": "cross-env NODE_ENV=production firebase serve",
"prefirebase-deploy": "yarn run build-public && yarn run build-funcs && yarn workspace next-
landing run build && yarn run copy-deps",
"firebase-deploy": "cross-env NODE_ENV=production firebase deploy",
"build-public": "cpx \"packages/common/src/assets/**/*.*\" \"dist/public/static\" -C && cpx
\"public/**/*.*\" \"dist/public\" -C && cpx \"packages/landing/public/**/*.*\"
\"dist/public\" -C",
"build-funcs": "babel \"packages/functions\" --out-dir \"dist/functions\"",
"copy-deps": "cpx \"packages/landing/*{package.json,package-lock.json,yarn.lock}\"
\"dist/functions\" -C",
"install-deps": "cd \"dist/functions\" && yarn",
"pregatsby-firebase-serve": "rimraf dist && yarn run gatsby-build && cpx \"packages/landing-
gatsby/public/**/*.*\" \"dist/public\" -C",
"gatsby-firebase-serve": "cross-env NODE_ENV=production firebase serve",
"pregatsby-firebase-deploy": "rimraf dist && yarn run gatsby-build && cpx
\"packages/landing-gatsby/public/**/*.*\" \"dist/public\" -C",
"gatsby-firebase-deploy": "firebase deploy",
"netlify-deploy": "yarn workspace next-landing run netlify-build"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,md,css}": [
"prettier --trailing-comma es5 --single-quote --write"
]
}
}
Add the next export into scripts area in your package.json
"scripts": {
...
"build": "next build && next export"
...
after execution yarn build the out directory will be generated and added into your project.
While initializing firebase use out directory as your public.

SyntaxError: Unexpected identifier import bodyParser from 'body-parser'; … In REACT JS app

Create react app on Express originally built using the CRA-E for Heroku instructions here https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851
Locally I can see this error, but my app serves requests correctly anyway. When deploy this on Heroku, I also see this same error, and then for any request I get an H10 "App crashed" in the Heroku logs.
2019-05-26T18:12:00.682298+00:00 app[web.1]: (function (exports, require, module, __filename, __dirname) { import bodyParser from 'body-parser';
2019-05-26T18:12:00.682300+00:00 app[web.1]: ^^^^^^^^^^
2019-05-26T18:12:00.682302+00:00 app[web.1]:
2019-05-26T18:12:00.682304+00:00 app[web.1]: SyntaxError: Unexpected identifier
2019-05-26T18:12:00.682305+00:00 app[web.1]: at new Script (vm.js:84:7)
2019-05-26T18:12:00.682308+00:00 app[web.1]: at createScript (vm.js:264:10)
2019-05-26T18:12:00.682310+00:00 app[web.1]: at Object.runInThisContext (vm.js:312:10)
2019-05-26T18:12:00.682312+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:696:28)
2019-05-26T18:12:00.682313+00:00 app[web.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:747:10)
2019-05-26T18:12:00.682318+00:00 app[web.1]: at Module.load (internal/modules/cjs/loader.js:628:32)
2019-05-26T18:12:00.682319+00:00 app[web.1]: at tryModuleLoad (internal/modules/cjs/loader.js:568:12)
2019-05-26T18:12:00.682321+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:560:3)
2019-05-26T18:12:00.682323+00:00 app[web.1]: at Function.Module.runMain (internal/modules/cjs/loader.js:801:12)
2019-05-26T18:12:00.682324+00:00 app[web.1]: at executeUserCode (internal/bootstrap/node.js:526:15)
2019-05-26T18:12:00.699031+00:00 app[web.1]: error Command failed with exit code 1.
2019-05-26T18:12:00.699246+00:00 app[web.1]: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
2019-05-26T18:12:00.728654+00:00 app[web.1]: error Command failed with exit code 1.
2019-05-26T18:12:00.728814+00:00 app[web.1]: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
2019-05-26T18:12:00.796019+00:00 heroku[web.1]: Process exited with status 1
2019-05-26T18:12:00.814020+00:00 heroku[web.1]: State changed from starting to crashed
the app was created following these CRA-E instructions for Heroku: https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851
The root package.json file is
{
"name": "xxxxxxxxxxxxxx-front",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"bootstrap": "^4.2.1",
"concurrently": "^4.1.0"
},
"scripts": {
"build": "concurrently \"cd client && yarn build\" \"cd server && yarn build\"",
"clean": "concurrently \"rimraf node_modules\" \"cd client && rimraf node_modules build\" \"cd server && rimraf node_modules build\"",
"heroku-postbuild": "yarn build",
"install": "(cd client && yarn) && (cd server && yarn)",
"start": "concurrently \"cd client && PORT=3000 yarn start\" \"cd server && PORT=3001 yarn start\"",
"start:prod": "cd server && yarn start:prod"
},
"engines": {
"node": "11.8.0"
}
}
the client/ package.json is
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001",
"dependencies": {
"boostrap": "^2.0.0",
"bootstrap": "^4.3.1",
"case-sensitive-paths-webpack-plugin": "^2.2.0",
"d3-hierarchy": "^1.1.8",
"d3-selection": "^1.4.0",
"d3-tree": "^1.0.20",
"node-sass": "^4.11.0",
"prop-types": "^15.7.2",
"react": "^16.8.4",
"react-bootstrap-typeahead": "^3.4.1",
"react-dom": "^16.8.4",
"react-scripts": "2.1.8",
"reactstrap": "^6.5.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"main": "index.js",
"license": "SEE LICENSE IN LICENSE.md",
"author": "Jason Fleetwood-Boldt"
}
the server/ pacakge.json file is
{
"name": "server",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"body-parser": "^1.18.3",
"express": "^4.16.4"
},
"devDependencies": {
"babel-register": "^6.26.0",
"nodemon": "^1.18.9"
},
"scripts": {
"start": "nodemon -r babel-register server.js",
"build": "babel . --ignore node_modules,build --out-dir build",
"start:prod": "node build/server.js"
}
}
the server/server.js file is
import bodyParser from 'body-parser'
import express from 'express'
import path from 'path'
const app = express()
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: false}))
const router = express.Router()
const staticFiles = express.static(path.join(__dirname, '../../client/build'))
app.use(staticFiles)
app.use(router)
// any routes not picked up by the server api will be handled by the react router
app.use('/*', staticFiles)
app.set('port', (process.env.PORT || 3001))
app.listen(app.get('port'), () => {
console.log(`Listening on ${app.get('port')}`)
})
If you want to use import statements in a nodejs app, your code needs to be transpiled by babel before it's run. You seem to have installed the babel packages, but you haven't set up a .babelrc file. Try creating a .babelrc file in the server directory with the following contents:
{
"presets": ["es2015", "stage-0"],
"plugins": ["transform-runtime"]
}

cannot deploy MERN to heroku

I'm having a problem deploying my MERN app to heroku, the process faild to react scripts, I've deployed 2 apps before using the same config and postbuild script, also, there is an app that I deployed before with no problem, tried to deploy it again to a new app on heroku just to test things and it fails.
I'm on windows 10 64x by the way, node 10.15.1, npm 6.4.1
{
"name": "recipury",
"version": "1.0.0",
"description": "app to add food recipes",
"main": "server.js",
"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"
},
"author": "abed taki",
"license": "MIT",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.3",
"concurrently": "^4.1.0",
"express": "^4.16.4",
"jsonwebtoken": "^8.4.0",
"mongoose": "^5.4.4",
"multer": "^1.4.1",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"validator": "^10.10.0"
},
"devDependencies": {
"nodemon": "^1.18.9"
},
"engines": {
"node": "10.15.1",
"npm": "6.4.1"
}
}
if you are using error handling in server.js then try to move the app.use(express.static(path.join(__dirname, 'client/buil'))); before calling error

Publish nestjs application in GAE

I'm learning nestjs and I followed this step by step.
The application works correctly. But I want to post it as a microservice in my GAE. I'm also able to do this part well, but when I call the address in the GPC, I'm getting the error 502 - Bad Gateway.
I believe it's something in my package.json file. But I have not figured it out yet. The following is the dependencies configuration:
   "dependencies": {
   "# nestjs / common": "^ 5.0.0",
   "# nestjs / core": "^ 5.0.0",
   "# nestjs / microservices": "^ 5.0.0",
   "# nestjs / testing": "^ 5.0.0",
   "# nestjs / websockets": "^ 5.0.0",
   "reflect-metadata": "^ 0.1.12",
   "rxjs": "^ 6.0.0",
   "typescript": "^ 2.8.0",
   "ts-node": "^ 6.0.0",
   "tsconfig-paths": "^ 3.3.1"
   },
This is my start instruction:
"start": "ts-node -r tsconfig-paths/register src/main.ts",
Finally, my app.yaml:
env: flex
runtime: nodejs
service: nestapp
You could start with the AppEngine Typescript sample project:
https://github.com/GoogleCloudPlatform/nodejs-docs-samples/tree/master/appengine/typescript
It has all the typescript compilation tools setup already. The key lines you need in your package.json scripts are:
"build": "tsc -p tsconfig.build.json",
"gcp-build": "npm run build"
"gcp-build" is a reserved task name which is always executed when deploying an AppEngine NodeJS project. This will ensure your TypeScript is compiled to JavaScript on deploy. You can read more about it here:
https://cloud.google.com/appengine/docs/standard/nodejs/running-custom-build-step
Once you have TypeScript and Express running, you can replace Express with Nest! Some other things you'll need to change, the entrypoint in package.json which AppEngine uses to run the app:
"main": "dist/main.js",
And the port in your Nest app src/main.ts:
const PORT = Number(process.env.PORT) || 8080;
await app.listen(PORT);
In your app.yaml remove env: flex just use the standard environment, it's cheaper!
runtime: nodejs10
Putting it all together, your full package.json will look something like this:
{
"name": "appengine-nest",
"description": "An example TypeScript app running on Google App Engine.",
"version": "0.0.1",
"author": "kmturley",
"license": "MIT",
"engines": {
"node": ">=8.0.0"
},
"main": "dist/main.js",
"scripts": {
"prepare": "npm run build",
"pretest": "npm run build",
"build": "tsc -p tsconfig.build.json",
"deploy": "gcloud app deploy",
"lint": "tslint -p tsconfig.json -c tslint.json",
"start": "node ./dist/main.js",
"start:dev": "nodemon",
"start:debug": "nodemon --config nodemon-debug.json",
"test": "repo-tools test app -- dist/main.js",
"gcp-build": "npm run build"
},
"dependencies": {
"#nestjs/common": "^5.6.2",
"#nestjs/core": "^5.6.2",
"express": "^4.16.3",
"nodemon": "^1.18.9",
"reflect-metadata": "^0.1.13",
"rxjs": "^6.3.3",
"ts-node": "^8.0.2",
"tsconfig-paths": "^3.7.0",
"typescript": "^3.0.1"
},
"devDependencies": {
"#google-cloud/nodejs-repo-tools": "^3.0.0",
"#types/express": "^4.16.0",
"tslint": "^5.11.0"
}
}
I've created an example project here:
https://github.com/kmturley/appengine-nest-angular
The changes required to a
nest new <project>
are:
package.json
(main property and some scripts)
{
...
+ "main": "dist/main.js",
"scripts": {
...
- "build": "nest build",
+ "build": "tsc -p tsconfig.build.json",
+ "gcp-build": "npm run build",
...
- "start": "nest start",
+ "start": "node ./dist/main.js",
}
...
}
src/main.ts
(add port environment variable to be listened to)
async function bootstrap() {
const app = await NestFactory.create(AppModule);
- await app.listen(3000);
+ const PORT = Number(process.env.PORT) || 8080;
+ await app.listen(PORT);
}
bootstrap();
Additionally its suggested to add a deploy script on the package.json script
with the devDependency #google-cloud/nodejs-repo-tools
+ "deploy": "gcloud app deploy"
Note: The solution is #Kim T, I just added it formatted in this way because I had troubling reading and executing it fast

Resources