DEV Community

Discussion on: Adding style to Server-Side rendering and automating the build process

Collapse
 
jeromediver profile image
Jérôme Lanteri

Your automation JS webpack file is difficult to me to understand. Also, when i return renderToString for a Fragment React object, at render view time (i use pug engine), i get a string output in the page instead of the html content.
I would be very happy if you can explain something more than a little resume about html-webpack-plugin.
Actually, on my side, when i read your post, it is like i read directly you source code with resume of entry points i can find everywhere about what you used, but i can not find any real explications about what you are doing when something is happening in the background (like, for example, when build with babel and webpack).

Collapse
 
achhapolia10 profile image
Anshuman Chhapolia

If you are using pug then use this plugin and not the html-webpack-plugin. HTML webpack plugin adds a script to an HTML like document only. It won't work with pug.
npmjs.com/package/html-webpack-pug...
I would suggest going through my posts on medium. I haven't been able to update the post here with the latest structure.
Part 1: medium.com/@achhapolia10/server-si...
Part 2: medium.com/swlh/server-side-render...
I've explained the babel and webpack configs and what is happening in detail.

Collapse
 
jeromediver profile image
Jérôme Lanteri

I understand better, i was feeling it can be something like that, but you confirm to me that's it.
Thank you very much for your answer (and so quick also). I do appreciate a lot.
I'm pretty very new on React.js and yes, i'm very entousiast to touch this and learn. I decide to not use simplicity with Next.js to understand better what's happening first.
Thank you very much @anshuman Chhapolia

Collapse
 
achhapolia10 profile image
Anshuman Chhapolia

If you want to use the latest code its available as a template on github:
github.com/smoke-trees/ssr-react

Collapse
 
jeromediver profile image
Jérôme Lanteri

Thank you, i will read it carefully to learn better, then try in the same time by do my own code. I will also push it on github next, and will use next.js on next level learning step.