Objectives:

Learn how to deploy a full working APP on top of SOAJS (Pet Store)
Learn how to build UI Modules and deploy them in the Operate pillar of SOAJS SOAJS Console
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

Start by installing and deploying SOAJS as a local Cloud; 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.

Deployment Information

In the installer and in the final step titled "Deployment Information", you need to set the following information in Git Account to add the UI Modules successfully :

Provide : Github
Git Domain : github.com
Git Owner : SOAJS-Demos
Git Repository : soajs.petstore.ui
Git Branch : master
Git Path : /uiModules

2- Install Demo

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).

OSX Users

Make sure you have Xcode (or at least Xcode cli) installed to be able to use the "git" command from the terminal!

Fetch SOAJS demo repos

# 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.services
> npm install
> cd ../soajs.petstore.ui
> npm install
> cd ../soajs.petstore.config
> npm install


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

Import script help

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

From here on, we will use the SOAJS Dashboard UI to resume all the work. Log in to the SOAJS Dashboard to proceed.

3 - Deploy Demo

3.1 Activate Demo Repo

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

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

Since the 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.

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 .

Step 1: Deploy Environment

Go to Deploy pillar → Registries → Add New Environment

Select DEV from the drop down menu in the top left corner.

Click on High Availability → Cloud in the left-hand side menu and press Deploy Environment.

Fill in the deploy environment form like the following pictures.

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:

Point the Dev Domain IP in your hosts file as well as the widget Domain IP for later use

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

4.1 Test the services

Swagger Simulator : rich UI simulator that provides REST API documentation and the ability to interact with them.
SOAJS Dashboard UI is equipped with Swagger Engine and Simulator by default.

Go to the dashboard → Develop → Services:
Click on Swagger logo that appears if the microservice is created using Swagger Editor and a new tab will open
Choose your environment where you deployed your microservice
Use the simulator to make API calls to your microservice

4.2 Explore the widget

Go to your browser, write 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.

4.3 Manage the pet store

Go to the dashboard, Operate pillar, where you will find two UI Modules : Pet Store 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 the store.

4.3.2 Order Management

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

5 - Conclusion

To sum things up, this demo is an excellent example on how to deploy a full project 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!!

Full Demo