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.
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.
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
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.
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 |
Node v16+
- Install packages
yarn install
-
Begin first by selecting an appropriate CFD API service from the list above and follow the repo's instructions for launching the API service.
-
Update
VUE_APP_API_URLlocated in.envto desired API service route. -
Start the local development server with the following command:
yarn start
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",- 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.
This repository is licensed under the MIT license. The license can be found here.