Quasar Todo OpenAPI (quasar-todo-openapi)

A Cloud-Native, Contract-First Application Using Design Thinking

Overview

During this workshop, we will be building a relatively simple Todo List application, but we will be doing it perhaps differently than you might be used to. We're going to start from a validated user experience (e.g. A Figma Prototype), implement a mock user interface using Contract-First API tooling (e.g. OpenAPI & Prism), and only AFTER we are sure that our stakeholders are satisfied with our UX do we implement the API server.

The workshop is aimed at using Quasar Framework with VueJS, but the concepts work equally well with any UI toolkit or framework. You are welcome to try with Svelte, React, or Angular as well if they are more familiar to you.

You are welcome to use whichever IDE or editor you are comfortable with during the workshop. I have included "hints" in this repository to install helpful plugins for VSCode and you may also see the presenter use WebStorm or OpenShift DevSpaces

Our Validated Design

You can view our "prototype" in Figma HERE or as a PDF HERE

Required Tools & Dependencies

1. NodeJS >= 16
2. Yarn
3. Java >= 8 (11 preferred)
4. The ability to run services on ports 8080 and 7080 locally

If you cannot install software or do not have many resources on your device you can use the Dev Sandbox option below

Use The Red Hat Developer Sandbox And DevSpaces (OPTIONAL)

Red Hat provides a small OpenShiftⓇ Kubernetes environment for free to developers. In this Developer Sandbox you will have access to a cloud-based developement environment which can be automatically provisioned and used for this workshop.

Create a Red Hat Developers Account (if you do not have one)

1. Navigate to Red Hat Developers
2. Click on the Log in button in the top-right
3. Register for a new account

Request A Developer Sandbox

1. Navigate to the Developer Sandbox Landing Page
2. Click on the "Launch your Developer Sandbox for Red Hat OpenShift" button and follow the prompts

Create Your OpenShift DevSpace

1. Log in to your newly provisioned Developer Sandbox using the link you got via e-mail
2. Open "CodeReady Workspaces" by clicking on the 3x3 grid of squares in the top right
3. Click "Create Workspace"
4. Click "Custom Workspace" tab
5. Paste this URL for our DevFile and click "Load Devfile"
   • https://raw.githubusercontent.com/redhat-appdev-practice/quasar-todo-openapi/main/devfile.yaml
6. Scroll to the bottom of the page and click "Create & Open"
7. After a short time provisioning, the cloud-based development environment will open with our starting code loaded.
   • You may notice that the user interface is very much like Visual Studio Code or Atom editors
8. Click "Yes, I trust" when prompted if you trust the authors of the code being loaded
9. You should now see the project loaded in your DevSpace

Install the dependencies

yarn

Start the app in development mode (hot-code reloading, error reporting, etc.)

yarn watch

Build the app for production

yarn build

Configure NPM Proxy Cache

Because everyone at the conference is using the same public IP, there is a chance that we will hit the NPM rate-limit. If this happens, I have brought a computer which is running Sonatype Nexus to act as an NPM Proxy/Cache

From your command-line, run the following commands:

npm config set registry http://172.18.12.1:8081/repository/npmjs/
npm config set always-auth true
npm login --registry=http://172.18.12.1:8081/repository/npmjs/
# Username: devoxx
# Password: devoxx
# Email: (this IS public) anything@anydomain.com
yarn config set registry http://172.18.12.1:8081/repository/npmjs/

Customize the configuration

See Configuring quasar.config.js.