Repository containing the CC Search frontend application. This web app contains all the UI which communicates with the CC Search API to get the data that is rendered in the browser.
CC Search is an interface to search for content that is licensed under Creative Commons licenses or in the public domain.
The frontend app is built using Vue.JS, Babel and Webpack.
Run the following commands in order to have the code up and running on your machine:
# installs dependencies
$ npm install
# Builds and serves assets with hot-reload
$ npm run devAlternatively, you can use Docker to build and run the application. You just have to run:
$ docker-compose upYou should now have the application running and accessible at http://localhost:8443.
You don't need to have the CC Search API running locally to be able to run the frontend application. It's configured to communicate, by default, with the API that's already publicly available. If you wish, you can change the URL of the API that's used during development at https://github.com/creativecommons/cccatalog-frontend/blob/develop/config/.env#L5
You can run the tests by executing:
npm run testIf you want to make your local development server accessible to the internet (for testing or showing someone something you're working on), you can use ngrok. Follow the documentation on the ngrok site to install it and set it up. Once you have it installed, get the development server for CC Search running and in a separate window/tab, run:
# The extra parameters are required to ensure that ngrok redirects to the HTTPS version of the site
# and that the host header matches one that is accepted by the server
# (ngrok's default hostname is randomly generated and is not whitelisted).
ngrok http http://localhost:8443 -host-header="localhost:8443"
If you need to run a HTTP version (for example, if you're testing against third-party websites that do not accept the self-signed cerificate generated by the dev server), run the dev server using npm run dev and use the following command to start ngrok:
ngrok http 8443 -host-header="localhost:8443"
Code is linted with eslint and formatted with prettier. Linting and formatting will automatically run on precommit. You will need to fix any linting issues before comitting. We reccommend formatting your JavaScript files on save in your text editor. You can learn how to do this in Visual Studio Code here.
CC Search uses CalVer for version numbering, in the YYYY.M.Micro format. This format is intentionally compatiable with NPM's semver parser. Micro is bumped whenever there are multiple releases in a month, for example 2020.07.1 is the first release in July 2020, while 2020.07.2 is the second.
Details about how to deploy the frontend code can be found on the CC Wiki (Accessible to CC Staff only).