What is StartupJS?

StartupJS is a full-stack framework that consists of:

• Frontend
  • Isomorphic React native and web based on Expo
• Backend
  • ExpressJS
• Collaborative Database
  • MongoDB which runs behind ShareDB and a client-server observable Teamplay ORM

Quickstart

Requirements

StartupJS app requires:

• Node 22+
• Yarn (optional, but strongly recommended)

Installation

1. Create a new Expo app and go into it:

   Note: You can use any Expo template you want

   • if you are using yarn (recommended):

     yarn create expo-app myapp
     

     cd myapp
     

     corepack enable && echo 'nodeLinker: node-modules' > .yarnrc.yml && corepack use yarn@4
     

     Warning: If corepack is not installed in your system, install it with:

     npm install -g corepack
     

     and re-run the last command.

   • if you are using npm:

     npx create-expo-app@latest myapp
     

     cd myapp
     

2. Install startupjs into your app:

   npm init startupjs@canary
   

3. Wrap your root component into <StartupjsProvider> from startupjs (when using expo-router it’s in app/_layout.tsx):

   import { StartupjsProvider } from 'startupjs'
   // ...
   return (
     <StartupjsProvider>
       ...
     </StartupjsProvider>
   )
   

4. Start expo app with yarn start (or npm start).

[!WARNING]
If Fast Refresh (hot reloading) is not working (this might be the case if you created a bare expo project),
add import '@expo/metro-runtime' to the top of your entry file.

Known issues

On the current version of Expo (v51) the Hermes JS engine does not support FinalizationRegistry yet on iOS/Android.
Because of this there are known memory leaks. To workaround this issue until Hermes adds support for it, please
specify a different JS engine (jsc) in app.json:

{
  "expo": {
    "jsEngine": "jsc"
  }
}

If you would have issues running Android, you can use V8 engine on it: react-native-v8

Native Development (iOS and Android)

StartupJS uses Expo by default which should guide you through installation steps itself, just run yarn start -c
(-c flag is to clear the JS compilation cache) and press i to launch iOS simulator or a to launch Android simulator.

IDE configuration

Step 1: Add support for ESLint errors highlighting

1. Install extension vscode-eslint
2. Restart VS Code

Step 2 (optional): Pug syntax highlighting

If you are gonna be using pug instead of pure JSX, add support for Pug syntax highlighting:

1. Install extension vscode-react-pug
2. Restart VS Code

Step 3 (optional): Stylus syntax highlighting

If you are gonna be using styl to define styles, add support for Stylus syntax highlighting:

1. Install extension vscode-startupjs
2. Restart VS Code

Documentation

The main things you’ll need to know to get started with StartupJS are:

1. React Native
2. Teamplay ORM (all teamplay stuff should be imported directly from startupjs)
3. StartupJS UI Components

To launch your app to production read the following sections:

1. Production
2. Security

Production

To deploy your app to production, run yarn build to build the server and web code and yarn start-production to run it.

By default for local development instead of a full MongoDB and Redis the startupjs app uses their mocks (mingo and ioredis-mock).

It is strongly recommended to use the actual MongoDB and Redis in production (and it is required if you want to run multiple instances of the application).

To use MongoDB and Redis, specify MONGO_URL and REDIS_URL environment variables when running the yarn start-production command.

You can also provide these environment variables when doing local development through the yarn start -c command.

To deploy the native apps use the Expo EAS service – eas build and eas submit.

Advanced

To gain further deep knowledge of StartupJS stack you’ll need get familiar with the following technologies it’s built on:

1. React
2. React Native for the Native-frontend (iOS, Android, etc.).
3. Teamplay ORM.
4. Expo Router for routing and navigation.
5. Node.js and Express for the backend.
6. MongoDB for the database.
7. ShareDB:
   • A real-time collaborative database integration into React.
   • Allows to sync data between your local state (similar to Redux) and the DB.
   • Brings in collaboration functionality similar to Google Docs, where multiple users can edit the same data simultaneously.
   • Uses WebSockets to send micro-patches to and from the server whenever there are any changes to the data you are subscribed to.
   • Uses observables to automatically rerender the data in React, similar to MobX.
8. Redis for the pub/sub (required by ShareDB) and locking functionality.
9. Pug (optional) which is used besides JSX for templating.
10. Stylus (optional) which is used besides CSS and inline styling for stylesheets.
11. Code Quality control tools:
    • ESLint
    • optional TypeScript

Version migration guides

The following guides are available to assist with migration to new major versions of StartupJS:

• Migration Guides

Security

StartupJS server is designed to be secure by default.

For the sake of simplifying quick prototyping, a new project you create with startupjs init will have security mechanisms turned off.

You are strongly encouraged to implement security for your project as early as possible by removing secure: false flag from the server initialization in your server/index.js file.

There are 3 types of security mechanisms you must implement:

• Access Control to MongoDB documents
• Server-only MongoDB Aggregations
• Validation of MongoDB documents using JSON Schema

If you want to work on their implementation one by one, you can keep the secure: false flag and only add the ones you want to implement by specifying the following flags:

accessControl: true,
serverAggregate: true,
validateSchema: true

NOTE: All 3 mechanisms are integrated for their simpler use into the ORM system. We are working on a guide on how to use them with the ORM. If you want help properly integrating it into your production project, please file an issue or contact cray0000 directly via email.

Contributing & Troubleshooting

See CONTRIBUTING.md

License

MIT

© Pavel Zhukov