Heroku doesn't deploy TypeScript Application - javascript

Problem
I've made a typescript discord bot and hosted it on heroku. I get the below error while compiling it and then running it.
Error:
Starting process with command `npm run dev`
State changed from starting to up
Process exited with status 127
> bot#1.0.0 dev
> run-s build start
sh: 1: run-s: not found
State changed from up to crashed
Procfile:
worker: npm run dev
package.json:
// ...
"scripts": {
"build": "tsc",
"watch": "tsc -w",
"start": "node dist/index.js",
"dev": "run-s build start",
"watch:start": "tsc-watch --onSuccess \"node ./dist/index.js\"",
"format": "prettier --write \"src/**/*.ts\""
},
"engines": {
"node": "17.8.0"
}
// ...
Information
I'm deploying through Heroku CLI.
git push heroku main

Out of the box, in the absence of a Procfile, Heroku will run your build script at build time (when you deploy) and your start script as a web dyno at runtime (when your dyno starts).
Your build and start scripts make sense, the former running tsc to compile your TypeScript to JavaScript and the latter running the compiled JavaScript.
Since you want to run a worker process instead of a web process you need a Procfile, but this one hands the work off to the wrong script, using dev instead of start:
worker: npm run dev
Your dev script tries to build your already built application at runtime, which is a problem for a few reasons:
the immediate issue is that run-s is not available, probably because it was declared as a dev dependency
building here is redundant since your application was already compiled during deployment,
if it works at all, it's going to significantly delay startup every time your dyno restarts, you scale your application, etc.,
like run-s, tsc probably isn't available at runtime (and shouldn't be) because it was declared as a dev dependency
Use your start script instead of your dev script:
worker: npm run start

Related

Why is Next.js's compile indicator showing up in my production build?

I noticed after building and deploying a Next.js website that the black compile indicator still shows up in the bottom-right of my browser like it would locally.
This indicator: https://i.stack.imgur.com/FVWEU.gif
On Next.js's website:
This indicator is only present in development mode and will not appear when building and running the app in production mode.
Even locally when I run yarn build and yarn start, the indicator displays while the page loads.
During the build process, it says:
Creating an optimized production build
Done in 20.89s.
My concern isn't so much that the indicator is displaying, because I can disable it. I'm concerned that I'm not getting an optimized build since something is displaying that should only be displaying in development mode.
Note: I can't share a link to the website as it is work-related.
Has anybody seen this issue before?
Thanks in advance!
Technical information:
Next.js Version 12.1.1
Dockerfile:
FROM node:16.13.0-alpine
# Install packages.
WORKDIR /app
COPY package.json .
COPY yarn.lock .
RUN yarn install
# Copy all other files.
COPY . .
# Build the app.
RUN yarn build
# USER node
EXPOSE 3003
CMD ["yarn", "start"]
package.json (scripts block):
"scripts": {
"dev": "node ssr-server.js",
"build": "next build",
"test": "node_modules/.bin/jest",
"test:coverage": "node_modules/.bin/jest --coverage",
"test:watch": "node_modules/.bin/jest --watch",
"start": "node ssr-server.js"
},
In the custom server JavaScript file, there should be a line that check if the environment is development or production:
const dev = process.env.NODE_ENV !== 'production'
update the start script in package.json to set that environment variable:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "NODE_ENV=production node ssr-server.js"
}

How can I run a yarn app/How to run a yarn dev server?

I've always used just npm and never yarn/webpack explicitly. I need to run the code from this repo:
https://github.com/looker-open-source/custom_visualizations_v2
Like a dev server or something to ensure it's serving the files properly but I don't see a "run" like npm run start. Does this just not exist with yarn? It feels like this code should work as is and I shouldn't have to add anything.
EDIT: I've now tried yarn run watch but it just seems to build the code again and not actually host anywhere
npm run somecommand just looks up in the "scripts" field of package.json for the key
somecommand and executes the value in the terminal.
So npm run start basically runs the start script from package.json
The same thing is done using yarn via simply yarn start
In the linked repo, there isn't a start script in the package.json, rather a watch script, so you should be able to run it with the below steps:
yarn to install dependencies after cloning the repo to local (similar to npm install)
yarn watch to start the webpack server (analogous to npm run watch)
Edit:
Turns out the watch command is just setting up webpack to watch for changes and recompile the project every time there is a change.
To run a development server, you will need to add another script preferably with name start and use webpack-dev-server
So the package.json has entries like:
...
"watch": "webpack --config webpack.config.js --watch --progress",
"start": "webpack-dev-server --config webpack.config.js",
...
Then running yarn start should open a dev server at localhost:8080

Difference between npm run dev and parcel index.html

I can use parcel index.html to create a local development server, bundling and hot module replacement. But it have come to my attention that using npm run dev does kind of the same think, so my question is:
what is the difference between the two? and how npm run dev is making the bundling process?
NPM vs Parcel isn't a valid comparison. They are two separate things. You can use Parcel with both NPM and Yarn.
Parcel is a web application bundler that is comparable to Webpack
NPM is a package management system for node.
npm run * is a command that will execute any npm script specified within your package.json and has no exclusivity to Parcel. You can of course make an npm script that will execute Parcel commands.
If you go into your package.json file, you will see a scripts property. Within this object, you can define arbitrary scripts to run. There are reserved script names such as start, install, build among others, but for the most part, this is a "free-for-all" that enabled the developer to specify any arbitrary scripts to run. A few common scripts that you'll typically see scripts to bundle your project or run a linter.
Example of package.json
Webpack Example:
{
"scripts": {
"build": "webpack --config <your entry file>"
}
}
Parcel Example:
{
"scripts": {
"build": "parcel build <your entry file>"
}
}

Using "forever" with NPM script

I have a simple NPM build script which is run using "npm run build". It will listen for file changes, then transpile using babel
"scripts": {
"build": "babel -w js_uncompiled --out-dir js --source-maps"
}
This issue i'm having is regular crashes probably due to having not the best network (We work off the server). I've considered using "forever" to restart the node server once it crashes but i've had no luck with it using the following script
"scripts": {
"build": "forever start --minUptime 1000 --spinSleepTime 1000 babel -w js_uncompiled --out-dir js --source-maps"
}
The error I get is
A:\PortalTom>npm run build
> babeltest#1.0.0 build A:\PortalTom
> forever --minUptime 10000 --spinSleepTime 10000 babel -w js_uncompiled --out-dir js --source-maps
error: Cannot start forever
error: script A:\PortalTom\babel does not exist.
Any help would be much appreciated!
e/
Here's my current package.json : pastebin.com/iRUpAxLm, It all works perfectly (exscuse the many babel modules had to do some hacky stuff to get rid of strict mode to not flag all our old codebase)
I've tried installing forever globally also using "npm install forever -g"

How to use Grunt/Gulp with pm2?

pm2 is a great tool to manage node apps. How does it work with grunt/glup ?
I didn't find any useful clues after Googling for 20 minutes.
If I understand your question well, it seems you want to deploy your app.
Since pm2 0.9 deployment can be done with pm2 deploy see README.
In the case of grunt/gulp, I see two options:
You've your node_modules comitted. Using pm2 deploy run your gulp process from the post-deploy section:
"post-deploy" : "node ./node_modules/gulp/bin/gulp.js ./GulpFile.js && pm2 startOrRestart ecosystem.json --env production"
Using a basic script that will launch npm install for you, you could use the package.json to grunt/gulp:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js",
"postinstall": "./node_modules/bower/bin/bower -q -s -f install && ./node_modules/gulp/bin/gulp.js"
},
My gulp generally needs bower to minify scripts so I left it only for example purpose.
You may combine the two options to let pm2 deploy install your npm scripts and have a postinstall script in the package.json.
Note that I'm using the relative path to the gulp module binary! It's just to avoid an issue if the global module is not installed.
Now, in my opinion to deploy an application in production it's better to simply have a git branch where everything is pre-gulped so that you only clone that branch and you're good to go. It also improves the deploy time, especially if you're running tests with gulp or grunt...
Hope that's clear enough!
The Reply may be late it must be usefull to others
On the command line do:
$ export NODE_ENV=production
will setup production environmental
$ grunt build
will create necessary min.js and min.css
$ pm2 start server.js
will load the server with pm2 , that its a package thats makes sure the node server will restart if an error and will log.

Categories

Resources