How can I implement Webpack for a EJS Reactjs Express MongoDb project?

Question

• The project is using EJS, Express/NodeJs, MongoDB and I have added ReactJs to it.
• Now I want to implement Webpack for bundling EJS and ReactJs files together.
• The project eventually has to be converted to ReactJs but for now we need to Bundle EJS as well.

---

Is there a way I can do that? I need help.

Answer 1

EJS can run client-side and React can run server-side but a typical Express/EJS set up runs the EJS server side and delivers plain HTML to the client, while a typical React setup runs the React code client-side (and might add server-side rendering as a bonus).

Assuming you aren't doing anything highly atypical (in which case you really need to explain your setup in much more detail) then the short answer is: No.

You need your EJS to run server-side, so putting it in a bundle and sending it to the client is pointless.

---

If you want to transition from a classical server-side rendering of HTML to a React system then a typical way to do that is on a page-by-page basis. \

You can either serve up a basic static bootstrap HTML document for the pages you replace, or get creative with a SSR system for those pages (and either do some clever mixing of routing rules or just put a reverse proxy that diverts different URLs to a Next.js server or an Express server depending on if they have migrated or not).

Another approach is is to write a series of small React components that replace individual components of pages (eg a navbar application) and have the entry point include multiple ReactDOM.render calls for each component.

That latter approach is less suited to involving SSR at all though.

Either way: You wouldn't be sending the server-side EJS code to the client so it wouldn't be bundled with the React code.