Wrapper Framework for Rapid Development

Introduction

The Wrappid Framework is a wrapper framework designed to facilitate rapid development of applications. It allows developers to write code once and then use the Wrappid Toolkit to build both web and mobile applications simultaneously .

The framework is based on technologies such as React, React Native, Node, Express, etc. It includes a repository of components known as CoreComponents for application developers to use. Developers also have the flexibility to write their own components .

By default, the styling libraries used are mui for web and react native paper for mobile. The framework 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 .

Getting Started

To get started with the Wrappid Framework, you need to go through several steps:

1. Get Early Access to Wrappid

You need to fill out the Wrappid Early Access Request form to get a valid<WRAPPID_TOKEN>. This token is used to read and download the Wrappid packages .

2. Check Pre-requisites

Ensure that you meet the requirements for setting up the Wrappid Framework

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:

• JDK - 11
• Android StudioRecommended Code editor:
• VS Code/VS Codium

3. Install Wrappid Toolkit

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

After successful installation, you should see something like this on your terminal:

v0.0.107

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

4. One-time Initialisation

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

4.1. Install package dependencies

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

4.2. Download & Install GitHub CLI or gh (if not already installed)

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

4.3. Authenticate with GitHub A/c to use GitHub CLI or gh

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

5. Quick Start With Wrappid Project(s)

5.1 How to Create Wrappid Projects?

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

Output

5.2 How to Setup Wrappid Project?

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

5.3 Running Your Newly Created Project

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]

Various commands and options that are available in the Wrappid CLI

wrappid cli Alias: wr.

wrappid [command] [subcommand] [arguments] [options]

This is a npm package to enable Wrappid Toolkit so that application developers
can use the wrappid command line interface to handle Wrappid projects.

Options:
  -V, --version          output the version number
  -h, --help             display help for command

Commands:
  install                This command will install all the pre-requisite such as:
                         a. Install GitHub CLI
                         b. Authenticate with GitHub A/c using GitHub CLI
  list [options]         Show list of wrappid projects in current working directory.
  list deps              Show list of project dependencies
  init <project-name>    Initialize app service module project using wrappid template.
  setup                  Setup [APP(web|mobile)|SERVICE] project.
  start                  Start [APP(web|mobile)|SERVICE] project.
  copy [options]         Copy src and res to web and mobile runtime.
  include <module-name>  Include module inside wrappid project
  exclude <module-name>  Exclude module from wrappid project
  add                    Include new modules into project directory (Not needed)
  build (web|android)    Create build for web or android
  reinstall (web|mobile) Reinstall wrappid packages for web or mobile
  update                 Update wrappid toolkit
  update modules         Update project modules
  update modules <name>  Update specified module, if module is included in project

wrappid install

wrappid init app test - old
wrappid init service test - old
wrappid init test - old

wrappid init <projectname>
wrappid init app <projectname>
wrappid init module <projectname>
wrappid init service <projectname>

wrappid setup web --env=(dev|stage|prod)
wrappid setup mobile --env=(dev|stage|prod)
wrappid setup service --env=(dev|stage|prod)

wrappid start web --env=(dev|stage|prod)
wrappid start mobile --env=(dev|stage|prod)
wrappid start service --env=(dev|stage|prod)

wrappid copy web
wrappid copy mobile

wrappid add <modulename> - old

wrappid build web
wrappid build android

wrappid-dev cli Alias: wdev, wd.

Usage: wrappid-dev [command] [subcommand] [arguments] [options]

This is a npm package to enable Wrappid Developer Toolkit so that application developers
can use the wrappid command line interface to handle Wrappid projects.

Options:
  -V, --version     output the version number
  -h, --help        display help for command

Commands:
  init [path-to-wrappid-dev-home]                Initialize and setup wrappid development environment.
  reset                                          Removes wrappid dev environment configuration
  link [web|mobile]                            Link wdpkg (wrappid development packages) in web and mobile runtime.
  reload [web|mobile] --pkg [core|native|styles] Reload wdpkg (wrappid development packages) in web and mobile runtime