css cssinjs frontend javascript node react react-native wrappid wrappid-styles wrappid-template

`Wrappid` App Boilerplate

                                    _     _
    __      ___ __ __ _ _ __  _ __ (_) __| |
    \ \ /\ / / '__/ _` | '_ \| '_ \| |/ _` |
     \ V  V /| | | (_| | |_) | |_) | | (_| |
      \_/\_/ |_|  \__,_| .__/| .__/|_|\__,_|
                       |_|   |_|

This is a template documentation, @wrappid/toolkit uses this template to create frontend boilerplate.

Table of Contents

Wrappid App Boilerplate

1. Introduction

This is a frontend boilerplate template application built using the Wrappid framework, which enables simultaneous development of web and mobile application.
This guide will help us setup and run application using Wrappid framework.

2. Getting Started

This getting started section will help you setup a basic application built using the Wrappid framework. Follow the below steps to get going.

2.1. What are my Pre-requisites? 2.2. How to Create? 2.3. How to Setup? 2.4. How to Start?

2.1. What are my Pre-requisites?

Refer here
install @wrappid/toolkit globally

2.2. How to Create?

It is expected that you have successfully installed @wrappid/toolkit(wrappid framework's CLI tool) and initialised it. Run the below command to create Frontend Wrappid Project

wrappid init app <wrappid>

Output:

2.3. How to Setup?

Frontend Wrappid-App has two runtime-environments:

Web
Mobile

We will talk about these environments in upcomming sections.

Note: If you want to setup a wrappid-app project that is already in your github, you need to clone it. After clonning, run npm i at the root of the project

Run the below command to setup a Frontend Wrappid Project in web and mobile runtime-environments.

cd <wrappid>-<app>
wrappid setup

Run the below command to setup a wrappid-app in web runtime-environment.

cd <wrappid>-<app>
wrappid setup web

Run the below command to setup a wrappid-app in mobile runtime-environment.

cd <wrappid>-<app>
wrappid setup mobile

2.4. How to Start?

You can start a frontend app in two modes:

Static (Without Backend Service)
Dynamic (With Backend Service)
Static (Without Backend Service) Run the below command to start the development frontend server for web:

cd wrappid-app
wrappid start web

This should launch your default browser with a URL http://localhost:3000

Run the below command to start the development server for mobile:

cd wrappid-app
wrappid start mobile

This should launch your emulated device (provided a proper setup is done on the Android Device Manager)

Dynamic (With Backend Service)

To start Dynamic Fontend Wrappid project, you'll first need your Wrappid Backend up and running. steps for backend.

Enter you Backend URL in wrappid.conf.json file located at the root of wrappid-app project.
Follow the same steps for starting a static frontend wrappid-app

3. What are Wrappid App Environments

Wrappid App can be runned in 3 environments:

Dev: Suitable for Development
Stage: Suitable for Testing
Prod: Suitable for Production

By default, Wrappid App project setups and starts in dev environment. These environments are to be configured in wrappid.conf.json located at the root of wrappid-app project

To run a Wrappid App project in a different environment, run the below command:

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

3.1 What are Wrappid App Runtime Environments?

Frontend Wrappid-App has two runtime-environments:

Web
Mobile

4. Where to Code?

./src/components

You'll write your code in components.

Write your code in a function, then export default your function

For example, if name of your file is helloWrappider.js It should have a function that is exported,

export default function helloWrappider(){

}

Then put an import of your code's function in ComponentRegistry.js

import helloWrappider from "./components/helloWrappider" 
export default function ComponentRegistry
{
HelloWrappiders: {comp: helloWrappider}
}

Now we need to see what we wrote in the browser.

Go to the RoutesRegistry,

create an route object in RoutesRegistrys

{
  defaultAppRoute   :   {
      Page      :  {AppComponent: "HelloWrappiders" },
      entityRef :  'defaultAppRoute',
      URL       :  'defaultAppRoute'
    } 
}

Now run the below commad

wrappid copy --src

Then run

 wrappid start [web|mobile] --env=[dev|stage|prod]

Voila! Now after sometime(depending system specs) your browser will open and you'll be able to see your page rendered at localhost:3000

Now let's make another page,

Write your code in src/components directory

For example: secondPage.js

Then put an import of your code's function in ComponentRegistry.js

import secondPage from "./components/secondPage"

Add another object for your new page,

export default function ComponentRegistry

{
HelloWrappiders: {comp: helloWrappider}, 
SecondPage: {comp: secondPage}
}

And again to see what we wrote in the browser, we will put another entry for our new component

Go to the RoutesRegistry,

{
defaultAppRoute:{
Page: {AppComponent: "HelloWrappiders" },
entityRef: 'defaultAppRoute',
URL:'defaultAppRoute'
}, 

secondPageRoute:{
Page: {AppComponent: "SecondPage" },
entityRef: 'uniqueSecondPage',
URL:'secondPage'
} 

}

Run below command in terminal

wrappid copy [web|mobile] --src

You need to start again if you stopped your web sever.

You should be able to see your page at localhost:3000/secondPage

How to Build?

Before building it is recommended to do a fresh setup of your project

```bash
wrappid setup [web|mobile] --env=[dev|stage|prod]

Run the below commands to build your wrappid app for web or mobile

wrappid build [web|android|ios]

Note: For android builds, you need to create build.gradle file with a keystore file in res/android/app IOS builds are not supported yet.

5. What are Registries?

5.1. Application Registry

Used for appilcations

5.2. Components Registry

Used to link components

5.3. Functions Registry

Used for functions

5.4. Menus Registry

Used for generation of menu

5.5. Reducers Registry

Used for Reducers

5.6. Resources Registry

Used for Resources

5.7 Routes Registry

Used to route components

5.8 Validation Registry

Used for validation

6. What are wrappid packages

There are 4 wrappid packages that are used by wrappid-app. 3.1. @wrappid/core
3.2. @wrappid/styles
3.3. @wrappid/native-web
3.4. @wrappid/native-mobile

6.1. Wrappid Core Package

6.2. Wrappid Styles Package

6.3. Wrappid Native-Web Package

6.4. Wrappid Native-Mobile Package

About

A frontend boilerplate template application built for using Wrappid framework, which enables simultaneous development of web and mobile application

https://www.github.com/wrappid