https://github.com/wallabyjs/quokka-create-react-app-ts
https://github.com/wallabyjs/quokka-create-react-app-ts
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/wallabyjs/quokka-create-react-app-ts
- Owner: wallabyjs
- Created: 2019-06-24T01:09:48.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T00:55:50.000Z (over 2 years ago)
- Last Synced: 2025-04-09T14:17:37.611Z (3 months ago)
- Language: TypeScript
- Size: 3.22 MB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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
```
3. 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](https://quokkajs.com/docs/configuration.html#global-config-file)
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
```