What an excellent video. I really like how you started with an empty project and then built it out piece by piece. That really helps to see why and how each file is important, because sometimes it feels overwhelming starting a project with a dozen files for a simple "hello world" example. My only feedback is SLOW down a little. Go through the script/walk through just a bit slower, and add a little padding time between concepts. Think of it like adding some whitespace in a document
Thank you for a very demonstrative video. I've been looking at different manuals/guides for how to set up a simple demo with server components, and jeez most of those guides are not very good. some work with very very experimental packages or with next.js and create react app and ect. This is the only guide i came across that only requires express & webpack and it works. Thanks.
@WittCode I tried this setup in my React+Vite Project where I am using Redux for state management. I am able to build the App successfully. When I ran server.js file, I'm getting an error like ``` import { createSlice } from "@reduxjs/toolkit"; ^^^^^^^^^^^ SyntaxError: Named export 'createSlice' not found. The requested module '@reduxjs/toolkit' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: ```
I'm not totally familiar with redux but I assume that, at its core, it's just a JavaScript package. This means it will be in the bundled React code. So it should be fine!
Hey there! What do you mean? How to use cookies with SSR? Cookies shouldnt be impacted by using SSR! They will still be sent with each request if they are set on the client correctly
@@WittCode I debugged my code and found that there was a typo in my code in new webpack.EnvironmentPlugin. And those clean, build, start commands are working fine on windows. But one problem though, that it throughing error if I use a .css file for styling
@@sortingarray nice! and as for those CSS files they will need to be added to the webpack configuration so they are imported. Ive never actually done ssr with straight CSS though I use MUI...
Great setup! Thank you for sharing. Your blog is awesome too. Please fix broken images in articles (pointing to localhost), example - in WebSockets Explained article
sorry. I'm using a translator, so my words may sound strange. Can I run SSR using the devServer option in development mode? In other words, I am curious about whether it can be run without bundling (npm run build).@@WittCode
no worries@@user-yyyyy877 ! Yeah so I could actually make a video on this. Im pretty sure you can do it using webpack dev server but the way I do it in development is use webpack --watch for JSX files and then have nodemon to check for any changes in the compiled js in the build folder. Lmk if that makes sense. So you basically have two watches. One on the project itself and another on the build folder. There might be a better way to do it but that's what has worked for me!
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
To be honest, I couldn't sleep for 3 days to find this video🤣Thank you for this very helpful🥰
What an excellent video. I really like how you started with an empty project and then built it out piece by piece. That really helps to see why and how each file is important, because sometimes it feels overwhelming starting a project with a dozen files for a simple "hello world" example.
My only feedback is SLOW down a little. Go through the script/walk through just a bit slower, and add a little padding time between concepts. Think of it like adding some whitespace in a document
Thank you for a very demonstrative video. I've been looking at different manuals/guides for how to set up a simple demo with server components, and jeez most of those guides are not very good. some work with very very experimental packages or with next.js and create react app and ect.
This is the only guide i came across that only requires express & webpack and it works. Thanks.
please how does one host/deploy a react app that was built using ssr?
Good future video topic!
@@WittCode bring it on bro! Patiently waiting
@WittCode
I tried this setup in my React+Vite Project where I am using Redux for state management.
I am able to build the App successfully. When I ran server.js file, I'm getting an error like
```
import { createSlice } from "@reduxjs/toolkit";
^^^^^^^^^^^
SyntaxError: Named export 'createSlice' not found. The requested module '@reduxjs/toolkit' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
```
can you upload video how to add css files tailwindcss in ssr and how to deploy it in netlify
Not familiar with Netlify but definitley sounds like a good topic!
help me pls, how to use nodemon or something simillar on this project?
Awsome, no water, so clear. What do you think about RSC. Can you emplement this feature(RSC) to your codebase?
I'm not familiar with RSC but I can give it a look!
What if we want to consume the data from an api?
How can we do that?
You can just contact any API the way you normally would!
What if you are using something like redux state? How would you go around that?
I'm not totally familiar with redux but I assume that, at its core, it's just a JavaScript package. This means it will be in the bundled React code. So it should be fine!
Is this faster than nextjs SSR?
Not sure I've never used nextjs
Please tell me how can I handle cookies with ssr data route array?
Hey there! What do you mean? How to use cookies with SSR? Cookies shouldnt be impacted by using SSR! They will still be sent with each request if they are set on the client correctly
hi will it work on application which uses framer motion?
Hey there! Im not sure what framer motion is!
server started on port undefined, in server.js const PORT = process.env.PORT not working, I'm doing exactly same as the video
sounds like your environment variables aren't being set. How are you running the program?
@@WittCode I debugged my code and found that there was a typo in my code in new webpack.EnvironmentPlugin. And those clean, build, start commands are working fine on windows. But one problem though, that it throughing error if I use a .css file for styling
@@sortingarray nice! and as for those CSS files they will need to be added to the webpack configuration so they are imported. Ive never actually done ssr with straight CSS though I use MUI...
I'm unable to find code on given link, @anyone ?
It should be on my blog website! blog.wittcode.com
Great setup! Thank you for sharing. Your blog is awesome too. Please fix broken images in articles (pointing to localhost), example - in WebSockets Explained article
Hey there thanks! And yeah It's been broken for a while I believe can't believe I have it pointing to localhost lol but I'll fix it!
hello. Is there a way to run it without building it?
You mean without building the react app with webpack?
sorry. I'm using a translator, so my words may sound strange. Can I run SSR using the devServer option in development mode? In other words, I am curious about whether it can be run without bundling (npm run build).@@WittCode
no worries@@user-yyyyy877 ! Yeah so I could actually make a video on this. Im pretty sure you can do it using webpack dev server but the way I do it in development is use webpack --watch for JSX files and then have nodemon to check for any changes in the compiled js in the build folder. Lmk if that makes sense. So you basically have two watches. One on the project itself and another on the build folder. There might be a better way to do it but that's what has worked for me!
@@WittCode Thank you so much for your reply! I will also test it as you said.!!! :)
How com you chose to use webpack?
I just know the most about webpack haha so I like to use it
can i use redux with this rendering?
Wouldn't see why you can't!
@@WittCode I don't understand how it will work in two places at the same time. I suggest making a video on this topic.
Let's always do alot of good