docs

RapDv Documentation

v1.0.1

Quick Start

To start quickly, you can use an example blog app.

Used Technologies

  • TypeScript
  • Node.js
  • Express.js
  • React as a template language on the back-end
  • Bootstrap
  • MongoDB

Architecture

RapDv framework is located in: /submodules/rapdv.

Server

All back-end code is in the server folder. Server start point is in: /server/App.tsx.

How to Define an App

All main components of the applications are in /server/App.tsx.

To define the app:

  1. Set basic app info in getBasicInfo
  2. Define authentication methods in initAuth
  3. Specify list of pages and endpoints in getPages
  4. Set main app layout in getLayout
  5. Add custom user roles in getRoles. Default roles, always available are User and Admin.
  6. Specify MongoDB collections in getStorage
  7. Add recurring tasks, if any in startRecurringTasks

Authentication

Currently there are three authentication methods implemented:

  • Authentication with email by using single codes. You can check it in the blog app.
  • Authentication with Google. You can check it in the blog app.

Forms in Pages

Forms in pages are the most common components used over, and over again.

RapDv has a resuable implementation of forms, that automatically has a server and client side validation built-in.

You can check its implementation in the example blog app.

Client

All front-end code is in the client folder. Client start point is in: /client/App.tsx.
Client doesn't use React by default to make both using and loading times faster.

Page logic is defined in a separate file, for each page. That way you can easily add new pages, and keep the code separated between them.

Check the example blog app to see how it works.

Customizing Style

In order to customize your app, you can use one of ready-made themes: Browse Bootstrap themes

You can also write your own styles in css and scss files.

App Icon

Create app icon as an svg file. Put it in /client/assets/favicon.svg

It will be automatically rescalled and used everywhere.

Responsive Design

Thanks to the Bootstrap library, your app should look good on all screen sizes, out of the box.

Installing as an App on iOS and Android

Web apps built with RapDv, can be installed on iOS and Android, and used like native apps.

Guides:

Local Development

Based on the steps in the example blog app:

  • Install RapDv submodule: git submodule update --init --recursive.
  • Install all dependencies: npm install
  • Start MongoDB
  • Copy .env.example to .env, and set correct values in .env file
  • Start app with: npm start

Deploying to Production

You can run this application on any server. It was tested on Ubuntu 22.04.

  • Deploy MongoDB database, for example as a Docker container
  • Clone the repository, its submodule and configure enviorment variables in .env file.
  • Install all dependencies: npm install
  • Create a client production build with: npm run build-prod
  • You can start the app in production with pm2. To install pm2:
    npm install pm2 -g
    pm2 startup To start processes on reboot

    Now you can start your app with:
    pm2 start 'cd /var/www/rapdv-app; npm run start-prod' --name "rapdv-app"