Server-side rendering for any React app on any FaaS provider

• create-react-app

  575 101,853 1.5 JavaScript

  Set up a modern web app by running one command.

  

Thinking that the demo app should be practical but not overwelmed by details, its React client side would be constructed with commonly seen features, such as styling, routing, data fetching and assets loading, but at a limited cost. Meanwhile, it would be deployed on a widely accepted FaaS provider that has an easy setup. So, I'm going to use create-react-app(CRA) to initialize the demo app, enhance it, then get it deployed on Netlify with SSR added.

• transpile-webpack-plugin

  3 16 2.8 TypeScript

  Transpiles input files into output files individually without bundling together

The webpack plugin transpile-webpack-plugin collects files directly or indirectly imported by the entry, then gets them compiled and ouputted preserving the directory structure. The webpack helper webpack-node-externals externalizes installed deps to reduce the outputted file count.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• webpack-node-externals

  2 1,291 0.0 JavaScript

  Easily exclude node modules in Webpack

The webpack plugin transpile-webpack-plugin collects files directly or indirectly imported by the entry, then gets them compiled and ouputted preserving the directory structure. The webpack helper webpack-node-externals externalizes installed deps to reduce the outputted file count.

• server-side-rendering-with-cra-on-netlify

  2 1 10.0 TypeScript

  Server-side rendering for any React app on any FaaS provider - elaborating by a demo app of SSR with CRA on Netlify

Finally, following the guide Import from an existing repository in the Netlify docs, the demo app is deployed. The final codebase of the demo app is in the GitHub repo licg9999/server-side-rendering-with-cra-on-netlify. And its url after the deployment is https://bucolic-sprinkles-002beb.netlify.app/. The SSR can be verified by visiting the path / or /zxcv, which is also doable by using curl:

• React

  1,691 221,803 9.9 JavaScript

  The library for web and native user interfaces.

  

• cli

  21 1,542 9.7 TypeScript

  Netlify Command Line Interface (by netlify)

  

To launch the previewing of the whole demo app including the client side and the server side, Netlify CLI is needed but installing it globally is good enough:

Suggest a related project