Question about deployment to production, in context of recommended project

[Alon Diamant]

Hi there,

In universal-webpack-settings.js the input is ./source/server.js and the output file is:
./build/server/server.js.

To run the production the server, the command is:

node "./source/start-server"

I assume it doesn't load the "naive" .source/server.js but rather the generated server-side bundle.
So, to find it, it would use configuration.output.path as (I think) stated in the documentation.

However, typically the configuration output path would be of the client bundle, not of the server bundle. So, how would it find the correct server-side bundle to run?

Also, please note that I am asking this in the context of:
ignatevdev/universal-webpack-boilerplate#4
since I am creating a project with that boilerplate as inspiration, but I couldn't understand that part.

[Nikolay]

I assume it doesn't load the "naive" .source/server.js but rather the generated server-side bundle.

Yes

So, to find it, it would use configuration.output.path as (I think) stated in the documentation.

Yes

However, typically the configuration output path would be of the client bundle, not of the server bundle. So, how would it find the correct server-side bundle to run?

What?

[Alon Diamant]

Okay, let me restate my questions.

If I understand correctly, there are two bundles created, by two Webpack processes:

1. Main application (e.g. a React/Redux app), transpiled. This is generated in the location set by configuration.output.path in webpack.config.js.
2. The server, which serves the Main application (and also has a SSR-optimized copy). It is also transpiled. This is generated in the location set by server.output in universal-webpack-settings.json.

(Usually you just create one bundle, and serve it as you wish.)

When we run the server in development mode, we use `start-server.babel.js:

webpack --watch --config "./webpack.config.server.babel.js" --colors --display-error-details
nodemon "./source/start-server.babel" --watch "./build/server"

This calls babel-register to allow using the ES6+ features in start-server.js (like the ES6 imports). Then start-server.js executes bundle (2), the server, which serves bundle (1) and initializes the main HTML file using SSR. So far, so good.

Now, when we run in production mode, we run start-server.js directly, according to the README:

webpack --config "./webpack.config.server.babel.js" --colors --display-error-details
node "./source/start-server"

So:

1. start-server.js uses the ES6 import, but it is not transpiled as it is not included in any bundle. It also does not use babel-register for require() transpiling hooks. How is it supposed to work? Did you mean start-server.babel.js?

2. Once server(configuration, settings) is called, it runs the server-side bundle as set by the server.output in universal-webpack-settings.json. However, this means we need to deploy the entire server/client code in addition to the generated bundle. Is this correct?

3. Is it possible to deploy just the created bundles with a version of start-server.js that uses only require() and includes a universal-webpack-settings.js to point to the server bundle, but does not include the webpack.config.js file nor the rest of the code?

[Nikolay]

which serves bundle (1)

No, the bundle (1) can be served by anything and it's not the point of bundle (2)

[Nikolay]

start-server.js uses the ES6 import, but it is not transpiled as it is not included in any bundle. It also does not use babel-register for require() transpiling hooks. How is it supposed to work? Did you mean start-server.babel.js?

Give me a link to start-server you're talking about and maybe then I'll answer

[Alon Diamant]

Yes, bundle (1) can be served by anything.. like a normal server that has no SSR capabilities.
I thought the point was to create a server with SSR capabilities, that is bundled into bundle (2).

Here's the link:
https://github.com/halt-hammerzeit/universal-webpack#sourcestart-serverjs

[Nikolay]

@advance512 Oh, forgot that I even wrote that, lol.
Okay, you found an error in the README then, thx.
It surely should have said node "./source/start-server.babel"

Therefore:

1. Will work now

2. "However, this means we need to deploy the entire server/client code in addition to the generated bundle." Didn't understand that line.

3. "but does not include the webpack.config.js file nor the rest of the code". The webpack config is only used to obtain .output.path to read webpack-chunks.json. Therefore one can easily just forge a dummy object having .output.path set to the path to the client-side object. "the rest of the code" is unclear.

[Alon Diamant]

Great. Happy to help ;) You can also check the NSLS project, I think it uses universal-webpack incorrectly.

Okay, so if I understand correctly I could do the following:

Create a NEW launch-server.js that looks like start-server.js, but rewritten using require()s and simple JS, that receives two "fake" settings and configuration objects (that have the .output.path and server.output values set correctly to bundle (1) and bundle (2) appropriately). It won't need Babel, it'll just work.

I can also create a bundle from this new launch-server.js and hence have only one bundle that combines everything together.

Correct? Does that make sense?

[Nikolay]

Yeah, sure, it won't need neither Webpack nor Babel.

I can also create a bundle from this new launch-server.js and hence have only one bundle that combines everything together. Correct? Does that make sense?

Not understand

[Alon Diamant]

Oh, and in points 2 and 3 I was mentioning "the rest of the code". This is the source code that was bundled together to create bundles (1) and (2)... but I think we've already made it clear that obviously this isn't necessary, the bundles + launch-server.js is sufficient. Correct?

[Nikolay]

the bundles + launch-server.js is sufficient. Correct?

That's sufficient. The only things needed:

• The compiled server-side bundle
• The universal-webpack module
• The webpack-chunks.json file from the client-side bundle
• The start-server.js runner

[Alon Diamant]

Right, the webpacks-chunks.json. And the path of it can also be inputted in the settings.

Awesome. Been quite hectic the last two days, started them not knowing a thing about SSR, Webpack, webpack-isomorphic-tools bundling, loaders, etc. Now I can finally say I get it.

Thanks dude! If you want a PR to add some extra info and update the README.md, lmk.