/startupjs

🔥 React Native + Web framework with the isomorphic realtime storage engine and observables

Primary LanguageJavaScript

StartupJS

🔥 React Native + Web framework with the isomorphic realtime storage engine and observables

Introduction
Requirements
Quick start
Boilerplate templates
Running on mobile
Docker development Quick Start
IDE configuration
List of Packages
Contributing & Troubleshooting
Licence

Introduction

A full-stack framework which uses isomorphic web/native React frontend and NodeJS + MongoDB backend. All data manipulations are done through the isomorphic React- and NodeJS- integrated collaborative real-time observable Model.

StartupJS stack is built on top of the following libraries and technologies:

  1. React and/or react-native-web for the Web-frontend.
  2. React Native for the Native-frontend (iOS, Android, etc.).
  3. React-ShareDB:
    • A ShareDB 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.
  4. Model based on Racer with an ability to create custom ORM methods.
  5. React Router for routing and navigation with an ability to separate your frontend into multiple frontent mircoservices (e.g. main and admin)
  6. Node.js and Express for the backend.
  7. MongoDB for the database.
  8. Redis for the pub/sub (required by ShareDB) and locking functionality.
  9. Offline support with an ability to query data locally using the MongoDB queries and aggregations language.
  10. Code Quality control tools:

Requirements

OR

Quick start

  1. Initialize a new ui boilerplate project. Change myapp to your project name (use lower case).

    npx startupjs init myapp

  2. Go into the created project folder and start the web application with:

    yarn start

  3. Open http://localhost:3000 and start developing!

Running on mobile

yarn start actually combines 2 commands together: yarn server and yarn web.

In order to develop your app on mobile, you'll have to open a bunch of tabs anyways, so it makes sense to also run server and web separately instead of using the yarn start.

Here is the list of commands to run all platforms at the same time:

  1. Start server (required) in a separate terminal tab

    yarn server

  2. Start web (optional) in a separate terminal tab

    yarn web

  3. Start metro (required for Android and/or iOS) in a separate terminal tab

    yarn metro

  4. Run android (optional) in a separate terminal tab

    yarn android

  5. Run ios (optional) in a separate terminal tab

    yarn ios

Boilerplate templates

The following templates are available:

  1. simple
  2. routing - plugs in @startupjs/app which provides a react-router routing implementation
  3. ui (default) - plugs in routing and @startupjs/ui

By default init creates a project using the feature-rich ui template.

To use another template specify the -t option:

npx startupjs init myapp -t simple

To create a new project using an alpha version of startupjs, append @next to the startupjs itself:

npx startupjs@next init myapp

Each template initializes on top of a default react-native init application.

If you want to use an RC version (next) of react-native, specify it using the -rn option:

npx startupjs init myapp -rn next

Docker development Quick Start

Alternatively you can run a docker development image which has node, yarn, mongo and redis already built in. You only need docker for this. And it works everywhere -- Windows, MacOS, Linux.

Keep in mind though that since docker uses its own driver to mount folders, performance (especially when installing modules) might be considerably slower compared to the native installation when working with the large amount of files.

  1. Initialize a new simple boilerplate project. Change myapp at the end to your project name (use lower case).

    docker run --rm -it -v ${PWD}:/ws:delegated startupjs/dev init myapp

  2. Go into the created project folder. Then run the development docker container with:

    ./docker

  3. While inside the running container, start your app with:

    yarn start

  4. Open http://localhost:3000 and start developing!

  5. When you want to open an additional terminal window, you can quickly exec into the running container using:

    ./docker exec

IDE configuration

Visual Studio Code

Step 1: Add support for PUG syntax highlighting

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

Step 2: Add support for ESLint errors highlighting

  1. Install extension ESLint
  2. Restart VS Code

Atom

Step 1: Add support for PUG syntax highlighting

  1. Install packages language-babel and language-pug
  2. Open settings of language-babel in atom
  3. Find the field under "JavaScript Tagged Template Literal Grammar Extensions"
  4. Enter: pug:source.pug
  5. Go to Core settings of atom.
  6. Uncheck Use Tree Sitter Parsers
  7. Restart Atom

Step 2: Add support for ESLint errors highlighting

  1. Install package linter-eslint
  2. Restart Atom

List of Packages

Contributing & Troubleshooting

To initialize the monorepo, run:

yarn bootstrap

After that you can run the styleguide project to develop the UI components, etc.:

cd styleguide
yarn start

To cleanup all modules:

yarn clean

If you have any questions or want to request a feature, please look wether a similar issue already exists in this repo, otherwise feel free to file a new one.

If you want to contribute, feel free to send your PRs, we will review them and provide our feedback on a short notice.

Licence

MIT

© Pavel Zhukov