Objectives: 

1. Learn how to deploy a full working APP on top of SOAJS (Pet Store)

2. Learn how to build UI Modules and deploy them in the Operate /wiki/spaces/BL/pages/61906563 pillar of SOAJS DSBRD

3. Learn how to deploy a custom UI Frontend Interface for your APP with SOAJS
   - Deploy and use oAuth to login
   - Deploy and use URAC for member management and 3rd party integration (Facebook, Google+, Twitter)

Scenario:

1. Install SOAJS
2. Install the Portal
3. Install Demo
4. Deploy Demo
5. Use the Demo

1- Install SOAJS

Anchor
Install Install

Start by installing and deploying SOAJS as a local Cloudcloud deployment; Click Here and you will be redirected to the SOAJS Installer Space where you can find the installation instructions.

For this demo, we will be using Local Cloud Deployment on top of Docker. 

 and we will provide our custom UI modules for the pet store when deploying the portal.

2- Install the Portal 

Anchor
installPortal installPortal

Login to the Dashboard using the credentials.

Press on Deploy Portal marked in blue on the top right dashboard and fill the wizard steps as following:

3- Install Demo

Anchor
InstallDemo InstallDemo

Clone Once you finished the installation of the Portal, clone the full demo repositories from Github. You have 3 repositories to clone, one that contains the services code, one that contains the UI Modules and Widget code and one that contains a script that will bootstrap some database configuration for this demo ( explained here).configuration repository to import some sample data before you proceed. 

# Create a directory to clone the repo
> mkdir -p /opt/soajs/node_modules


# Go to directory
> cd /opt/soajs/node_modules


# Clone services repo from Github
> git clone git@github.com:SOAJS-Demos/soajs.petstore.services


# Clone UI Modules & Widget repo from Github
> git clone git@github.com:SOAJS-Demos/soajs.petstore.ui


# Clone configuration repo from Github
> git clone git@github.com:SOAJS-Demos/soajs.petstore.config


# install dependencies for each repository
> cd soajs.petstore.servicesconfig
> npm install
>
cd ../soajs.petstore.ui
> npm install
# Import the configuration
> cd ../soajs.petstore.config
> npm install


# Import the configuration
> cd soajs.petstore.config/import/
> node ./import/

# node . -h <mongo service host> -p <mongo port>
> node . -h dashboard-soajsdata -p 32017

# Open the import script help manual
> cd soajs.petstore.config/import/
> node . --help

3 - Deploy Demo

Anchor
Deploy Deploy

3.1 Activate Demo Repo

Head over to the Develop pillar → Git Accounts Repositories to active the demo microservice.

In the Git Accounts Repositories, we find the default SOAJS account activated and it contains a list of repositories we can turn on and off.

Since the The Pet Store demo is in a new organization, click on add account button and create a new organization with the following inputs :

• Account Provider : Github
• Account Domain : github.com
• Account Type : Organization - Public
• Account Label : SOAJS Demos
• Username :  SOAJS-Demos

Activate the soajs.pestore.ui repository, you will be asked to select a branch; pick master.

Image Removed

another organization (SOAJS Demos); this means we need to create an account for it and activate it.

The list contains multiple repositories but for the Pet Store Demo we need to activate only 2:

3.2 Deploy Environment and Microservice

Our import script already imported the configuration we need to get things going.

Let's deploy the DEV environment , nginx using dev nginx recipe, petstore service, orders service, urac and oauth which will contain:

Step 1: Deploy Environment

Step 2: Deploy Service

Click on Deploy New Service and fill the form:

You should deploy the following services on the latest version in case of many : urac, oauth, petstore and orders

Once the environment is deployed, update your hosts file and add the below entry:

127.0.0.1    dev-api.mydomain.com
127.0.0.1    petstore.soajs.org
127.0.0.1    petstore-api.soajs.org

4- Use the Demo

Anchor
Explore Explore

4.2 Explore the widget

Go to In your browser , write open http://petstore.soajs.org:81 and you will access the widget to start finding your best pet to buy!!

You should access the homepage to see the available pets, create an account, login and start shopping.

Image Removed

 and the pet store frontend UI interface will open; Enjoy the Shopping 

4.3 Manage the pet store

Go to the dashboard Portal, Operate pillar pillar, where you will find two extra UI Modules : Pet Store and  and Order Management.

4.3.1 Pet Store

In the Pet Store module, you will be able to list, add, edit and delete pets in manage your pets inventory for the store.

4.3.2 Order Management

In the Order Management module, you will be able to list all checked out orders and confirm fulfill or reject an orderthem.

Image Removed

Image Added

Image Removed

Image Added

5 - Conclusion

To sum things up, this demo is an excellent example on how to deploy a full project APP on top of SOAJS. We will go threw creating services, UI modules and a widget. 

In addition, you will get more familiar in deploying services in DEV environment.

Finally, you will get to know more about SOAJS power when it comes of using ready made services, new services, security, permissions and much more!!

We showed you how to create environments and deploy microservices in them using catalog recipes and while doing that, we introduced couple of ready made services by SOAJS: Controller - oAuth - URAC.

Ready made services do not require any development effort, simply deploy and use them.

In addition to microservices, we showed you how to deploy and operate on two types of UI components: UI Modules & Frontend UI Interfaces.

Dive in deeper and learn more about how the full demo is constructed in the sub pages where we tackle every section by itself and explain it in depth.