⚡ Universal React Native + Web framework with isomorphic collaborative DB and observables
StartupJS is a full-stack framework that consists of:
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, change myapp
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!
>=0.73
)Create a new expo app and go into it:
Note: You can use any expo template you want (tabs
has Expo Router included)
for npm:
npx create-expo-app@latest -t tabs myapp
cd myapp
for yarn:
yarn create expo-app -t tabs 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>
from startupjs
(when using expo-router it’s in app/_layout.tsx
):
import { StartupjsProvider } from 'startupjs'
// ...
return (
<StartupjsProvider>
...
</StartupjsProvider>
)
Start expo app with npm start
or yarn 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
vscode-react-pug
ESLint
language-babel
in atompug:source.pug
Core
settings of atom.Use Tree Sitter Parsers
linter-eslint
The main things you’ll need to know to get started with StartupJS are:
MODELS
section, ignore everything else.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:
main
and admin
)The following templates are available:
simple
routing
- plugs in @startupjs/app
which provides a react-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. Change myapp
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:
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