angular6: add universal support with cli

Question

I created a new angular6 application using angular cli and then type :

ng generate universal

to add universal support.

I works fine but I wonder why it added

"server": { "builder": "@angular-devkit/build-angular:server", "options": { "outputPath": "dist/VulogDeploy-server", "main": "ClientApp/main.server.ts", "tsConfig": "ClientApp/tsconfig.server.json" } }

inside angular.json file. Is there another cli command to generate server app ?

What I try to have a look to the doc I see they are creating a webpack config file and use a webpack command to generate server app.

what is the good way to continue after execution of the ng generate universal command ?

Well you have to host the SSR-app somewhere. You can setup an own node/express-server for this or use a hoster like firebase: youtube.com/watch?v=gxCu5TEmxXE — Phil
– Phil, Commented May 11, 2018 at 13:57
for this part sure, bu I was wondering if I really need a webpack config and generate the code from webpack since I see that cli add a configuration about output. Because of that I'm wondering the purpose of that. Do we have to execute an ng command to build the universal (server side) code instead od the webpack command like in the code ? — Dragouf
– Dragouf, Commented May 11, 2018 at 14:04
yes, the expected workflow is for you to use webpack to build server.ts which you run in a node server. You should see scripts added in your package.json. — Joshua Chan
– Joshua Chan, Commented May 11, 2018 at 14:07
these keys are used when building your server-side app. ng build --app server. If I'm not wrong, the webpack uses the generated output to bundle server.ts — Joshua Chan
– Joshua Chan, Commented May 11, 2018 at 14:10

David · Accepted Answer · 2018-05-11 14:31:35Z

I'd say you first need to compile the server app using the following command

ng run [appName]:server

which will create and copy the the server bundle inside the specified folder (dist/VulogDeploy-server in your case)

Then, you need to setup the universal webserver with nodejs/express and webpack. You use webpack to compile your server.ts, which will use the app bundle created in the first step to do the rendering

The wiki stories have not been updated for angular 6 yet https://github.com/angular/angular-cli/wiki/stories-universal-rendering, but I guess the principle remains the same

Collectives™ on Stack Overflow

angular6: add universal support with cli

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related