Skip to content
@wrappid

Wrappid

README.md

Wrapper Framework for Rapid development

Wrappid Framework is a wrapper framework built to enable rapid development of applications.

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.

Getting Started

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)

1. Get Early Access to Wrappid

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.

2. Check Pre-requisites

Please verify the pre-requisites listed below:

Required for web app development:

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

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

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.

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.

Make sure that your gh cli version is or above 2.40.0

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

gi

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 How to Start a Wrappid 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]

Output

Popular repositories Loading

  1. styles styles Public

    This package is a part of wrappid framework for wrappid-app projects, made for wrappid/wrappid-app projects created by wrappid/toolkit. This package is used by wrappid/core package, wrappid/native-…

    TypeScript 15 5

  2. core core Public

    This is a Wrappid package repository that contains core functionalities of Wrappid Framework that enables users to use Wrappid's core features and components.

    JavaScript 15 7

  3. native-web native-web Public

    This repository is combined packages of all the Styled Components for react web project.

    JavaScript 14 4

  4. .github .github Public

    Special repository to showcase the organization's public profile

    14

  5. guide-module guide-module Public

    This module is for a comprehensive documentation of framework for Wrappid developers. Covers key aspects of application development- components, styles, layouts. Provides clear explanations, offeri…

    JavaScript 14 6

  6. native-mobile native-mobile Public

    This repository is combined packages of all the Styled Components for react-native hybrid mobile project.

    JavaScript 13 4

Repositories

Showing 10 of 31 repositories
  • app-builder-module Public

    A wrappid module to let you create full fledge application with your finger tips.

    wrappid/app-builder-module’s past year of commit activity
    JavaScript 11 MIT 0 6 0 Updated Dec 21, 2024
  • auth-module Public

    Wrappid Auth is a comprehensive authentication module designed for Wrappid applications. It provides a flexible and secure solution for managing user accounts and sessions within a wrappid application.

    wrappid/auth-module’s past year of commit activity
    TypeScript 12 MIT 4 18 1 Updated Dec 19, 2024
  • user-management-module Public

    Wrappid User Management is a comprehensive module designed to manage user accounts within Wrappid applications. It offers a flexible and secure way to create, update, and delete user accounts, as well as manage user roles, permissions, and authentication.

    wrappid/user-management-module’s past year of commit activity
    TypeScript 12 MIT 0 2 0 Updated Dec 19, 2024
  • core Public

    This is a Wrappid package repository that contains core functionalities of Wrappid Framework that enables users to use Wrappid's core features and components.

    wrappid/core’s past year of commit activity
    JavaScript 15 MIT 7 49 7 Updated Dec 13, 2024
  • native-web Public

    This repository is combined packages of all the Styled Components for react web project.

    wrappid/native-web’s past year of commit activity
    JavaScript 14 MIT 4 12 1 Updated Dec 13, 2024
  • service-core Public

    This package is a part of wrappid framework for wrappid-service projects. This package is made to be used by wrappid/wrappid-service projects initialised by wrappid/toolkit.

    wrappid/service-core’s past year of commit activity
    TypeScript 8 MIT 0 11 (2 issues need help) 0 Updated Dec 10, 2024
  • profile-module Public template

    Wrappid Profile Module helps users handle their profiles in Wrappid application. It offers a flexible and secure way to store and manage user information.

    wrappid/profile-module’s past year of commit activity
    JavaScript 7 MIT 1 8 0 Updated Dec 9, 2024
  • settings-module Public template

    This module features flexible configuration management system for Wrappid applications. Easily handle app settings and user preferences with hierarchical configurations, multiple storage options, and secure data management. Streamline your app's customization process and enhance user experience with this scalable, developer-friendly module.

    wrappid/settings-module’s past year of commit activity
    JavaScript 9 MIT 0 5 0 Updated Dec 9, 2024
  • support-module Public

    Wrappid Support is a comprehensive support module designed for Wrappid applications. It provides a flexible and efficient way to manage various support functions within Wrappid applications, including error reporting, new feature request, and other essential utilities.

    wrappid/support-module’s past year of commit activity
    JavaScript 10 MIT 0 2 (1 issue needs help) 0 Updated Dec 9, 2024
  • guide-module Public

    This module is for a comprehensive documentation of framework for Wrappid developers. Covers key aspects of application development- components, styles, layouts. Provides clear explanations, offering code snippets with visualizations to streamline development and ensure consistent implementation.

    wrappid/guide-module’s past year of commit activity
    JavaScript 14 MIT 6 76 (4 issues need help) 0 Updated Dec 9, 2024
View all repositories

Top languages

Loading…

Most used topics

Loading…