styfle / react-server-example-tsx Goto Github PK

View Code? Open in Web Editor NEW

277.0 4.0 39.0 2.43 MB

⚛️ Boilerplate for isomorphic web app with React server-side rendering in TypeScript

Home Page: https://react-tsx.vercel.app/

License: MIT License

TypeScript 90.88% JavaScript 9.12%

react typescript react-server tsx jsx server-side-rendering isomorphic boilerplate

react-server-example-tsx's Introduction

react-server-example-tsx

A complex example of how to do server-side rendering with React and TypeScript so that component code can be shared between server and browser (also known as isomorphic javascript).

Server-Side Rendering (SSR) leads to fast initial page loads, search-engine-friendly pages, and of course...its all type safe!

Getting Started

Clone the repo, change directory, install dependencies, build the code, and run it!

git clone https://github.com/styfle/react-server-example-tsx.git
cd react-server-example-tsx
npm install
npm run vercel-build
npm run test
npm start

Then navigate to http://localhost:3007 and click on the buttons to see some reactive events in action.

Preventing XSS

The original code from mhart attempts to sanitize the props by escaping and then inserting into a <script> tag.

I avoided this by performing 1 extra http request to fetch the props as json before initializing React in the browser. This means that click handlers will not be initialized until the data is returned and React can pick up where it left off after the server-side render and attach the click even handlers. This is the purpose of ReactDOM.hydrate.

See browser.tsx for the client-side code.

See server.ts for the server-side code.

Prior art

Based on prior work found at mhart/react-server-example. It's very good so you should check it out :)

Additionally, I use a combination between TypeScript Handbook and awesome-typescript-loader when I switched from browserify v1.4.x to webpack v2.0.x (now webpack v4.x).

Author

Developed by styfle, the author of Package Phobia

react-server-example-tsx's People

Contributors

Stargazers

Watchers

react-server-example-tsx's Issues

Fix navbar by using bootstrap css

I was implementing my own navbar but I think most people will better understand bootstrap's navbar.

React.createFactory() is deprecated

Need to figure out a different solution

Add a button to deploy to heroku

A lot of devs are familiar with Heroku and you can deploy to their free tier.

Unnessessary server webpack with @now/static-build

Currently, the deployment will build static server.js, too, which is redundant.
We could check to exclude the node target if it's a production build ?

Add deploy steps to readme

Probably add a deploy to now with something like:

npx now -e NODE_ENV=production styfle/react-server-example-tsx

wrong "main" at package.json

thx, nice work!

Upgrade to React 16

The RC is out now, soon the final version will be out.
It would be good to see how SSR has changed.

Heroku Error: No app.json located in the repo URL provided.

When I click the deploy to Heroku button in the README, Heroku displays the error in the subject line.

Fix typings for React 16

After DefinitelyTyped/DefinitelyTyped#20065 lands, the packag @types/react-dom must be updated to the latest version. Then there is no need to cast as any.

First build fails

If the static folder does not exist, the bundle step fails.

Babel server build ?

Currently, is there any way to integrate babel to @now/node@canary with typescript ?
For example, with ant-design, we need babel plugin to build (babel-plugin-import)

Dependabot couldn't find a package-lock.json for this project

Dependabot couldn't find a package-lock.json for this project.

Dependabot requires a package-lock.json to evaluate your project's current Javascript dependencies. It had expected to find one at the path: /package-lock.json.

If this isn't a Javascript project, or if it is a library, you may wish to disable updates for it from within Dependabot.

You can mention @dependabot in the comments below to contact the Dependabot team.

Change favicon to the react logo

<svg viewBox="0 0 47 42" xmlns="http://www.w3.org/2000/svg">
  <title>react logo</title>
  <g transform="translate(1)" fill="none" fill-rule="evenodd">
    <path d="M30.5 35.454c-3.13 1.808-10.293-3.827-15.562-12.954-5.27-9.127-6.57-18.147-3.438-19.954C14.63.738 21.793 6.373 27.062 15.5c5.27 9.127 6.57 18.147 3.438 19.954zm1 1.733c4.522-2.61 3.07-12.682-2.706-22.687S15.022-1.797 10.5.813C5.978 3.423 7.43 13.495 13.206 23.5S26.978 39.797 31.5 37.187z" fill="#744C9E"/>
    <path d="M0 19c0 5.22 9.448 9 21 9s21-3.78 21-9c0-5.22-9.448-9-21-9S0 13.78 0 19zm2 0c0-3.616 8.46-7 19-7s19 3.384 19 7-8.46 7-19 7-19-3.384-19-7z" fill="#744C9E"/>
    <path d="M28.794 23.5C34.57 13.495 36.022 3.424 31.5.813 26.978-1.797 18.982 4.495 13.206 14.5 7.43 24.505 5.978 34.576 10.5 37.187c4.522 2.61 12.518-3.682 18.294-13.687zm-13.856-8C20.208 6.373 27.368.738 30.5 2.546c3.13 1.807 1.832 10.827-3.438 19.954-5.27 9.127-12.43 14.762-15.562 12.954-3.13-1.807-1.832-10.827 3.438-19.954z" fill="#744C9E"/>
    <rect fill="#ffb238" x="17" y="15" width="8" height="8" rx="4"/>
  </g>
</svg>

Builds everything
Runs the node service
Watches the client side code for changes and triggers a build when changes are detected
Watches the server side code for changes and triggers a build when changes are detected

Remove bundlesize

See siddharthkp/bundlesize#167 for my reasoning.

This would be a good opportunity to add a testing harness for a couple unit tests.