isabella232 / sample-javascript-cfd

Sample Javascript App - Vue.js Front-End

Description

This Sample Vue.js front-end project demonstrates what a typical JavaScript (or node) CI workflow may look on CircleCI.

You can preview the live CI workflow for this application on CircleCI.

In this sample config, we have a single workflow build-and-test which will install and cache our node packages, and run npm run test within a node-based executor. This config makes use of the Node orb, a package for CircleCI's config language, which makes writing our config shorter, and easier.

Getting Started

If you would like to copy the config.yml and adapt it to your project, be sure to read the comments in the config file to ensure it works for your project. For more details, see the CircleCI configuration reference.

About This App

This sample application is a Single Page Application written in Vue.js, a popular front-end JavaScript framework, and utilizes the Ionic Framework which will allow us to deploy our application to mobile devices.

Both Vue.js and Ionic Framework are also users of CircleCI 🎉, and you can view the CI configs they use in their respective repositories

Continuous Food Delivery

When you load up the app, you will be presented with a menu from the Continuous Food Delivery service, and a cart for items you wish to order. Click on items from the menu to have them added to your cart in real-time and the order total will automatically calculate.

API Server

CFD(Continuous Food Delivery) is a sample application which relies on an API server to both fetch menu items, as well as add them to your cart. If you would like to run this project locally, you must supply a valid CFD API service, such as one of the following sample projects for back-end languages:

Language	GitHub	Description
Python	Link	A Python-Flask CFD API server

Run and Test Locally

Requirements

Node v13.11+

Run Local Dev Server

1. Begin first by selecting an appropriate CFD API service from the list above and follow the repo's instructions for launching the API service.

2. Start the local development server with the following command:

ionic serve

Tests

Multiple types of testing are available for this sample application. View the package.json file for all available scripts.

"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"test": "echo \"Error: no test specified. Did you mean 'test:unit' \" && exit 0"
"lint": "vue-cli-service lint",

Additional Resources

• CircleCI Docs - The official CircleCI Documentation website.
• CircleCI Configuration Reference - From CircleCI Docs, the configuration reference page is one of the most useful pages we have.

License

This repository is licensed under the MIT license. The license can be found here.