I developing a MEAN app. In the past I only used Angular and ng-serve was a bless to try code out and develop.
Now in combination with Node.js as a server, that loads Angular in my so-called "public" folder, I have to do "ng build" every time and it does go through all files, even if I just changed a little code on one component Typescript.
My question? What can I do to develop faster using Node.js and Angular 2 without hitting every time "ng build" on changed code?
I think ng build --watch can help.
One way is you can use concurrently library and liteserver.
Install them as dependencies in package.json
Using concurrently run the typescript compiler and liteserver then page will be loaded automatically when ever the code is modified.
{
"scripts" : {
"start" : "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite" : "lite-server",
"tsc":"tsc",
"tsc:w":"tsc -w"
}
"devDependencies":{
"concurently":"^2.0.0",
"lite-server":"2.2.0"
}
}
Include the above code in your package.json file and run npm install which will install the dependencies.
Then run npm start which will start the server and compile the code when ever u change and reload the page
Related
This question is much the same as Make angular app watch for libraries changes and update itself. But, that question was never successfully answered as applies to the use of multiple libraries. I also reviewed Angular library and live reload and surveyed the answers and links from both questions.
My app is using two libraries: lib-1 and lib-2. When those files are edited, they are ignored and the app does not recompile. To see changes, I have to restart the server which really slows things down.
My expectation is that the app should be recompile when library files are edited, just like when other app-internal files are edited.
This is an Angular project that I have inherited, and the original author is no longer available. I am using Angular v10 and npm 6.14.11
The initial npm scripts are:
"start:staging": "ng serve --configuration-staging --host 0.0.0.0 --port 8080 --disableHostCheck",
"build:lib-1": "ng build lib-1 && cpx projects/lib-1/src/lib/theme.scss dist/lib-1",
"build:lib-2": "ng build lib-2 && cpx projects/lib-2/src/lib/theme.scss dist/lib-2",
"build:libs": "npm run build:lib-1 && npm run build:lib-2",
With those, I first run npm run build:libs, then npm run start:staging. As mentioned, this does not "watch" my libraries for changes.
I reviewed the suggestions and the other SO questions (above), have ensured that the npm-run-all, wait-on and rimraf libraries are now installed.
I have written these new npm scripts:
"clean": "rimraf dist",
"start-app": "wait-on dist/lib-1/fesm2015 dist/lib-2/fesm2015 && start:staging --poll 2000",
"watch:lib-1": "npm run build:lib-1 --watch",
"watch:lib-2": "npm run build:lib-2 --watch",
"watch-libs": "npm-run-all --parallel watch:lib-1 watch:lib-2",
"watch-all": "npm-run-all clean --parallel watch-libs start-app"
And, I am using the pre-existing start:staging script, as written.
I run npm run watch-all.
The script runs and proceeds to the point of building the libraries in parallel (bad idea?), and then throws error: sh: start:staging: command not found.
I removed the --parallel switches and tried again, and got the same error.
The start:staging script is indeed in the scripts object, and I cannot figure out why it's not being found.
I'm hoping to get some sage advice on correcting my syntax so that the app will compile and watch my library files along with the other files that are inside the app's src folder.
After a lot of sleuthing, I came across Nikola Kolev's Angular 6: build — watch multiple dependent libraries in one shell post.
While I don't have it down to one npm script like Nikola was able to do, I am able to do it by running two scripts (there are 7 total scripts involved), and that's good enough for now. I'll work on condensing to one when I get more time.
First, be sure to have wait-on, rimraf and npm-run-all installed. We're also using cpx; but, that's not about getting the libraries to be "watched" -- just including to be overly thorough.
Here are all the scripts:
"clean": "rimraf dist",
"watch-lib:lib-1": "ng build lib-1 --watch",
"watch-lib:lib-2": "ng build lib-2 --watch",
"watch-libs": "npm-run-all clean --parallel watch-lib:*",
"copy-styles:lib-1": "cpx projects/lib-1/src/lib/theme.scss dist/lib-1",
"copy-styles:lib-2": "cpx projects/lib-2/src/lib/theme.scss dist/lib-2",
"start-staging": "ng serve --configuration-staging --host 0.0.0.0 --port 8080 --disableHostCheck",
"watch-staging": "npm-run-all copy-styles:* start:staging"
When I want to work on the libraries and have them be "watched", I run npm run watch-libs in one terminal. When that is finished, I run npm run watch:staging in a second terminal. Then, I'm able to launch the app in a browser, and any edits to any of the code, in libraries or in the app itself are caught, and the app recompiles as desired.
I have the following npm scripts:
"build:server:dev": "webpack --config ./webpack.server.dev.config.js --watch",
"build:client:dev": "webpack --config ./webpack.client.dev.config.js --watch",
"build:server:prod": "webpack --config ./webpack.server.prod.config.js",
"build:client:prod": "webpack --config ./webpack.client.prod.config.js",
"start:server:prod": "export NODE_ENV=production && node ./dist/server.*.js",
"start:iso:dev": "export NODE_ENV=development && npm run build:client:dev & npm run build:server:dev",
"start:iso:dev:win": "set NODE_ENV=development && concurrently --kill-others \"npm run build:client:dev\" \"npm run build:server:dev\"",
"start:iso:prod": "npm run build:client:prod && npm run build:server:prod && npm run start:server:prod"
The problem I'm facing is that the server compilation depends on the client compilation (I generate an html template where I inject the scripts with webpack on the client, and I use this template for server rendering in the server script).
In nearly all of the cases, the client finishes compiling before the server, but while running these scripts concurrently, there is no way to ensure that this will always be true.
When running webpack watch mode, it is not possible to run these scripts in sequence, as watch mode will block the second script from running.
The most obvious solution in my mind is to compile them without watch mode once, and then attach watch mode on the fly after the initial compilation.
I'm not sure how to achieve this though, and I would not like to compile them twice, just for the sake of attaching watch mode.
The second alternative I have in mind is to fiddle with webpack progress plugin, and somehow compile the server script after the client script has finished.
I dislike this solution, because I don't want to hard couple one script to another.
So is there a way to run client and server compilation sequentially from an npm script while using webpack --watch mode?
Maybe this will help you parallel-webpack although I didn't try it it has watch mode and would probably just require connecting your configs for both server and client side someway along this way:
// some script for running parallel builds
module.exports = [
require('./webpack.server.dev.config.js'),
require('./webpack.client.dev.config.js'),
];
then check running in watch mode
I found a nice solution using the npm package wait-on:
https://github.com/jeffbski/wait-on
The npm script I used (Unix & Windows):
"start:iso:dev": "export NODE_ENV=development && npm run clean:build && npm run build:client:dev & wait-on public/build/index-dev.html && npm run build:server:dev --inspect",
"start:iso:dev:win": "npm run clean:build:win && set NODE_ENV=development&& concurrently \"npm run build:client:dev\" \"wait-on public\\build\\index-dev.html && npm run build:server:dev\"",
This works like a charm.
So I have a series of scripts that are set up to either dev servers for a React/Node Express application OR a production server on heroku. The structure of the app is as follows:
client/package.json //pckg for react app
package.json //pckg for the node server
these are the scripts in the clients package:
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:prod": "node server.js",
"start:dev": "set NODE_ENV=development&& concurrently \"nodemon --ignore 'client/*'\" \"npm run client\"",
"client": "cd client && npm run start",
"seed": "node scripts/seedDB.js",
"install": "cd client && npm install",
"build": "cd client && npm run build",
"heroku-postbuild": "npm run build"
}
and the only difference between the react apps package.json and the one that is automatically generated with create-react-app is as follows:
"proxy": "http://localhost:3001/",
the way its supposed to run is, install scripts at root folder, run install script to cd into client and install react apps dependencies, then heroku's post-build script should kick in to run the build script which cds into client and builds a production ready react app. finally the start script should see a NODE_ENV of production and run start:prod.
my problem is that for some reason when i push to heroku, it seems to get stuck on an infinite loop on the install script. I have NO clue why, as the exact same scripts work on other projects PERFECTLY.
https://github.com/LordKriegan/reactdbdemo
https://github.com/LordKriegan/reactdbdemo2/ if anyone wants to look at it. (doing a full stack demo for my students :/ not much of a demo if i cant get it deployed)
I got it working. Forgot create-react-app also initializes a git repo...? either that or somewhere along the way i did an extra git init. anyways i had a .git folder in my client folder, which was preventing my client folder from being pushed up. i ended up creating a new repo and pushing everything to that one and now it works. so incase anyone comes here with a similar problem... make sure you didnt end up in some kind of gitception trap. :/
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"
},
I was developing my project in nodejs. I found if I need to code and test api, I will run two console, one is to execute typescript watch, another is to execute server.
I think it's so troublesome. I find other developers on github have written scripts in package.json. It's easy to call any commands. It attracts how to write the scripts and simply my development workflow.
In short, the comand of typescript watch is tsc -w and the comand of running server is node app.js. My idea is merge the commands as tsc -w & node app.js but I can't work the two commands at the same time. How do I do? Thanks.
My idea is merge the commands as tsc -w & node app.js but I can't work the two commands at the same time. How do I do
You have a few options. Simplest is to use ts-node-dev : https://github.com/whitecolor/ts-node-dev
Option 1
Step 1
install concurrently, use npm, pnpm or yarn
pnpm i concurrently -D
Step 2
create a script with this command
"scripts": {
"run": "tsc && concurrently \"tsc -w\" \"nodemon dist/app.js\"",
}
Option 2
without install anything (mac or Linux)
"scripts": {
"run": "tsc -w & nodemon dist/app.js",
}
run tsc first so that your directory has something at the time of running node
And with that you will have running your Typescript application 🚀
Another option can be to use nodemon:
tsc -w & nodemon app.js
Since Typescript 3.4 the compilation is faster because you can use the incremental compiler option and they keep improving (including interesting changes for large projects in 3.8).
Update:
I also moved to use concurrently as HerberthObregon says in his answer
TLDR, If you like nodemon this is a straight forward way to get file watch, compilation and execution:
nodemon --ext ts --exec 'tsc && node dist/index.js'
Optionally replace tsc with babel for faster compilation.
Here is a more complete example, in package.json (with source maps):
"scripts": {
"develop": "nodemon --ext ts --exec 'yarn build --incremental && yarn serve'",
"build": "tsc",
"serve": "node --require source-map-support/register dist/index.js",
...
},
Install source-map-support as a dependency if you want, ahem... source map support! Otherwise, remove --require source-map-support/register from the serve script above.
tsconfig.json
{
"compilerOptions": {
...
"sourceMap": true,
"outDir": "dist",
}
}
Building on herberthObregon's answer
Step 1: Install packages
npm install concurrently typescript nodemon --save-dev
Step 2: Create these scripts in package.json
"scripts": {
"build": "tsc",
"build:watch": "tsc -w",
"dev": "npm run build && concurrently \"npm run build:watch\" \"npm run serve:watch\"",
"serve": "node dist/index.js",
"serve:watch": "nodemon dist/index.js"
},
build runs a standard typescript build
build:watch runs typescript build in watch mode
serve serves up your node project (assuming your tsconfig outputs to dest/index/js)
serve:watch uses nodemon to restart the node server whenever the js output changes
dev puts them all together
Just going to throw my hat in here, here's a solution using ts-node-dev and concurrently, similar to the one provided by #HerberthObregon but using ts-node-dev instead of nodemon:
"scripts": {
"start": "npm run build && concurrently \"npm run build:watch\" \"npm run dev\"",
"dev": "tsnd --respawn src/main.ts",
"build": "tsc -p tsconfig.release.json",
"build:watch": "tsc -w -p tsconfig.release.json"
}
Bonus: If you need help with your figuring out tscand your tsconfig.json, I use the sensible defaults from this node typescript starter.
Here's a solution that works for me
1. Install ts-node and nodemon as dev dependencies
2. Create a script : "dev" : "nodemon app.ts"