Loopback 4 deployment in heroku, lb-tsc not found error - node.js

I'm trying to deploy a loopback 4 app into heroku.
But after publishing it npm-start command not working in heroku console.
its throwing sh: 1: lb-tsc not found.
package.json is as follows
"devDependencies": {
"#loopback/build": "^3.0.0",
"#loopback/eslint-config": "^5.0.0",
"#loopback/testlab": "^1.10.0",
"#types/node": "^10.17.6",
"#typescript-eslint/eslint-plugin": "^2.10.0",
"#typescript-eslint/parser": "^2.10.0",
"eslint": "^6.7.2",
"eslint-config-prettier": "^6.7.0",
"eslint-plugin-eslint-plugin": "^2.1.0",
"eslint-plugin-mocha": "^6.2.2",
"source-map-support": "^0.5.16",
"typescript": "~3.7.3"},
"scripts": {
"build": "lb-tsc",
"build:watch": "lb-tsc --watch",
"clean": "lb-clean dist *.tsbuildinfo",
.......
"lb-tsc": "lb-tsc",
"postinstall": "npm run lb-tsc"
}

Creating a Procfile in the root of the project containing web: node . fixed this for me. Without it, Heroku will default to starting the app by calling npm run which tries to run the build process, and since #loopback/build is set up as a dev dependency by default, this results in the lb-tsc not found error.

When heroku runs node application the value of process.env.NODE_ENV is "production" you may check it from heroku terminal bash by typing node and then process.env
And this means that dev dependencies are not resolved.
Below steps work fine to me
Open package.json file copy all from dev dependeny section and paste it to dependency section in package.json
git add . then git commit and then git push heroku master
Another Solution:
After pushing files to heroku using git push heroku master go to heroku terminal from https://dashboard.heroku.com/ and start console and then run command node dist/index.js so this command will start loopBack application make sure dist folder is available.

I have tried many solutions and it works when I do the following things :
Make sure heroku has a nodeJs builpack running in your terminal
heroku buildpacks:set heroku/nodejs
Then, create a Procfile to the root of your project and add :
web: node index.js
Finally add a heroku-postbuild script :
"heroku-postbuild": "npm run build"
Hope it helps !

Try to install it in the command line:
npm i -g #loopback/cli
npm i -g #loopback/build
I'm using it in macos from command line.

I read somewhere to replace web: slc run with web: node . in Procfile, and it seems to be working in Heroku! I do see the explorer and can use all the endpoints.
I mention this also in this Github issue:
https://github.com/strongloop/loopback.io/issues/810

Related

Index.html not loading when npx serve is run (caddy, nodejs)

I'm running fastify on node.js and using Caddy server for reverse proxying localhost to a domain (authsvc.dev) that serves up an index.html file in this UI project.
All was running fine until a couple days ago. Now, when I run npm run ui I get the following error messages in the console. The index.html file is not being served up. The src/public/index.html file exists and was working a couple days ago, but maybe some issue with npx serve {{path-to-file}}? Please help!
ERROR: Not able to read /{{path-to-proj}}/ui/src/public/index.html/serve.json: ENOTDIR: not a directory, open '/{{path-to-proj}}/ui/src/public/index.html/serve.json'
npx serve src/public/index.html exited with code 1
Not sure where or why index.html/serve.json is trying to be read and how to go about fixing it.
I'm running macOs Big Sur v11.6
Some things I've tried.
Deleting node_modules and npm install
Deleting package-lock.json and npm install
updating to latest npm
Changing to different version of node (now on v14.15.1)
Clearing npm cache rm -rf ~/.npm npm clear cache
npx serve src/public/ -- allows me to see when I'm at localhost:5000, but not authsvc.dev
I do have Caddy running with a reverse proxy set up.
{
local_certs
}
authsvc.dev {
reverse_proxy 127.0.0.1:5000
}
api.authsvc.dev {
reverse_proxy 127.0.0.1:4000
}
Host file
127.0.0.1 authsvc.dev
127.0.0.1 api.authsvc.dev
package.json scripts
"scripts": {
"all": "concurrently \"npm run server\" \"cd ../ui\" \"npm run ui\"",
"server": "cd ../api && npm run start",
"ui": "concurrently \"nodemon src/index.js\" \"npx serve src/public/index.html\"",
"ui1": "nodemon src/index.js",
"ui2": "npx serve src/public/",
"caddy": "caddy run",
"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js --watchAll"
},
"dependencies": {
"colors": "^1.4.0",
"concurrently": "^6.2.2",
"cross-fetch": "^3.1.4",
"dotenv": "^10.0.0",
"fastify": "^3.22.0",
"fastify-static": "^4.2.3"
}
Serve should not take an .html file but the folder containing your entire website.
You can try this command : serve src/public/, without the npx prefix and normally it should work 😉

How to deploy a React SSR application to Heroku?

I have simple running react Server Side App .
GitHub Link for the repo, in the local env i have a build script that runs using npm start which starts the client and server builds and then i have a watcher which listen's to changes in file. This set up works really well locally.
"scripts": {
"start": "npm run dev",
"dev": "npm-run-all --parallel dev:*",
"dev:server": "nodemon --watch build --exec \"node build/bundle.js\"",
"dev:build-server": "webpack --config webpack.server.js --watch",
"dev:build-client": "webpack --config webpack.client.js --watch"
},
I tried to deploy these changes as a prod app to heroku here for some odd reason it never works and returns 503 . I have not added any changes to the build scripts in the package.json and tried deploying as is.
I thought it should work as the build log dosent give any errors on heroku but while trying to access the app it shows error and asks me to check app log but i am not using heroku cli and not planning on using it , and
thinking of auto deployment from github.
I am quite new to script/ largely build scripts trying to learn more on them.
How can we make sure this small React SSR git repo deploys and i am
able to access the home page .
I am not using heroku cli and not planning on using it
You should and I really recommend, as it's the best way to see errors that occurs after the build, why your app crashed and see the full logs. Even though you can see the logs from your heroku dashbord (More -> View logs), this only gives you the tail of the logs.
How can we make sure this small React SSR git repo deploys and i am able to access the home page.
Make sure the server is listening on the right port
by using process.env.PORT as heroku expose a dynamic port.
const port = process.env.PORT || 3000
app.listen(port, () => {
console.log('Listening on Port ' + port);
})
On heroku the NODE_ENV environment variable is set toproduction by default,
which means heroku will prune thedevDependencies after the build,
but in your case, you still need these dependencies to start your app with webpack.
You can fix this in two ways :
Customize your build process by adding a build script:
From your github
repo
:
"start": "webpack --config webpack.client.js; webpack --config webpack.server.js; node build/bundle.js"
to
"scripts": {
"start": "node build/bundle.js",
"build": "webpack --config webpack.client.js & webpack --config webpack.server.js",
"build:start": "webpack --config webpack.client.js && webpack --config webpack.server.js && node build/bundle.js",
}
Set the NODE_ENV to any other value to skip pruning your
devDependencies
heroku config:set NODE_ENV=development //(Another reason to use the CLI)
Check this link for more details

Node.js app doesn't work when I try to host it via GCP deploy command. Error: Cannot find module 'express'

I have my NodeJS app wrote using TypeScript and based on the Express framework. I want to host it in GCP cloud with gcloud app deploy command.
So, first of all, I build my TS sources to JavaScript -is that the correct way of doing it?.
Then from the build (with JS source code) folder I'm trying to run npm start command and it works successfully and I'm also able to check it with Preview:
.
It works well. So far, so good.
Then I run gcloud app deploy from the build folder (with built to JS sources) and I didn't see any errors during deploy.
But afterward, I receive a 500 error on each request whenever I'm trying to reach the deployed app. I've taken a look into a log and I see next error:
Error: Cannot find module 'express'
What seems to be the problem?
I tried the next commands in the build folder:
npm install
npm install express --save
npm install -g express
sudo apt-get install node-express
Nothing works for me.
Here is my package.json file:
{
"name": "full-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "tsc",
"dev": "node -r ts-node/register ./src/server.ts",
"debug": "ts-node --inspect ./src/server.ts",
"start": "node build/server.js",
"prod": "npm run build && npm run start"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-node": "^7.0.1",
"typescript": "^3.0.1"
},
"dependencies": {
"#types/lodash": "^4.14.116",
"body-parser": "^1.18.3",
"connect": "^3.6.6",
"cors": "^2.8.4",
"crypto": "^1.0.1",
"express": "^4.16.3",
"firebase-admin": "^6.0.0",
"lodash": "^4.17.10"
}
}
Any idea what I'm missed? Is this the correct way to deploy an app wrote with TypeScript to GCP cloud?
app.yaml:
# [START app_yaml]
runtime: nodejs8
# [END app_yaml]
since you are running gcloud app deploy from within the build folder,probably the package.json is not deployed as npm install is run first by app engine there is no way express could be missing.you can go to gcp console and under app engine view the version and then under diagnose you can view the source(the files that were actually deployed to app engine).keep in mind that this is only possible for the standard version and not the flex.I can see from your app.yaml you are using the standard.If some files are missing then go to your app root directory and in your .gcloudignore file you can ignore the files/folders you do not want to deploy.then run gcloud app deploy from within the root directory of your project
The problem was pretty simple. Seems like gcloud app deploy use npm run build & npm run start commands to start application somewhere inside. To host Node.Js wrote on TS first we need to build it to simple JS using tsc command. Then in the build folder rewrite package.json file to use correct commands. Look at my start command: "start": "node build/server.js". I was using it inside build folder as well so that's mean gcloud command was searching in /build/build/ folder. I've changed start command to "start": "node server.js" and then all works well.

NextJS cannot find a valid build in the '.next' directory

I looked at the following question before asking this one but I believe mine is different because I am not using Docker: Nextjs fails to find valid build in the '.next' directory in production node_env
I also tried this approach of removing the '.next' folder but still get the same issue.
After fixing a host of other issues, I am down to one I cannot seem to resolve. When I try to deploy to Heroku I keep getting the following error:
node server.js
Could not find a valid build in the '.next' directory! Try building your app with 'next build' before starting the server.
Here is my package.json file:
{
"name": "StarterApp",
"version": "1.0.0",
"engines": {
"node": "10.4.1"
},
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha",
"dev": "node server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "4.16.3",
"fs-extra": "^5.0.0",
"ganache-cli": "^6.1.3",
"mocha": "^5.2.0",
"next": "^4.2.3",
"next-routes": "^1.4.2",
"node-gyp": "^3.7.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"rebuild": "^0.1.2",
"semantic-ui-css": "^2.3.2",
"semantic-ui-react": "^0.79.1",
"sha3": "^1.2.2",
"solc": "^0.4.24",
"truffle-hdwallet-provider": "0.0.3",
"web3": "^1.0.0-beta.34"
}
}
Server.js file:
const { createServer } = require('http');
const next = require('next');
const app = next({
dev: process.env.NODE_ENV !== 'production'
});
const routes = require('./routes');
const handler = routes.getRequestHandler(app);
app.prepare().then(() => {
createServer(handler).listen(5000, (err) => {
if (err) throw err;
console.log('Ready on localhost:5000');
});
});
The app deploys without issue locally but I get this error when deploying to Heroku. What am I doing wrong?
npm run build
then
npm run start
solved my problem.
First
npm run-script build
Then
npm run start
Just see the error carefully:
Error: Could not find a production build in the 'E:\Developer's Area\weatherteller\.next' directory. Try building your app with 'next build' before s at Server.readBuildId (E:\Developer's Area\weatherteller\node_modules\next\dist\next-server\server\next-server.js:146:355)
at new Server (E:\Developer's Area\weatherteller\node_modules\next\dist\next-server\server\next-server.js:3:120)
at createServer (E:\Developer's Area\weatherteller\node_modules\next\dist\server\next.js:2:638)
at start (E:\Developer's Area\weatherteller\node_modules\next\dist\server\lib\start-server.js:1:323)
at nextStart (E:\Developer's Area\weatherteller\node_modules\next\dist\cli\next-start.js:19:125)
at E:\Developer's Area\weatherteller\node_modules\next\dist\bin\next:27:115
while running
npm start
It's not able to locate the production build which is required to launch the next app. While creating next app using
npm install next react react-dom --save
.next folder was not created so you need to create the .next folder first using
npm build
which will consist of all your production build files.
After npm build the folder will be created and you can run your app using
npm start
Also, make sure these scripts are in your next app
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
Hope this resolves your error 😀😀
I had the same issue once.
First, remove package-lock.json or yarn.lock files and node_modules folder and make sure you install all the packages again with the yarn command.
I had to run yarn build first and then the yarn start command was working fine afterward.
Also if the currently used port is taken by another app you will have issues running your dev environment. You can easily fix that by going into the package.json file and modifying the "dev" script like this: "dev": PORT=7080 next dev".
Also possibly you are mixing Next.js with React because in Next.js you should use yarn dev to start your project for development instead of yarn start.
I hope this was helpful to you.
NextJS building may be (depending on your project size), be extremely large, something that can cost you money during deploys.
You can apply the following to your package.json
{
"script": {
"build": "next build",
"heroku-postbuild": "npm run build",
"start": "next start"
}
}
I was getting this error when trying to start a production server from the build directory after setting.
distDir: 'build',
actual error
Error: Could not find a production build in the '/home/username/awesome-app/build/build' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id
and my start command
$ next start build
so I moved the next build directory to another directory named build and it works, and if you are using environment variable put that file inside the build directory.

Error running Grunt Build on Heroku

So I am installing a simple Backbone application on Heroku that I generated using the Yeoman Backbone generator. I have a very simple node.js server file to serve up the Backbone application, but had trouble deploying to Heroku due to missing dependencies:
Output:
remote: Loading "Gruntfile.js" tasks...ERROR
remote: >> Error: Cannot find module 'connect-livereload'
remote: Warning: Task "build" not found. Use --force to continue.
Server.js
var express = require('express');
var app = express();
var port = process.env.PORT || 8080;
app.use(express.static(__dirname + '/app'));
app.listen(port, function() {
console.log('App is running on port ' + port);
});
packages.json
{
"name": "ssi",
"version": "0.0.0",
"dependencies": {
...
},
"devDependencies": {
"bower": "^1.4.1",
"connect": "^3.3.5",
"grunt": "^0.4.5",
"grunt-cli": "^0.1.13",
...
},
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"start": "node server.js",
"test": "mocha",
"postinstall": "bower install && grunt build"
}
}
Originally I had problems running bower install because I hadn't added bower to the dependencies in packages.json, so I thought, "maybe I have to add it to the normal dependencies list instead of devDependencies, since this is my deployment process.
So I added bower and grunt to the dependencies list, but then it would fail while running grunt build because now it couldn't find any of the required grunt modules used during the build task. I figured there must be a better way to let Heroku see these dependencies without adding them to the production dependencies list.
I already tried setting the NODE_ENV variable to "development" like so:
$ heroku config:set NODE_ENV=development
But that didn't seem to have any effect. So since I am answering my own question, the hypothetical question in question is:
"How do I get Heroku to run bower install and grunt build without having to move all my dependencies into the production dependencies list?"
N.B. - I realise that a "proper" deployment process might instead add all this stuff to a distribution folder, including the dependencies. This question and answer are aimed at those, like me, who are instead attempting to just push their current build to Heroku without having to set up a "better" deployment process just yet.
In the end the solution was very simple. In the first few lines of the console output when pushing my app to Heroku, is the following line:
remote: NPM_CONFIG_PRODUCTION=true
It appears that changing this environment variable to false will cause NPM to install the devDependencies list as well. So just type in the following:
$ heroku config:set NPM_CONFIG_PRODUCTION=false
And you should then see Heroku build and deploy successfully.

Resources