Vuetiful Weather JS is a demo app I've built to help me learn about Vue and that will be used to (hopefully!) help people learn about Vue as well!
In this project, I am assuming you already have some basic frontend knowledge and you are familiar with working with javascript. So if terms like import
, linting
, npm
and the such are completely foreign to you, I would recommend you learn with some tutorials and then potentially come back here for it!
I am also assuming you have Nodejs
and also yarn
installed on your device. The way I set this project up should work with npm
as well and if you want to use it, feel free but proceed at your own peril!
Just clone this repo and after that run:
yarn install
If you want to run this project locally, run the following command:
yarn serve
After this, your terminal should let you know what urls to use to access to check the app. The default for local development is http://localhost:8080.
TODO: DO NOT FORGET TO SET API KEY IN CONFIG FILE!
If you want to build this project for a production like situation, run
yarn build
This will build the project to a folder called dist
. All the assets generated from your build will be put here. Depending on what hosting solution you use, you will likely have to point to this folder.
Besides that, there is also a file there called report.html
. For more information about that, please refer to Bundle analysis
In order to run all unit tests, please run:
yarn test:unit
All unit tests are written with Jest and vue-test-utils. Everytime the unit tests are run, a coverage report is done. To learn more about this, please refer to Unit test coverage reports.
To run the e2e tests, run the following command.
yarn test:e2e
The e2e tests are run using Cypress.
For linting, this is the correct command.
yarn lint
Everytime you build the app for production, a folder called dist
is created. Inside that folder, there is a file report.html
. If you open that file with your browser of choice, you will be able to see a detailed report about the bundle size and composition of the just built app.
These reports all use an extremely tool called Webpack bundle analyzer. I would definitely recommend learning more about it, if you haven't yet!
On top od that, if you want to just see the coverage report without have to build the app and open the file manually, you can also run the command.
yarn bundle-analyzer
This will not only build the app, but also generate two reports instead of one: legacy-report.html
and modern-report.html
. This is because the app is built seperately for legacy browsers and for modern browsers. Right after the app is built, your default browser will open two new tabs, one for each version. There you will be able to analyze all the details of your bundles to your hearts content!
When the unit tests are run, Jest will automatically generate a coverage report. This report will be in the folder coverage
. To check out locally what the unit test coverage is locally, you can just open the file index.html
.
This will give you very useful information about what lines of code are and are not covered by unit tests.