Monorepo for TypeScript introduction

Monorepo is a solution for a requirement of developing a strong website + native mobile app. Technologies used are Next.js + React Native (monorepo). This stack allows share code between web and mobile iOS and Android app.

How does monorepo work with Next.js and React Native?

  • Next.js = Web part of the application (SSR, SEO, dynamic pages)
  • React Native = Mobile application (iOS/Android, native functions)
  • Shared code = Components, business logic, API client

The project structure can then look like this:

/my-app
 ├── /apps
 │    ├── /web (Next.js)
 │    ├── /mobile (React Native)
 │
 ├── /packages
 │    ├── /ui (Shared UI components)
 │    ├── /utils (Shared utils)
 │
 ├── package.json
 ├── tsconfig.json
 ├── turbo.json (if TurboRepo used for speeding up builds)

There's no need of using /src and /dist directory in Next.js and React Native as:

  • In Next.js, TypeScript compilation is processed internally as it uses hot-reloading and Server Components.
  • In React Native (Expo), TypeScript is transpiled dynamically using Metro bundler.

Advantages of this architecture

  • One codebase for web and mobile
  • Fast development thanks to TurboRepo
  • Ability to share UI components, API clients, business logic
  • Next.js for web with dynamic rendering and SEO
  • React Native for real mobile applications

Create a monorepo using TurboRepo with Next.js and React Native

  1. Generate a project structure

    From the command tool, create a project structure using TurboRepo (Monorepo manager by Vercel)

    npx create-turbo@latest my-app

    In next step, select preferred package manager, e.g. npm.

    Turbo will create basic app structure + install required packages. Once generated, join the project directory with

    cd my-app

  2. Build all apps and packages

    npm run build

  3. Start the application

    npm run dev --filter=web

    From apps/mobile:

    npx expo start

Security when using Monorepo

Monorepos can be just as secure as multi-repository structures when implemented correctly. Security considerations explining:

  • Security aspects of monorepos:

    1. Access control - Most modern version control systems allow granular access control within a monorepo. You can restrict access to sensitive code directories to only those who need it.
    2. Vulnerability management - Monorepos can simplify dependency management and ensure consistent security patching across projects. When a vulnerability is fixed, it's automatically applied everywhere.
    3. Code review processes - Monorepos can enforce organization-wide security standards through shared linting rules, test coverage requirements, and code review processes.
    4. Secrets management - A potential risk is accidentally exposing secrets in a monorepo. You should use environment variables, secret management tools, or encrypted configuration files rather than hardcoding secrets.

  • Security considerations for web/mobile app case:

    • Ensure proper access controls for different teams (web vs. mobile)
    • Use separate environment configurations for development, testing, and production
    • Consider implementing security scanning in your CI/CD pipeline
    • Maintain clean separation between server-side and client-side code to prevent exposing sensitive logic

  • Alternatives if security is a top concern:

    • Use separate repos with shared libraries for common code
    • Implement a hybrid approach where highly sensitive components live in separate repositories