I have a question regarding the script property in package.json of my app. If I type npm start, the app gets compiled successfully. And it seems that by typing the above command, www file starts running.
However, if I type npm webpack, nothing happens. I have a react/express app. And the server runs on localhost:3000 on npm start. I want to know, is webpack serving both react and express? I am able to send requests from the client to the server and show the result on the client-side. I just wanted to know how things are working.
"scripts": {
"start": "NODE_ENV=development nodemon ./bin/www",
"webpack": "webpack-dev-server --config ./webpack.config.js --mode development"
}
for other scripts than "start", you have to type npm run [scriptname].
in your case: npm run webpack
I am running the node js application. In package.json I am building the file like below and running with the start command from package.json.
"scripts": {
"build:server": "npx babel server --out-dir dist/server",
"start": "node ./dist/server/app.js",
"build:client": "webpack"
}
When I execute the build command, the changes were available in the dist folder. But I run the start command I am not able to see my changes on executing my Rest API call.
I have been trying to deploy my nuxt universal app onto AWS elastic beanstalk. I've tried using custom npm script in my package.json:
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"precommit": "npm run lint",
"deploy": "nuxt build && nuxt start"
},
Then under AWS EB config, i added Node command: npm run deploy
However, it is not working.
Basically, i need to tell EB to run "npm run build" before "npm run start"
Anybody can help?
What you've described lies in the npm realm, and can be solved by using a prestart script, like so:
"prestart": "nuxt build"
More details here: https://docs.npmjs.com/misc/scripts
So far this has helped me, it seems to work for default nuxt project (nuxt create) in universal mode.
I am using Elastic Beanstalk, CodePipeline and Bitbucket.
CodePipeline takes code from Bitbucket once it is pushed and builds in on Elastic Beanstalk.
What helped me is adding to package.json:
"deploy": "npm run build && npm run start"
or
"deploy": "npm run install && npm run build && npm run start"
and creating Procfile in root directory of project, content/command of Pocfile triggers the deploy script in package.json file
web: npm run deploy
Before, there were "hooks" but now they're almost deprecated https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/custom-platform-hooks.html
Now you can use Buildfile and Procfile as described here https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/platforms-linux-extend.html
Try Adding to your .ebextensions a "source_compile.config" file as follows:
# source_compile.config
container_commands:
compile:
command: "./node_modules/.bin/nuxt build"
env:
PATH: /opt/elasticbeanstalk/node-install/node-v12.16.3-linux-x64/bin/
Got the idea from the same need to pre compile a typescript nodejs server before deploying to Elastic Beanstalk :)
Here a ref:
https://medium.com/#lhviet88/deploy-a-typescript-expressjs-into-elasticbeanstalk-nodejs-server-8381e00e7e52
brothers and sisters, I am trying to do this:
"scripts": {
"start": "node ./node_modules/.bin/http-server ./public",
"poststart": "webpack --watch"
}
It is not working. The idea being node runs the app (duh) and there's a webpack --watch instance rebuilding my code as it changes. What's the answer here?
One way to do it is like this:
you start webpack --watch in one terminal to watch the sources and rebuild when changes occur
you use nodemon (which is a npm package) in another terminal to watch for build (NOT source) changes and restart the app
Reference: https://nodemon.io/
When testing locally I was previously running:
"build-live": "nodemon --exec ./node_modules/.bin/ts-node -r dotenv/config -- ./index.ts"
I then figured my Procfile should be something like:
web: ./node_modules/.bin/ts-node -- ./index.ts
But it says module 'typescript' not found, even when it is in package.json. I read in a few places that ts-node is not the way to go to deploy to Heroku, so I am not sure what to do.
UPDATE: I think I am supposed to compile it, so I tried:
web: ./node_modules/.bin/tsc --module commonjs --allowJs --outDir build/ --sourceMap --target es6 index.ts && node build/index.js
This succeeds, however when actually running it, a bunch of the libs I'm using get "Cannot find module '...'".
Alternatively you can have the TypeScript compile as a postinstall hook and run node build/index.js as the only Procfile command:
Your package.json should contain a postinstall hint that gets executed after npm install and before the node process launches:
"scripts": {
"start": "node build/index.js",
"build": "tsc",
"postinstall": "npm run build"
}
You can then leave your Procfile as is:
web: npm start
This 'build on deploy' approach is documented by Heroku here.
The command you've given Heroku is to launch the web "process" by compiling index.ts and dependencies and starting node at index.js. Depending on how things are timed, index.js might or might not exist at the time node starts.
You need to already have your sources compiled by the time you want to start your app. For example, web should just be web: node index.js or similar.
Each build process is different, so you need to figure that out for your own setup. But, suppose you have a classical setup where you push to git and then Heroku picks up that change and updates the app with the new slug. You could just compile things locally and include index.js and any other build output in the repository, for it to be available in the slug for Heroku to use.
A better approach is to use a build server which has an integration with Heroku. After you do the build there, configure it to send the build results to Heroku. Travis has a straighforward setup like this. This way you don't need to include build outputs in your repository, which is considered an anti-pattern.
On a sidenode, try using a tsconfig.json to keep the tsc configuration. It will save you from having to write such long command lines all over the place.
Fabian said that we could do something like:
"scripts": {
"start": "node build/index.js",
"build": "tsc",
"postinstall": "npm run build"
}
As of me writing this, I tested this and can state: postinstall is not required since build script is ran by Heroku. If you want to do it without build script, then you can use heroku-postbuild which will run after dependencies are installed there you run tsc to compile.
My problem was about missing Typescript npm modules. The Typescript compiler tsc was not found when deployed the app to Heroku.
The Heroku deploy process (rightly) does not install development dependencies, in my case the Typescript module was part of devDependencies and thus the tsc command was not running on the Heroku platform.
Solution 1
Add typescript to dependencies: npm i typescript -s
Solution 2
Open Heroku console:
Select console type:
Run the command npm i typescript && npm run tsc
Install typescript as a dev dependency (cf. https://www.typescriptlang.org/download). Once built, your app does not need typescript anymore!
npm install -D typescript
Then in your package.json:
{
"main": "index.js", // <- file will be generated at build time with `tsc`
"scripts": {
"build": "tsc",
"start": "node ."
"start:dev": "ts-node index.ts" // idem, install ts-node as a dev dependency
}
}
The key point here is "build": "tsc".
Why?
Heroku does install all dependencies during build and remove the dev dependencies before the app is deployed (source here).
Node.js deployments will automatically execute an app’s build script during build (since March 11. 2019 source here)
In package.json
"scripts": {
"tsc": "./node_modules/typescript/bin/tsc",
"postinstall": "npm run tsc"
},
Works for me for Heroku deployment.
Installing typescript npm install -D typescript and writing tsc in the build script "build": "tsc", does not work for me. Also, try to run npm i typescript && npm run tsc in the Heroku console which also does not work.
In my case, I remove some dependencies from "devDependencies" to "dependencies", so it goes like this:
"dependencies": {
// The other dependencies goes here, I don't touch them.
// But all TS dependencies I remove to here.
"ts-node": "^9.1.1",
"tsconfig-paths": "^3.9.0",
"typescript": "^4.2.3",
"ts-loader": "^8.0.18"
},