I'm starting to work with ReactJs, I'm reading a book and also watching videos and reading tutorials. I'm from a PHP background and even though I'm kinda good already with JavaScript, enough to feel comfortable to learn ReactJs, I learned a lot of things already, the only part that I don't get yet is the deployment part using NodeJs. In PHP we only develop the entire application in PHP and then we will have one server that will serve the files and that is it, in NodeJs we usually have two servers, one for the client side and another one for the back end that will serve the API. I was wondering how the final server works, will I need two servers or the same server will serve both the static files and the API? I tried to search and find tutorials on the internet and most of them is using the client and backend server separated for development and they don't mention how it will work on production. I also tried to find some MERN stack boilerplate or repositorie on Github but they are mostly isomorphic/serve side rendering (which I have no idea if it's the best alternative than client side rendering). What are your thoughts, how does usually a production server works?
The webpack-dev-server is extra tooling to improve your workflow. Because a React app has to be compiled, you cannot simply serve its JSX files straight out of a directory. Webpack needs to compile, concatenate, and optimize your JSX files into bundles, which it usually puts into the dist/ folder. You could configure Express to serve the static files created by Webpack from the dist/ folder without the need for webpack-dev-server.
However webpack-dev-server offers some conveniences over serving files out of dist/. The dev-server keeps built files in memory rather than writing to disk, which is why it runs as its own server. This decreases the amount of time it takes to compile. It will also watch changes to your files and recompile when necessary. It can even trigger your browser to refresh the page to grab the new files (though these last 2 features are not unique to webpack-dev-server).
You can remove the webpack-dev-server from your toolkit but still get the benefits by using webpack-dev-middleware. This way you can have the more conventional single server setup. If you do use the middleware, you should still remove it or disable it for production.
Mostly it's handled like this:
While in development Client (React; handled by webpack-devserver) <--> API (some other server like tomcat)
So the webpack-devserver (or any other node.js server) is serving the static assets of the website. Any APIs you use are hosted somewhere else.
In Production you need a server who serves the website (static) which can be any tomcat or other server or like in some of my cases it's hosted within my service as static content.
Hope this makes any sense :)
You can get very confused coming from a PHP world to JavaScript, mostly because you can write JS everywhere.
I believe you can master it by taking a step back and understanding what's going on in the first place.
With JavaScript you can work with many architectures, this is why is so good. Here's a few examples:
You can have an API written with NodeJS and another React application running on the front-end. You will end up with 2 servers or 2 processes running in 1 server.
You can also have a monolith, which I believe you are already used to it. When you run both your interface and logic + database in one application. So you will end up with 1 server.
You can also have an Isomorphic (Universal) application, where you combine the power of front-end and the rendering of the back-end (It's possible with JavaScript, since it's the same language). With this you can even choose if you want to separate the API into a different application or write the logic into the same app.
And which way you decide to architecture your application, every time you use a scaffold tool like create-react-app etc. You will end up running a server to start your application, because it's way more convenient when developing. But it's totally doable developing the old way, importing everything on the header of your HTML etc.
But when you finish developing and building your application, on the front end, these tools will generate an index file and all the final boilerplate for you, so it can be as simple as copying to a FTP server and checking your domain.
But if you build a NodeJS application, you will need a server, like Apache or Nginx, the same way you run your PHP code.
JavaScript is a really powerful programming language, and it is so flexible that it can get really messy. But the bottom line is: You have to learn about application architecture.
I really recommend you taking a course from basic to advanced to better understand this. Here's one:
udemy.com/the-web-developer-bootcamp