DEV Community

Cover image for React Server Side Rendering with Express and Vite
ramoures
ramoures

Posted on • Updated on • Originally published at github.com

React Server Side Rendering with Express and Vite

ReactJS Server Side Rendering template (shopping website) with ExpressJS and ViteJS.

  • Node.js Streams
  • Data fetching from Rest API
  • Sitemap add-on
  • SEO friendly

Github Repository

View Demo - (Mirror Link)

Installation

  1. git clone https://github.com/ramoures/express-react-ssr.git
  2. cd express-react-ssr
  3. npm install
  4. npm run build
  5. npm start or node server.mjs
  6. Browse http://localhost:5173/shop/

Update the .env file to edit/remove the shop directory from the URL.


Develop

  • Tailwind CLI build and minify process: npm run tw
  • npm run dev

Browse http://localhost:4173/shop/

Always ready fresh template in development.

Build

After development completion:

  1. npm run build for build new dist directory.
  2. npm start or node server.mjs
  3. Browse http://localhost:5173/shop/

I Used

  • Node.js Stream
  • Axios
  • React Router Dom
  • React Helmet
  • Tailwind CSS framework
  • XML Sitemap
  • ...

Data source: fakestoreapi.com


React server side rendering with express - api flowchart

React server side rendering with express - flowchart


License Under The MIT License
Email: ramoures@gmail.com

Top comments (0)