NG Development Server for Express Server

[denisyilmaz]

Hi,

I love the new Angular 5 Universal Starter with the Angular CLI, so I updated an project from the previous Angular 4 Custom Webpack Configuration to the CLI Version.

Everything works fine for production, unfortunately I can’t get the server.ts (express engine) up and running in development. As far as I understood ng serve uses an custom express server for development.

How can I use custom APIs build in my express engine to work in development mode? (With autorestart/HMR etc) As a workaround I always build a new SSR version and serve it locally, but it’s not very productive…

I asked the question at stackoverflow as well but as I didn’t got any response I hope somebody can help me out here. https://stackoverflow.com/questions/47136173/angular-5-universal-using-server-ts-in-development

[CaerusKaru]

You're right that ng serve uses a custom express server, but it specifically only invokes the Webpack bundle for the browser, not the server. If you think the CLI should support dev mode for Universal (you wouldn't be alone), you should file an issue in that repository.

[Toxicable]

The cli uses webpack dev server I don't think it's the CLI's place to host the Express engine for dev mode. I thin ka better solution is using ng build --watch then hooking that up into your Express or whatever other backend you use

[CaerusKaru]

Directly from the webpack-dev-server, "The webpack-dev-server is a little Node.js Express server", source.

I like your suggestion for ng build --watch, but maybe this issue could be used in that repo to request documentation/best practice on how to go about it.

[Toxicable]

Not trying to be pedantic here but it dosen't look little to me https://webpack.js.org/configuration/dev-server/#src/components/Sidebar/Sidebar.jsx https://github.com/webpack/webpack-dev-server There is a lot of config there. But anyway, that's beside the point, I don't think that it should be responsible of somehow rendering up our Universal apps. For one; what if someone wanted to use another backend that's not express

[CaerusKaru]

I think there's some validity to having the CLI, which generates server builds, have the ability to test those builds. It doesn't discount the possibility that others use different backends down the pipe, but it at least provides the ability to test basic server compatibilities without having to rebuild the entire project.

Just like ng serve tests browser bundles, ng serve --ssr or something comparable could alias to basic testing for server bundles.

[CaerusKaru]

Also, webpack-dev-server may have a lot of config, and the CLI piles on top of that, but it's still Express running the show behind the scenes.

[denisyilmaz]

thanks for your input. I understand that the Universal should be working with different solutions for the backend, that's why I opened the issue here in the Universal-Starter Repo as I hoped it might be something that can be configured with webpack or somehow else.

As @CaerusKaru mentioned it's really necessary to be able to test the builds together with the server that will be used in production. In my case I use the express engine as a wrapper for calling multiple apis (being able to cache the responses inside the express app with redis) so without the ability to test the server app as well in development this starter-kit loses it's advantage for me.

Back at StackOverflow someone gave a semi-good workaround for automatic rebuilds nodemon --ignore dist -e ts --exec 'npm run build:ssr && npm run serve:ssr' (thanks wassertim) It will rebuild the whole app on every .ts change (slow, but working).

And I just found out that maybe there will be something happen in the future:

$ ng serve --app 1 --watch
ng serve for platform server applications is coming soon!

[FriOne]

I think we don't need SSR in develop process, we can just send requests to server without static. But of course it would be nice to serve them both by one command. @denisyilmaz you can use ts-node-dev --fast --respawn server.ts to access api from client. Client in this case will be server with CLI, you just need to change server api url.

[vforv]

Hi @FriOne Could you show some example for this: ts-node-dev --fast --respawn server ?

[Toxicable]

Im slowing chipping away at something which could help in this area. Take a look at this here: https://github.com/angular/devkit/issues/595 as a very rough and early demo you can checkout this here: https://github.com/Toxicable/nodejs_target_demo Note: this dosen't actually include anything Universal, but it's the groundwork required to add Universal to it later

[nghenglim]

quite similar to this issue, we need a way to quick reload in server mode to catch code that might only run in browser mode.

For example document or window is both only support on browser, it will be good to catch those during development with ng serve

FYI, NextJs actually do reload from server side on file changes, and it helps prevent writing code that will only run in browser, and only to be found out during SSR

[robert-king]

my understanding is something like

ts-node-dev --fast --respawn server

will only work for changes you make in your express ts files e.g. server.ts, but if you make a change in an angular component file, then it wont regenerate browser/main.xyz123.js and server/main.js

Would be nice if localhost:4000 would refresh automatically and quickly if any component.html or component.ts file was edited. For example, I'm keen to have something in my app.component.ts file that caches something in dynamic in redis. redis is only available if not isPlatformBrowser, so must test with 4000, but then gotta rebuild each time.