DEV Community

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

Posted on • Edited 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

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site