roninoss/create-expo-stack

CLI tool to initialize a React Native application with Expo. Provides options to include Typescript, file-based routing via Expo Router, configuration based routing via pure React Navigation, styling via Nativewind, Restyle, Unistyles, StyleSheets, or Tamagui, and/or backend as a service such as Firebase and Supabase.

create-expo-stack's Issues

Web hydration error on fresh project creation

I am seeing a hydration error with a fresh project using the following command:

npx create-expo-stack@latest my-expo-app --expo-router --tabs --nativewind --supabase --bun

This appears to not give any errors when loading through an iOS simulator, or deploying via Vercel and viewing on the web.

Unexpected string in JSON at position 1452 while parsing '

fix this issue add coma (,) before react-refresh

[www] add github star count next to our github logo

Example:

[cli] package manager selection

I think it would be extremely useful if the user could select the package manager of their choice

[cli] Improve Tests

Currently

• Tests currently test the local files rather than the the build folder which means that the tests can pass while running npx create-expo-stack@latest can be broken.
• Running tests is slow and/or trips up with bun
• Tests do not have full coverage
• Tests don't even pass locally

What this is

We need to be able to ensure that every single iteration of configurations and flags works as expected, at any point in time but particularly upon any change made to the cli.

The way to confirm that each iteration works is to ensure that:

• Project set up succeeds, which is to say that
  • The appropriate cli json object is created
  • The appropriate command is generated to rerun the command, if desired by the user
  • Project initialization succeeds
  • Initializing git succeeds (flag)
  • Base assets are copied
  • Installation of dependencies succeeds with the specified package manager (flag)
  • Code formatting completes
• All of the elements on each screen are present, laid out properly, with the proper styles applied (android & ios)
• Navigating throughout the application should function as expected such that clicking on a button will lead you to the appropriate page and clicking some other button will return you to the previous page (android & ios)

Conditions

• Tests should run on the build folder rather than the the local folder to prevent tests passing locally while breaking in production (eg npx create-expo-stack@latest)
• If they are to be run locally, they can't take too long (more than 2 min is too much)
• Tests should not run on commit
• A PR pertaining to the cli should not be able to be merged without tests passing
• Going through the CLI interactively, all iterations work
• Going through non-interactive mode, all iterations work

What this is not

• Tests for the landing page
• Tests for the docs

[cli] format code when noInstall is true

Your project configuration:
{
  projectName: 'my-expo-app',
  packages: [
    {
      name: 'expo-router',
      type: 'navigation',
      options: { type: 'stack' }
    },
    { name: 'tamagui', type: 'styling' },
    { name: 'supabase', type: 'authentication' },
    { name: 'stylesheet', type: 'styling' }
  ],
  flags: { noGit: false, noInstall: true, importAlias: '~/' }
}

Initializing your project...

Cleaning up your project...
$ bun run eslint '**/*.{js,jsx,ts,tsx}' --fix && bun run prettier '**/*.{js,jsx,ts,tsx,json}' --write
error: missing script "eslint"
error: script "format" exited with code 1 (SIGHUP)

Initializing git...

Success! 🎉 Now, here's what's next:

[docs] provide proper feedback with instructions about the release workflow

Currently, new contributors are clueless on what their role is for automated releases to work.

There are two steps that need to be taken in order to somewhat fix that:

• Update both the contribution guidelines and the PR templates with instructions on how to properly create, manage and name changesets for releases. PR templates should probably have a checklist option regarding this.
• Use the changeset-bot GitHub app to auto-comment on PR's giving feedback on the status of the changesets.

[cli] Blank template does not include proper flags

Expected

• importAlias = true
• noGit = false
• noInstall = false

Actual

There's something missing to make it work.

created with

pnpm dlx create-expo-stack@latest

with some errors info

> [email protected] format D:\proj\LittleLEmonExpoDan
> eslint '**/*.{js,jsx,ts,tsx}' --fix && prettier '**/*.{js,jsx,ts,tsx,json}' --write


Oops! Something went wrong! :(

ESLint: 8.55.0

No files matching the pattern "'**/*.{js,jsx,ts,tsx}'" were found.
Please check for typing mistakes in the pattern.

 ELIFECYCLE  Command failed with exit code 2.

then message Success! 🎉 Now, just run the following to get started

Your project configuration:
{
  projectName: 'LittleLEmonExpoDan',
  packages: [
    {
      name: 'react-navigation',
      type: 'navigation',
      options: { type: 'stack' }
    },
    { name: 'nativewind', type: 'styling' }
  ],
  flags: { noGit: undefined, noInstall: undefined, importAlias: '~/' }
}

To recreate this project, run:
  npx create-expo-stack@latest LittleLEmonExpoDan --react-navigation --nativewind --pnpm

then pnpm run android

› Opening on Android...
› Opening exp://192.168.1.2:8081 on Medium_Phone_API_34
› Press ? │ show all commands
Error: Unable to resolve module ./node_modules\expo\AppEntry from D:\proj\LittleLEmonExpoDan/.:

None of these files exist:
  * node_modules\expo\AppEntry(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.cjs|.native.cjs|.cjs)
  * node_modules\expo\AppEntry\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.cjs|.native.cjs|.cjs)
    at ModuleResolver.resolveDependency (D:\proj\LittleLEmonExpoDan\node_modules\.pnpm\[email protected]\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:114:15)
    at DependencyGraph.resolveDependency (D:\proj\LittleLEmonExpoDan\node_modules\.pnpm\[email protected]\node_modules\metro\src\node-haste\DependencyGraph.js:277:43)
    at D:\proj\LittleLEmonExpoDan\node_modules\.pnpm\[email protected]\node_modules\metro\src\lib\transformHelpers.js:169:21
    at Server._resolveRelativePath (D:\proj\LittleLEmonExpoDan\node_modules\.pnpm\[email protected]\node_modules\metro\src\Server.js:1045:12)
    at async Server.requestProcessor [as _processBundleRequest] (D:\proj\LittleLEmonExpoDan\node_modules\.pnpm\[email protected]\node_modules\metro\src\Server.js:449:37)
    at async Server._processRequest (D:\proj\LittleLEmonExpoDan\node_modules\.pnpm\[email protected]\node_modules\metro\src\Server.js:383:7)
Error: Unable to resolve module ./node_modules\expo\AppEntry from D:\proj\LittleLEmonExpoDan/.:

// package.json

{
  "name": "LittleLEmonExpoDan",
  "version": "1.0.0",
  "scripts": {
    "android": "expo start --android",
	
    	"format": "eslint '**/*.{js,jsx,ts,tsx}' --fix && prettier '**/*.{js,jsx,ts,tsx,json}' --write",
	
    "ios": "expo start --ios",
    "start": "expo start",
    "web": "expo start --web"
  },
  "dependencies": {
    
      "nativewind": "^2.0.11",
    

    

    
      "@react-navigation/native": "^6.1.7",
      "react-native-gesture-handler": "~2.12.0",
      "react-native-safe-area-context": "^4.6.3",
      "react-native-screens": "~3.22.0",
    

    
      "@react-navigation/stack": "^6.3.17",
    

    

    

    
    
    

	

	

    "expo": "~49.0.11",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-native": "0.72.6"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.14",
    "@typescript-eslint/eslint-plugin": "^6.7.2",
    "@typescript-eslint/parser": "^6.7.2",
    "eslint": "^8.50.0",
    "eslint-config-universe": "^12.0.0",
    "prettier": "^3.0.3",
    
      "tailwindcss": "3.3.2",
    
    
    "typescript": "^5.1.3"
  },
  "eslintConfig": {
    "extends": "universe/native"
  },
  
    "main": "node_modules/expo/AppEntry.js",
  
  
    "expo": {
      "install": {
        "exclude": ["react-native-safe-area-context"]
      }
    },
  
  "private": true
}

[FR] Shift to monorepo

Move the website and cli to be served from the same repo

Talk to Anthony Shew

[docs] Introduction screen

Will somewhat be modeled off of: https://create.t3.gg/en/introduction

[FR] Flags for opinionated stacks

Create a set of flags that initialize popular opinionated stacks

npx create-expo-stack@latest --ignite

Examples

• ignite

[cli] EAS setup support

This CLI has scope to integrate the EAS setup support , that includes setting up the whole CI/CD pipeline across various environments and channels.

I've been experimenting with env variables and figuring out the right setup for our CI/CD. Let me know if this fits right in this.
Would need some help to start.

[cli][FR] Check if user is set up to use RN/Expo before CLI runs

How does Ignite do this? @frankcalise

Do y'all have a command that installs all the RN stuff?

[cli] EAS Build Error

EAS Build error after fresh install, any solution ?

[cli] File Upload with Supabase

What

Add option for supabase to initialize an app with file upload

https://supabase.com/blog/react-native-storage

How

When a user selects "Supabase", they should see an option to initialize an app "With File Upload"

[cli] Connection failing

Whenever I connect to my app through ADB or qr code after some few minutes it aborts connection and I have to connect it again

[cli] Build a user management app with Supabase

What

add option for supabase to initialize an app with user management

https://supabase.com/docs/guides/getting-started/tutorials/with-expo-react-native?utm_source=expo&utm_medium=referral&utm_term=expo-react-native

How

When a user selects "Supabase", they should see an option to initialize an app "With User Management"

[docs] add docs to website

[FR] Add CI tests

Why

When working on new or existing configurations, a lot of time is spent ensuring that the other configurations still run.

What

To avoid this, we should test each combination of configurations to ensure they run as expected.

How

One way to do this would be to create a collection of CI flags, each of which correlates to an individual configuration, these should require no user input. You can then run a single command that ensures that each test runs, as expected.

Future versions of this can do some kind of snapshot comparison of the output to a previously snapshotted version that is known to work.

[docs] Why CES screen

modeled off of https://create.t3.gg/en/why

error while running format script

Getting the following error while running npm run format script
No files matching the pattern "'**/*.{js,jsx,ts,tsx}'" were found.

[cli] Upgrade to NativeWind v4

Mark recently released NativeWind v4, we should upgrade existing templates to use this version. v4 has a new way of configuring NativeWind so that will likely be the bulk of the work. I believe that the styles are still passed in the same way.

https://www.nativewind.dev/v4/overview

[www] Above the fold call-out

Above the fold callout on the website, something like “by Dan Stepanov” or something non-Expo

[www] Footer call-out

The footer must have call-out that the Expo name and logo are trademarks of 650 Industries, Inc. This can be low key and doesn't need to be super prominent.

SyntaxError: Cannot use 'import.meta' outside a module

I follow the steps to generate the code, with successful library installation. I then follow the steps suggested (Firebase project setup and putting the creds + relevant info in the .env file). Unfortunately I'm met with this error:

const defaultConfig = getDefaultConfig(import.meta.dir);
                                              ^^^^

SyntaxError: Cannot use 'import.meta' outside a module

This happens when I try to run the code for the first time with npm run ios.

[www] Add discord link to website

[cli] Nice to have CLI flags

• importAlias
• src folder (need a better name for this)

[docs] add vercel analytics

https://vercel.com/docs/analytics/quickstart

[FR] Add flags to CLI

TODO

• Look into how to handle this with GlueGun

Jamon: "They should just show up in parameters.options, try passing them in and console logging that object. Which reminds me, I need to support camel cased options like that. They will show up as parameters.options.install === false"

Flags to add

• noInstall
• noGit
• default

[www] Update contributors list with github action

like here: typehero/typehero#941

[cli] Sign in with Google for Supabase

What

Add option for supabase to initialize an app with google sign in

https://supabase.com/docs/guides/auth/social-login/auth-google?platform=react-native

How

When a user selects "Supabase", they should see an option to initialize an app "With Google Sign-in"

[ci] Release Beta Action fail when no changesets are available

Currently, the beta release action will only run correctly when changesets are available under the .changesets directory.

This happens because release-beta.ts script is never checking for the non-existence of changesets, and is trying to bump the package.json regardless, resulting in a malformed version: undefined-beta.{commit_hash} which cannot be published to NPM.

[cli] Login with Apple with Supabase

What

Add option for supabase to initialize an app with apple sign in

https://supabase.com/docs/guides/auth/social-login/auth-apple?platform=react-native

How

When a user selects "Supabase", they should see an option to initialize an app "With Apple Sign-in"

New brand name

api/og not working with Astro

To use open graph with Astro, currently using the image from the public file called og-image.png.
Need to figure out how api/og.tsx works with Astro, says in the Vercel docs needs to be ran on edge.
But we are in static mode in the astro.config.mjs file. Need to look into this more.

Resources:

• https://vercel.com/docs/functions/edge-functions/og-image-generation#examples

[Bug] Error: "Template not found" during install

I tried running the CLI and got an error (using both pnpx and npx @latest).

Reproduction Steps:

1. Run npx create-expo-stack@latest
2. Use all default options for the CLI

Expected outcome: CLI creates a new directory and finishes without errors
Actual outcome: "Oops, something went wrong while creating your project 😢
Error: template not found" (see full output below)

System details:
NPM: 9.6.6
PNPM: 8.3.1
OS: M2 MacBook Air (2022)
Terminal: Kitty 0.26.5

My terminal log (including selections from CLI):

pnpx create-expo-stack@latest
.../share/pnpm/store/v3/tmp/dlx-7568     | +152 +++++++++++++++
.../share/pnpm/store/v3/tmp/dlx-7568     | Progress: resolved 152, reused 117, downloaded 35, added 152, done
✔ What do you want to name your project? (my-expo-app) · touch-grass
✔ Would you like to use TypeScript with this project? (Y/n) · true
Good call, now using TypeScript! 🚀
✔ What would you like to use for Navigation? · Expo Router
✔ What type of navigation would you like to use? · Stack
Great, we'll use Expo Router!
✔ Would you like to use NativeWind (Tailwind for RN) with this project? (Y/n) · true
You'll be styling with ease using Tailwind.

Initializing your project...

Oops, something went wrong while creating your project 😢
Error: template not found /Users/nate/.local/share/pnpm/store/v3/tmp/dlx-7568/node_modules/.pnpm/[email protected]/node_modules/create-expo-stack/build/build/templates/base/assets/adaptive-icon.png
    at /Users/nate/.local/share/pnpm/store/v3/tmp/dlx-7568/node_modules/.pnpm/[email protected]/node_modules/gluegun/build/toolbox/template-tools.js:82:27
    at step (/Users/nate/.local/share/pnpm/store/v3/tmp/dlx-7568/node_modules/.pnpm/[email protected]/node_modules/gluegun/build/toolbox/template-tools.js:44:23)
    at Object.next (/Users/nate/.local/share/pnpm/store/v3/tmp/dlx-7568/node_modules/.pnpm/[email protected]/node_modules/gluegun/build/toolbox/template-tools.js:25:53)
    at /Users/nate/.local/share/pnpm/store/v3/tmp/dlx-7568/node_modules/.pnpm/[email protected]/node_modules/gluegun/build/toolbox/template-tools.js:19:71
    at new Promise (<anonymous>)
    at __awaiter (/Users/nate/.local/share/pnpm/store/v3/tmp/dlx-7568/node_modules/.pnpm/[email protected]/node_modules/gluegun/build/toolbox/template-tools.js:15:12)
    at generate (/Users/nate/.local/share/pnpm/store/v3/tmp/dlx-7568/node_modules/.pnpm/[email protected]/node_modules/gluegun/build/toolbox/template-tools.js:64:16)
    at /Users/nate/.local/share/pnpm/store/v3/tmp/dlx-7568/node_modules/.pnpm/[email protected]/node_modules/create-expo-stack/build/commands/create-expo-stack.js:274:35
    at Array.reduce (<anonymous>)
    at /Users/nate/.local/share/pnpm/store/v3/tmp/dlx-7568/node_modules/.pnpm/[email protected]/node_modules/create-expo-stack/build/commands/create-expo-stack.js:255:44

If this was unexpected, please open an issue: https://github.com/danstepanov/create-expo-stack#reporting-bugs--feedback

[cli] Expo router problem after installing axios

I initialized a new app using npx create-expo-stack@latest but when I installed axios using npm install axios I got this error Module '.. /.. /components/edit-screen-info was resolved to' d:/project/e-learning/components/edit-screen-infov.tsx' but '--jsx' is not set, i fixed it by adding jsx in my configuration file but now getting this error

[cli] Hot reloading doesn't work for web with expo-router

An update is needed to the overrides section fo package json to add the react-refresh package version as noted here:

Source: https://docs.expo.dev/router/reference/static-rendering/

I will make a PR for this.

[cli] Stack imported from expo-router twice

Description

• When the the project is done generating, you'll notice two lines with import { Stack } from "expo-router";
• To reproduce: npx create-expo-stack@latest my-expo-app --expo-router --tabs --stylesheet --npm

How

• Fix the _layout.tsx.ejs under cli\src\templates\packages\expo-router\tabs\app to not contain this duplicate line

[cli][www][FR] Auth providers

Why

Many people inquire about how to best get set up with an auth provider and create-expo-stack seems like a great way to convey this. Additionally, in order to support flags for other opinionated stacks, we might need to support auth providers out of the box.

What

Add a CLI option to select an auth provider (likely Supabase or Firebase, open to others).

How

There are more set up steps beyond just the mobile code configuration so this should contain both a minimal example set up with each auth provider as well as a link to some kind of walkthrough that highlights how to create an account, acquire keys, and familiarize with the relevant dashboard.

[cli] Delete all files if cli fails

[cli] Offline-first with Supabase

What

Add option for supabase to initialize an app that is offline first

https://supabase.com/blog/react-native-offline-first-watermelon-db

How

When a user selects "Supabase", they should see an option to initialize an app "With Offline Support"

[cli] Update expo router examples

We currently declare stack screen options in this way. I believe this only applies to the stack template for Expo Router and not the tabs template.

However, with recent updates to Expo Router, we can define stack screen options on a per screen basis. expo/router#834

npm install -g create-expo-stack

won't work, gets to the end says fails to load.

machine specs is windows 10

[cli][FR] Auth setup walkthrough

This is an adjacent task to #9

[cli] Deep Linking with Supabase

What

Add option for supabase to initialize an app with deep linking

https://supabase.com/docs/guides/auth/native-mobile-deep-linking

How

When a user selects "Supabase", they should see an option to initialize an app "With Deep Linking"

[FR] Bun support for generated projects

Currently, users can select to use either npm, yarn, or pnpm but they should be able to also generate a RN project using bun.

There should be a suite of tests added to cover projects that use bun, should be as easy as adding "bun" here: https://github.com/danstepanov/create-expo-stack/blob/9c6e0733e1bdccc28212eac90bf3738d2219ce75/__tests__/cli-integration.test.ts#L15

[FR] Add welcome message above prompts

See the T3 welcome message above the prompts, rainbow lettering not required

Design new logo