Wrappid Framework is a wrapper framework built to enable rapid development of applications based on React, React Native, Node, Express, etc. Here, you write code once and use Wrappid Toolkit to build your web and mobile applications simultaneously.

Wrappid includes a repository of components, called the CoreComponents, for application developers to use. As application developers, you also have the flexibility to write your own components. By default the styling libraries used are mui for web and react native paper for mobile.

Wrappid also comes with a set of pre-coded business handling modules like app builder, user/role/permission management, authentication, authorization, error reporting, notifications (push/mail/sms/whatsapp), etc.

This getting started section will help you setup a basic Wrappid project environment. The easiest way is to use the Wrappid Toolkit.

Follow the below steps to get going:

1. Get Early Access to Wrappid
2. Check Pre-requisites
3. Install Wrappid Toolkit
4. One-time Initialisation
5. Quick Start With Wrappid Project(s)

Please fill Wrappid Early Access Request form to get a valid <WRAPPID_TOKEN>. After filling the form you will receive the <WRAPPID_TOKEN> and Wrappiders Group link in your email. Make Sure to Join Wrappiders Group to receive important updates regarding Wrappid Framework.

The above mentioned_ <WRAPPID_TOKEN> _could only be used to read and download the Wrappid packages.

We will use this token in later steps.

Please verify the pre-requisites listed below:

Required for web app development:

• Node.js - version 16.20.X
• npm - version 8.X.X

Note: If you have multiple node versions, to set up node 16.20.x & npm 8.x.x, follow the documentation here.

Check your version of Node.js and npm

To see if you already have Node.js and npm installed and check the installed version, run the following commands:

node -v

Expected output:
v16.20.x

npm -v

Expected output:
8.x.x

Note: Above mentioned version is based on the time of documentation, 16.20.(x), 8.(x).(x), x may differ.

Required for mobile app development:

• Required steps for web app development
• JDK - 11
• Android Studio Recommended Code editor:
• VS Code/VS Codium

To use Wrappid Toolkit, you need to setup scoped wrappid package registry and install @wrappid/toolkit globally in your system.

Note:

It is expected that you successfully went through 1. Get Early Access to Wrappid section. If you don't, you won't be able to setup wrappid framework.

Run the below commands to setup scoped package registry:

Here we will use <WRAPPID_TOKEN> that is sent to your email.

npm config set @wrappid:registry https://npm.pkg.github.com/wrappid

 npm config set //npm.pkg.github.com/:_authToken <WRAPPID_TOKEN>

Run the below command to install Wrappid Toolkit globally in your system.

npm install -g @wrappid/toolkit

Once the installation is done, verify the Wrappid Toolkit installation. Run the below command to verify you already have Wrappid Toolkit installed and check the installed version

wrappid -V

This should show you the exact version of Wrappid Toolkit installed

wrappid -V

Expected output:
v0.0.107

Note: This is the Wrappid Toolkit version at the time of this documentation.

Run the below command to install all dependencies Wrappid Toolkit uses

wrappid install

This one-time initialisation of Wrappid Toolkit follows the below steps:

• Install package dependencies
• Download & Install GitHub CLI or gh (if not already installed)
• Authenticate with GitHub A/c to use GitHub CLI or gh

This is a automated process. You need not do anything.

This is a automated process but you will be prompted with GitHub CLI or gh installation.

For Windows:
Kindly click Next -> Next -> ... -> Finish to complete the GitHub CLI or gh installation.

For Linux: Enter sudo password when prompted, and continue.

Note:

If you get an error during the course of execution of the command (wrappid install), or find that gh isn't working, which generally looks like the below:

'gh' is not recognized as an internal or external command,
operable program or batch file.

Close all terminals/cmd and open a fresh terminal/cmd and run gh or gh --version to confirm GitHub CLI installation.

If gh still doesn't work, go to the official documentation of GitHub CLI and install gh manually.

After successfull installation of GitHub CLI or gh, run wrappid install again.

If you are still not taken to authentication instructions, run gh auth login and complete your authentication manually.

Know more about GitHub CLI

When prompted, follow on-screen instructions to authenticate yourself with your GitHub A/c. It starts like:

GitHub CLI authenticating...
? What account do you want to log into?  [Use arrows to move, type to filter]
> GitHub.com
  GitHub Enterprise Server

Select Github.com (generally already selected), Press Enter.

You'll be asked to authenticate yourself.
Press Y and hit Enter if you are not authenticated or if you wish to re-authenticate, Otherwise press N and hit Enter.

Note: Now you can use the wrappid toolkit

Wrappid Toolkit Usage Documentation

Run the below command to find other [command] [subcommand] [arguments] [options] supported by the Wrappid Toolkit.

wrappid --help

Wrappid Framework supports building frontend, backend (API middleware & DB handling) and business specific modules. Wrappid-Toolkit enables us to generates boilerplate applications.

1. Frontend - <wrappid>-app
2. Backend - <wrappid>-service
3. Modules - <wrappid>-module

Note: It is understood that you have installed wrappid toolkit and initialized it successfully

Run the below command to initialize a Wrappid project with a specified project name.

wrappid init <project_name>

This will create 3 Wrappid project repositories with project names(user input) in your github account repository and 3 same 3 repositories locally with wrappid-modules at your path of command execution.

1. Frontend
   <project_name>-app
2. Module
   <project_name>-module
3. Backend
   <project_name>-service

To setup frontend wrappid-app in web or mobile, change directory to wrappid-app project

cd <project_name>-app
wrappid setup [web|mobile]

To start backend wrappid-app, change directory to wrappid-service project

cd <project_name>-service
wrappid setup

To start frontend wrappid-app in web or mobile, change directory to wrappid-app project

cd <project_name>-app
wrappid start [web|mobile] --env=[dev|stage|prod]

To start backend wrappid-app, change directory to wrappid-service project

cd <project_name>-service
wrappid start --env=[dev|stage|prod]

Output