Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Latest commit 19e5740 Jun 24, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
public Initial Commit Jun 24, 2019
src Initial Commit Jun 24, 2019
.gitignore Initial Commit Jun 24, 2019
.quokka Initial Commit Jun 24, 2019
package.json Initial Commit Jun 24, 2019
yarn.lock Initial Commit Jun 24, 2019

Quokka Create-React-App --TypeScript Sample

This example project shows Quokka configured for a create-react-app --typescript application created using v3.0.1.

Try Quokka on this project

To try Quokka with this project, you'll need to clone this repo and run yarn install. After installing the packages, you're ready to go.

  1. Open up src/QuokkaExample.tsx.
  2. Start Quokka
  3. In the example, you will see that we import src/App.tsx and load it into the browser DOM. We then access the component from the DOM by its class name and are outputting its innerHTML, which displays both inline in your editor and within the Quokka console.

How did we configure Quokka for this project?

Because create-react-app has a few runtime dependencies, we needed to specify some additional Quokka configuration to run project files:

  1. Install jsdom-quokka-plugin package to provide browser-like environment.
  2. Install @babel/register package to allow Quokka to run babel on imports.
yarn add jsdom-quokka-plugin @babel/register --dev
  1. Add a .quokka project file that tells Quokka to use the jsdom-quokka-plugin and to transpile your ts files using the react-app babel preset instead of the TypeScript compiler.

Please note: you may install the jsdom-quokka-plugin and @babel/register packages to your global quokka folder if you don't want to pollute your project's node modules. If you install globally, you will not need to add them again for subsequent projects.

To install the packages in your global quokka folder:

cd ~/.quokka
npm install jsdom-quokka-plugin
You can’t perform that action at this time.