StartupJS is a full-stack framework that consists of:
- Frontend: Isomorphic React native and web
- Backend: ExpressJS
- Collaborative Database: MongoDB which runs behind ShareDB and a client-server observable ORM
StartupJS app requires: Node 20.10+, Yarn
Alternatively, you can run everything in Docker, in which case follow Docker development Quick Start. Important to note is that Docker won't allow you to test Android or iOS.
Warning
StartupJS does not yet support the latest version of React Native.
When creating a new project please specify the 0.72
version:
npx startupjs@latest init myapp --react-native 0.72
If you want to use the latest React Native, install StartupJS Alpha version
-
Initialize a default
ui
template project, changemyapp
to your project name (use lower case):npx startupjs@latest init myapp
-
Go into the created project folder and start the web application with:
yarn start
-
Open http://localhost:3000 and start developing!
-
Create a new expo app and go into it (change
myapp
to the name of your app):Note: You can use any Expo template you want by specifying the
--template
option.-
for npm:
npx create-expo-app@latest myapp
cd myapp
-
for yarn:
yarn create expo-app myapp
cd myapp
-
To use the latest Yarn Berry v4 (recommended), do the following:
corepack enable && echo 'nodeLinker: node-modules' > .yarnrc.yml && corepack use yarn@4
Warning: If you are on Mac, you might first need to install
corepack
separately with:brew install corepack
-
-
-
Install startupjs into your app:
npm init startupjs@next
-
Wrap your root component into
<StartupjsProvider>
fromstartupjs
(when using expo-router it's inapp/_layout.tsx
):import { StartupjsProvider } from 'startupjs' // ... return ( <StartupjsProvider> ... </StartupjsProvider> )
-
Start expo app with
npm start
oryarn start
-
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.
Follow the React Native guide to setup everything.
StartupJS uses native modules, so you have to follow React Native CLI Quickstart
, not the Expo
guide.
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:
-
Start server (required) in a separate terminal tab
yarn server
-
Start web (optional) in a separate terminal tab
yarn web
-
Start metro (required for Android and/or iOS) in a separate terminal tab
yarn metro
-
Run android (optional) in a separate terminal tab
yarn android
-
Run ios (optional) in a separate terminal tab
yarn ios
- Install extension
vscode-react-pug
- Restart VS Code
- Install extension
ESLint
- Restart VS Code
- Install packages language-babel and language-pug
- Open settings of
language-babel
in atom - Find the field under "JavaScript Tagged Template Literal Grammar Extensions"
- Enter:
pug:source.pug
- Go to
Core
settings of atom. - Uncheck
Use Tree Sitter Parsers
- Restart Atom
- Install package
linter-eslint
- Restart Atom
The main things you'll need to know to get started with StartupJS are:
- React Native
- Racer's Model. You only need to read the
MODELS
section, ignore everything else. - React hooks for Model
- StartupJS UI Components
Before launching your app to production you are strongly encouraged to implement:
For additional documentation on each StartupJS package see the according readme
To gain further deep knowledge of StartupJS stack you'll need get familiar with the following technologies it's built on:
- React and/or react-native-web for the Web-frontend.
- React Native for the Native-frontend (iOS, Android, etc.).
- Pug which is used besides JSX for templating.
- Stylus which is used besides CSS for stylesheets.
- 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.
- Model based on Racer with an ability to create custom ORM methods.
- React Router for routing and navigation with an ability to separate your frontend into multiple frontent mircoservices (e.g.
main
andadmin
) - Node.js and Express for the backend.
- MongoDB for the database.
- Redis for the pub/sub (required by ShareDB) and locking functionality.
- Code Quality control tools:
- ESLint
- optional TypeScript
- App
- Babel preset startupjs
- Backend
- Bundler
- CLI
- Cron
- Docs
- Hooks
- Init
- Model
- Offline
- ORM
- React sharedb
- Server
- StartupJS meta package
- UI
The following templates are available:
simple
routing
- plugs in@startupjs/app
which provides areact-router
routing implementationui
(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
or a specific version like 0.72
, specify it using the --react-native
option:
npx startupjs init myapp --react-native next
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.
-
Initialize a new
ui
boilerplate project. Changemyapp
at the end to your project name (use lower case).docker run --rm -it -v ${PWD}:/ws:delegated startupjs/dev init myapp
-
Go into the created project folder. Then run the development docker container with:
./docker
-
While inside the running container, start your app with:
yarn start
-
Open http://localhost:3000 and start developing!
-
When you want to open an additional terminal window, you can quickly exec into the running container using:
./docker exec
The following guides are available to assist with migration to new major versions of StartupJS:
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.
See CONTRIBUTING.md
MIT
© Pavel Zhukov