Create XP App

A cross-platform app starter based on create-t3-turbo and all things Fernando Rojo (Solito, Dripsy, Moti, etc.). Authentication is inspired by create-t3-turbolito.

🚀 Getting Started

Install Node.js

Install pnpm using npm, unless you prefer something else

Install VSCode

Clone this project to your computer and open it in VSCode

Accept any recommendations given to you by VSCode after opening the project

Open a terminal in VSCode where your project is open

Install dependencies:

pnpm i

Keep going while the dependencies install

Provision a PostgreSQL database with Railway and get the Postgres Connection URL

In the project root, create a .env file with the following, and replace all ...'s with your corresponding API keys:

DATABASE_URL=...

Setup your database:

pnpm db:setup

To get authentication working, create a Clerk account, add a Clerk application and set the Clerk API keys in the .env file:

NEXT_PUBLIC_CLERK_FRONTEND_API=...
CLERK_BACKEND_API=...

Ensure you setup Expo to play nicely for your setup, by following create-t3-turbo's Expo setup guide.

In your VSCode terminal, start development:

pnpm dev

3️⃣🍆 3D with Three.js

React Three Fiber is used to render 3D graphics (docs).

Use 📁 threejs/Canvas.tsx to automatically use the correct implementation for the platform you're on (with consistent styling as bonus 😉), so that you get native rendering on iOS and Android, and web rendering on the web, but still code share everything.

Note
You can use the regular Canvas component from react-three-fiber if you really want to (nice to have as a fallback), but you'll not get butter smooth animations and interactions on iOS and Android.

Warning
The iOS simulator does not render 3D at all (as of 2022.12.19), but real apple devices work just fine (see pmndrs/react-three-fiber#2546).

🎨 Skia (☢️ WIP)

Skia is a 2D graphics library that can be used to render really cool 2D graphics.

Implemented for iOS and Android, but code sharing with Next.js is WIP atm.

Quirks

This is a monorepo using Turborepo and pnpm.

As such, installing packages is a little different than you might be used to. Skim through the documentation of both to get a feel for how they work, if the tips below are insufficient.

Installing packages

Here are some examples of how you typically would install packages using pnpm from the root:

pnpm i <package> --filter=expo

pnpm i -D <package> --filter=expo

pnpm i -D <package> --filter=expo --filter=web

Note
My experience is that pnpm i with filtering works the same from anywhere in the project, but other commands, for example package.json-scripts like pnpm dev, may vary. This may be wrong, so feel free to correct me.

To install packages using Expo (maybe you want their automatic versioning), you need to specify location, by cd-ing in to the relevant directory.

To install a package (here expo-location) in the expo package:

cd packages/expo
pnpx expo install expo-location

Note
When installing packages using Expo, the docs most often suggest npx, but as we're using pnpm, I recommend using pnpx, so:

❌ ~~npx expo install expo-location~~
✅ pnpx expo install expo-location

Pure JS dependencies

If you're installing a JavaScript-only dependency that will be used across platforms, install it in packages/app:

pnpm i date-fns --filter=app

Native dependencies

If you're installing a library with any native code, you must install it in 📁 apps/expo, but for good DX in 📁 packages/app, you should install it in both places:

pnpm i:native react-native-reanimated

Which under the hood is the same as:
pnpm i --filter=expo --filter=app react-native-reanimated

Syncing native dependencies

To sync the versions of all packages installed in both 📁 packages/app and 📁 packages/expo, you can use syncpack to find mismatching versions:

pnpm syncpack:mismatches

You should fix these manually or create a script that fits your workflow.

If some packages are only installed in 📁 app/expo, you'll need to add those to 📁 packages/app/package.json manually.

If you get errors on the web after installing a native dependency, you may need to tell Next.js to transpile the module (or it's dependencies - check the error logs) in 📁 apps/next/next.config.js:

const withTM = require("next-transpile-modules")([
  // Add the module here, e.g.:
  "recyclerlistview",
]);

🤯 Facing problems?

Below are ways to solve them.

Generally

Restart VSCode.
Clean and reinstall dependencies:
pnpm clean:reinstall
Restart your computer.

Permission errors when running commands (Mac/Linux)

Prefix the command with sudo, e.g.:

sudo pnpm i

Pulling changes from the repository

Always check for and install new dependecies when you pull changes from the repository:

pnpm i

Wrong version of Node

Check your version with
```
node -v
```
Install the correct version according to engines in package.json

Wrong version of pnpm

Check your version with

pnpm -v

Install the correct version according to engines in package.json

Using 32-bit version of Node

Getting error Command failed with exit code 3221225477?

Check if you're using 32-bit Node.js:

node -p "process.arch"

If so, install the 64-bit version instead.

Or buy a Mac.

Weird typescript errors

Open up any TypeScript file in the project and press...

⌘ + Shift + P on Mac
Ctrl + Shift + P on Windows

Then restart the TypeScript server, with the command TypeScript: Restart TS Server.

Divergent git branches

git config pull.rebase false

Ports already in use (Mac)

Kill the processes using the ports:

kill -9 $(lsof -t -i:3000) && kill -9 $(lsof -t -i:19000)

If that doesn't work, you can open Activity Monitor, search for node and kill all processes.

vidundergunder / raccoon Goto Github PK

raccoon's Introduction