Discover the latest features of React fiber like "Suspense"
Clone or download
topheman chore(travis): remove video recording of cypress test suits on CI
The video recording was causing test fails.
Latest commit 2332480 Oct 9, 2018
Permalink
Failed to load latest commit information.
.vscode chore(*): Initial commit from topheman/my-react-app-starter@1.1.0 Aug 31, 2018
bin chore(travis): remove video recording of cypress test suits on CI Oct 9, 2018
cypress feat(About): add infos about generated react-modules Sep 27, 2018
public feat(analytics): add analytics Sep 21, 2018
react-modules refactor(react): simple-cache-provider renamed to react-cache - upgra… Oct 1, 2018
src feat(*): add video talk fr Oct 8, 2018
.editorconfig chore(*): Initial commit from topheman/my-react-app-starter@1.1.0 Aug 31, 2018
.eslintignore chore(*): add custom version of react Sep 9, 2018
.eslintrc chore(cypress): setup cypress Sep 25, 2018
.gitignore chore(cypress): gitignore cypress artefacts Sep 25, 2018
.prettierignore chore(*): add custom version of react Sep 9, 2018
.prettierrc chore(*): Initial commit from topheman/my-react-app-starter@1.1.0 Aug 31, 2018
.travis.yml chore(*): setup continuous deployment Sep 25, 2018
README.cra.md chore(*): Initial commit from topheman/my-react-app-starter@1.1.0 Aug 31, 2018
README.md feat(*): add video talk fr Oct 8, 2018
common.js chore(*): Initial commit from topheman/my-react-app-starter@1.1.0 Aug 31, 2018
config-overrides.js feat(About): add infos about generated react-modules Sep 27, 2018
cypress.json test(suspense): prepare e2e tests for suspense features Sep 25, 2018
package-lock.json chore(travis): remove video recording of cypress test suits on CI Oct 9, 2018
package.json chore(travis): remove video recording of cypress test suits on CI Oct 9, 2018

README.md

react-fiber-experiments

Build Status Cypress Demo

The goal of this project is to show you the very latest features of React that are still in development (such as Suspense).

You can try online the demo to understand the benefits of those new features and take a look at the source code to better understand those new concepts.

💯 📺 Watch the screencast on this project, presenting React Suspense

💯 📺 Watch the talk on this project, presenting React Suspense (french) 🇫🇷

📺 Watch a recording of end to end tests with Cypress

Prerequisites

  • Nodejs v8
  • npm v5

Using the features still in development such as Suspense or Time Slicing need a custom build of React. It is shipped with this project in the react-modules folder. If you wan't to make that build yourself, follow the instructions in the same folder.

Install

git clone https://github.com/topheman/react-fiber-experiments.git
cd react-fiber-experiments
npm install

Run

npm start

Build

npm run build

Will build a production version of the website in the build folder.

Run npm run serve to test your build on a local server.

Test

The following command will run all your tests (both unit and end to end) in a single run mode.

npm test

Unit tests

  • npm run test:unit : single run of the unit tests
  • npm run test:unit:watch : run the unit tests in watch mode

End to end tests

Works the same way as the end to end tests of the topheman/npm-registry-browser project.

I'm using cypress.io for the e2e tests. You will find them in cypress/integration.

  • npm run test:cypress : single run the e2e tests. It will:
    • build the project and serve it on http://localhost:5000 (that way, your tests reflect exactly what the end user would see in production)
    • run the tests in cypress/integration folder
    • tear down once tests are passed (or failed)
  • npm run test:cypress:dev : use this one when you're coding your tests. It will:
    • spin up a dev server on http://localhost:3000 (so, you don't have to npm start)
    • open the cypress client that will let you choose which tests you want to run
  • npm run test:cypress:debug-build : use this if your e2e tests only fail on a production bundle, to debug the tests with the production version of your app. It will:
    • build the project and serve it on http://localhost:5000
    • open the cypress client that will let you choose which tests you want to run

On this project the end to end tests are not run on the precommit hook, they are run on the CI to gain time (take a few seconds before pushing to run them).

Cypress is launch with: cross-env CYPRESS_TRAVIS=$TRAVIS cypress run - that way, it is possible in your cypress tests to detect whether you're on CI or not with Cypress.env("TRAVIS"). More infos about cypress managing env vars.

Linter / Prettier

Your code will be automatically linted / formatted when you commit. More infos on topheman/my-react-app-starter

Continuous Integration (CI)

Each git push triggers a test suite on travis. The following will be ran:

  • linting
  • unit tests
  • end to end test with cypress

The end to end test sessions are recorded, you can check them here.

Continuous deployment (CD)

Staging

On each commit (or PR) pushed to master, if the tests are passing, a version of the website will be automatically deployed from travis to a staging server: https://staging-react-fiber-experiments.surge.sh (that way, your QA team will be able to test your latest stable features before you release them)

Production

On each tag pushed to master:

  • a new version will be deployed to the production server: https://react-fiber-experiments.surge.sh
  • the artefacts generated during build (the build folder) will be uploaded to the related release, so that you could re-download them at any time (see releases section)

🚚 More infos about Continuous Deployment

FAQ

Which boilerplate was used

Based on topheman/my-react-app-starter@1.1.0 for the create-react-app boilerplate (eslint/prettier/others advanced setup). Added react-app-rewired to override webpack's config.resolve.modules (and be able to use custom react builds).

Based on topheman/npm-registry-browser for the layouts/css/ui.

This remains an un-ejected create-react-app project, which means that you can:

  • update react-scripts
  • customize or remove any of the features added

The original CRA guidelines are still available here This remains an un-ejected create-react-app project, which means that you can:

  • update react-scripts
  • customize or remove any of the features added

The original CRA guidelines are still available here

Resources