Giter Club home page Giter Club logo

vote-ui's Introduction

vote-ui - Shipped Three-Tier Demo Application

This repository is part of a demonstration three-tier Shipped application (UI, API, and database). It should be deployed together with its companion repository, CiscoCloud/vote-api and the standard Shipped Postgres datapack.

Running the Three-Tier Demo on Your Laptop

  1. Fork the two repositories, CiscoCloud/vote-api and CiscoCloud/vote-ui, into your own GitHub account (or into the account of an organization for which you have admin access).

  2. In a browser (we recommend Chrome), navigate to the Cisco Shipped UI. If necessary, press Sign up with GitHub to login.

  3. If Shipped does not display a Create Your Application popup dialog, select "Create New Application" from the Your Projects dropdown in the upper right of the form.

  4. Enter a suitable name for your application (for example, "demo-three-tier") and press Start Composing.

  5. Shipped displays the Compose Your Application form open to the Develop tab. Click on Add an existing repository, enter "vote-ui" in the New repository name field and press Enter. Shipped adds the vote-ui service to yoru application.

  6. If necessary, click on Add an existing repository again. Then enter "vote-api" in the New repository name field and press Enter. Shipped adds the vote-api service to yoru application.

  7. Click on Datastores. Look for the Postgres datastore and click on its Select button. Shipped adds the Postgres datastore service to your application.

  8. Click Save Project. Shipped builds the project.

  9. In order to bootstrap the project to your laptop, it's necessary for you to install the Shipped CLI. The method for doing do depends on your OS:

    • Linux or Mac. Run command curl https://api.ciscoshipped.io/cli/static/shipped-setup.sh | bash -s
    • Windows. Download and run shipped-install.exe
  10. You will need an user token to identify yourself to the Shipped CLI. To get one, click your name in the upper right corner of the Shipped UI, select My Profile, and then click on the large Show My User Token button. Shipped reveals the token.

  11. Change to the directory where you want Shipped to create local copies of your repos and issue the command:

    shipped local boot applicationName -t userToken

    where applicationName is the name you gave your application in step 4, and userToken is the token copied and pasted from the Shipped UI in step 10.

  12. The local boot command produces considerable output as it builds local repositories for your project's services and deploys them into a local VM, creating one if necessary. It finishes with output similar to:

    ============================================================
    3 services are running and are available at the web addresses below
    ------------  ------------  --------------             ------                 -------------------
    Service Name  Container ID  Container Name             Status                 Service Web Address
    ------------  ------------  --------------             ------                 -------------------
    vote-api      9e5575c84c1f  demothreetier_vote_api_1   Up Less than a second  http://localhost:38893
    vote-ui       d2a55bcd02ae  demothreetier_vote_ui_1    Up 9 seconds           http://localhost:33008
    postgres      eb37d4b7488a  demothreetier_postgres_1   Up 20 seconds          n/a - not exposed
    ============================================================
    
  13. Copy and paste the web address for the vote-ui service (http://localhost:33008 in this case) to the address bar in a browser and press Enter. You should see the demo application as shown at the top of this page. Press the Like Cisco Shipped button and watch the like count go up. Open the application in a different browser to verify that the like count is being updated in the database in the application's PostGres service.

vote-ui's People

Contributors

tooda02 avatar vjscjp avatar npateriya avatar patricli avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.