Skip to content
This repository has been archived by the owner on Apr 30, 2024. It is now read-only.

tinyspeck/georgi-circleci-js-helloworld

 
 

Repository files navigation

Sample Javascript App - Vue.JS Front-End

CircleCI Build Status Software License

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.

Preview Gif of Continuous Food Delivery app

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 v16+

Run Local Dev Server

  1. Install packages
yarn install
  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. Update VUE_APP_API_URL located in .env to desired API service route.

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

yarn start

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

License

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

Releases

No releases published

Packages

No packages published

Languages

  • Vue 36.4%
  • CSS 28.5%
  • TypeScript 16.9%
  • JavaScript 15.3%
  • HTML 2.5%
  • Shell 0.4%