Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/startupjs/startupjs
⚡ Universal React Native + Web framework with isomorphic collaborative DB and observables
https://github.com/startupjs/startupjs
express framework mongodb nodejs react react-native react-native-web reactive-programming sharedb
Last synced: 2 days ago
JSON representation
⚡ Universal React Native + Web framework with isomorphic collaborative DB and observables
- Host: GitHub
- URL: https://github.com/startupjs/startupjs
- Owner: startupjs
- Created: 2020-03-23T14:52:57.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-12-09T08:43:53.000Z (14 days ago)
- Last Synced: 2024-12-14T09:35:14.475Z (9 days ago)
- Topics: express, framework, mongodb, nodejs, react, react-native, react-native-web, reactive-programming, sharedb
- Language: JavaScript
- Homepage: https://startupjs-ui.dev.dmapper.co
- Size: 230 MB
- Stars: 106
- Watchers: 11
- Forks: 49
- Open Issues: 123
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
## What is StartupJS?
StartupJS is a **full-stack framework** that consists of:
- **Frontend**
- Isomorphic React [native](https://facebook.github.io/react-native/) and [web](https://react.dev/) based on [Expo](https://expo.dev/)
- **Backend**
- [ExpressJS](https://expressjs.com/)
- **Collaborative Database**
- [MongoDB](https://www.mongodb.com/) which runs behind [ShareDB](https://github.com/share/sharedb) and a client-server observable [Teamplay ORM](https://teamplay.dev/)
## Quickstart
### Requirements
StartupJS app requires:
- [Node 22+](https://nodejs.org/)
- [Yarn](https://yarnpkg.com/) (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 `` from `startupjs` (when using expo-router it's in `app/_layout.tsx`):
```jsx
import { StartupjsProvider } from 'startupjs'
// ...
return (
...
)
```
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`:
```json
{
"expo": {
"jsEngine": "jsc"
}
}
```
If you would have issues running Android, you can use V8 engine on it: [`react-native-v8`](https://github.com/Kudo/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
### [](https://code.visualstudio.com/)
#### Step 1: Add support for ESLint errors highlighting
1. Install extension [`vscode-eslint`](https://marketplace.visualstudio.com/items?itemName=dbaeumer.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`](https://marketplace.visualstudio.com/items?itemName=kaminaly.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`](https://marketplace.visualstudio.com/items?itemName=startupjs.vscode-startupjs)
2. Restart VS Code
## Documentation
The main things you'll need to know to get started with StartupJS are:
1. [React Native](https://reactnative.dev/)
1. [Teamplay ORM](https://teamplay.dev/) (all `teamplay` stuff should be imported directly from `startupjs`)
1. [StartupJS UI Components](https://startupjs-ui.dev.dmapper.co)
To launch your app to production read the following sections:
1. [Production](#production)
1. [Security](#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`](https://github.com/kofrasa/mingo) and [`ioredis-mock`](https://github.com/stipsan/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](https://expo.dev/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](https://reactjs.org/)
1. [React Native](https://facebook.github.io/react-native/) for the Native-frontend (iOS, Android, etc.).
1. [Teamplay ORM](https://teamplay.dev/).
1. [Expo Router](https://docs.expo.dev/router/introduction/) for routing and navigation.
1. [Node.js](https://nodejs.org/) and [Express](https://expressjs.com/) for the backend.
1. [MongoDB](https://docs.mongodb.com/manual/installation/) for the database.
1. [ShareDB](https://share.github.io/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](https://mobx.js.org/).
1. [Redis](https://redis.io/) for the pub/sub (required by ShareDB) and locking functionality.
1. [Pug](https://pugjs.org/) (optional) which is used besides JSX for templating.
1. [Stylus](https://stylus-lang.com/) (optional) which is used besides CSS and inline styling for stylesheets.
1. Code Quality control tools:
- [ESLint](https://eslint.org/)
- *optional* [TypeScript](https://www.typescriptlang.org/)
## Version migration guides
The following guides are available to assist with migration to new major versions of StartupJS:
- [Migration Guides](/docs/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](https://github.com/startupjs/startupjs/tree/master/packages/sharedb-access)
- [Server-only MongoDB Aggregations](https://github.com/startupjs/startupjs/tree/master/packages/server-aggregate)
- [Validation of MongoDB documents using JSON Schema](https://github.com/startupjs/startupjs/tree/master/packages/sharedb-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:
```js
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](https://github.com/cray0000) directly via email.
## Contributing & Troubleshooting
See [CONTRIBUTING.md](/CONTRIBUTING.md)
## License
MIT
© Pavel Zhukov
