Skip to main content

base-fe

Project Structure​

This plugin contains the base for an expo project setup with expo-router v3. This base plugin establishes the foundation and is designed to integrate all the expo project features.

Overview​

The base module provides the core setup necessary for a minimal expo application. It includes expo-router configuration and sets the stage for integrating additional plugins via an automated process.

Features​

  • Expo project setup with expo router v3
  • gluestack-ui library setup with config-v2
  • eslint setup
  • prettier setup
  • tsconfig alias setup
  • jest test lib setup
  • env setup

Installation steps​

  1. This will be added when you initiate a project

Post Installation steps​

  1. yarn install or npm install
  2. Create a .env.development file with all the variables present in the .env.example file or run cp .env.example .env.development.
  3. Run npm run codegen to generate hooks for the queries and mutations.
  4. To run the project in ios prebuild environment: npm run ios
  5. To run the project in android prebuild environment: npm run android
  6. To run the project in web prebuild environment: npm run web.
  7. To run the project in expo go: npm start and then select the device. This is just a sandbox, some features might not work in this environment.

Backend Dependency​

This plugin doesn't depend on any server plugin.

Structure​

  • app : all the routes will be created here.
    • \_layout This will the starting of the application. This will contain all the expo router setup.
      • [...missing].tsx This file will be responsible for showing the UI if any route is not available.
      • +html.tsx This contains all the meta information regarding the application. We can also pass all the scripts here.
      • .... routes All the routes that will be available will have a separate file with Example.tsx. You can read more about this on [https://docs.expo.dev/router/introduction/] (expo-router documentation)
  • __tests__ : Jest test cases framework has been setup. If you want to run the tests, you can write your tests in this directory and run using the command yarn or npm test
  • assets : Add your assets here
  • components : all the components will go here . If the components are common, add in components folder directly or create specific folder to keep the components . For e.g. assets/auth/MyComponent.tsx
  • .env.development : This will contain all the env variables required in the application in development mode.
  • app.json : This contains expo related configuration for the app.
  • app.config.ts : This file is given priority over app.json. We add all the configuration of app.json in this file using spread operator. We have add all the env variables after valudations in the extra key of app config.
  • tsconfig.json : this will contain all the typescript configurations. You can set alias paths here.
  • env.js: This will contains zod validations for env file's variables. If any variable is not present in env file, it will throw error.
  • config:
    • env.js: This imports expo-constants, and exports the extra variables in the app config file. This will be aliased and used everywhere oin the application.