Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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


  • 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.


git clone
cd react-fiber-experiments
npm install


npm start


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.


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 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)


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: (that way, your QA team will be able to test your latest stable features before you release them)


On each tag pushed to master:

  • a new version will be deployed to the production server:
  • 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


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 (remain on v1.x - currently relying on react-app-rewired)
  • customize or remove any of the features added

The original CRA guidelines are still available here