@spirokit/universal-app-template-typescript v0.1.0
SpiroKit Universal App Monorepo
The official SpiroKit template for Universal Apps using:
- Expo SDK 47
- NextJS 13.1
- Solito (Cross-platform navigation)
- SpiroKit (UI Kit)
- Moti (Animations)
- React Navigation 6
Usage
Get your SpiroKit license here We support Parity Purchasing Power. Check our website to see if you are eligible for a discount, if you need it.
Create a new project
expo init my-app --template @spirokit/universal-app-template-typescript
Download the
spirokit-core-[version].tgz
file from Gumroad and add it to the root of your project.Install SpiroKit on
/packages/app
npm i ../../spirokit-core-[version].tgz
yarn add ../../spirokit-core-[version].tgz
- Run your app.
yarn native
yarn web
I'm currently working on a private npm registry so you don't need to deal with local tgz files. This will drastically simplify the process of creating new projects, update to a new version of SpiroKit, and build using EAS or Vercel.
For more information about how to use SpiroKit, here's the full storybook documentation.
🔦 About
This monorepo is a blank(ish) starter for an Expo + Next.js app.
While it's pretty barebones, it does a lot of the annoying config for you.
🗂 Folder layout
apps
entry points for each appexpo
next
packages
shared packages across appsapp
you'll be importing most files fromapp/
features
(don't use ascreens
folder. organize by feature.)provider
(all the providers that wrap the app, and some no-ops for Web.)navigation
Next.js has apages/
folder. React Native doesn't. This folder contains navigation-related code for RN. You may use it for any navigation code, such as custom links.
You can add other folders inside of packages/
if you know what you're doing and have a good reason to.
🏁 Start the app
Install dependencies:
yarn
Next.js local dev:
yarn web
- Runs
yarn next
- Runs
- Expo local dev:
yarn native
- Runs
expo start
- Runs
🆕 Add new dependencies
Pure JS dependencies
If you're installing a JavaScript-only dependency that will be used across platforms, install it in packages/app
:
cd packages/app
yarn add date-fns
cd ../..
yarn
Native dependencies
If you're installing a library with any native code, you must install it in apps/expo
:
cd apps/expo
yarn add react-native-reanimated
cd ../..
yarn
You can also install the native library inside of packages/app
if you want to get autoimport for that package inside of the app
folder. However, you need to be careful and install the exact same version in both packages. If the versions mismatch at all, you'll potentially get terrible bugs.
🎙 Special thanks
Fernando Rojo for creating an amazing Starter Repo for Solito + Expo + NexJS: @FernandoTheRojo
🧐 Why use Expo + Next.js?
See Fernando's talk about this topic at Next.js Conf 2021:
1 year ago