This is a clone of Pa11y Dashboard, but has been refactored with a cleaner code structure and uses Gulp and Webpack.
To get started with the dashboard, you simply need to:
- Clone this repo
- Install the dependencies with
yarn - In your terminal, navigate to the repo and run
gulp devto build and watch the assets - Open another tab in your terminal, navigate to the repo and run
npm run devto run the dashboard in development mode. - Navigate to
localhost:4000to see the dashboard.
In development mode you are able to add/delete URLs to the dashboard and manually run tasks against them.
In production mode you are unable to add/delete URLs and run any tasks.
The idea behind this is that when you push your dashboard up to production, it will run in production mode to prevent random visitors from messing up the dashboard by deleting URLs you have added etc.
The configurations for the dashboard are the same as in the Pa11y docs. Look at the development JSON file in the repo for example usage.
- port - The port to run the application on
- noindex - When true, the dashboard will not be indexed by search engines
- readonly - When true, users will not be able to add, delete or run URLs
- siteMessage - Display a message on the dashboard homepage
- database - The path to your MongoDB database.
- host - The host to run the application on. This is normally best left as
0.0.0.0– which means the application will run on any incoming connections - port - The port to run the webservice application on
- cron - A crontab which describes when to generate reports for each task in the application
The config for development mode is located in _config/development.json and is yours to edit how you see fit.
The configuration for production mode should be set up using environment variables on Heroku.
List of environment variables to use:
NOINDEXREADONLYWEBSERVICE_DBWEBSERVICE_HOSTWEBSERVICE_PORTWEBSERVICE_CRON
In order for the dashboard to work it has to connect to a MongoDB database where your URLs and tasks will be stored.
The setup for linking MongoDB to the dashboard is pretty straight forward. Rather than having to install MongoDB locally, There will be a MongoDB set up for each team using mLab, a cloud database service.
Once the MongoDB has been setup, all you need to do is point the dashboard to your MongoDB database. In development mode this can be done by changing the database path in _config/development.json. in production mode this can be set in using an environment variable on Heroku called WEBSERVICE_DB.
The path to your MongoDB database should look something like mongodb://<dbuser>:<dbpassword>@ds125388.mlab.com:25388/<dbname>.
To automatically generate reports for each URL on your dashboard, you can set a crontab in your configuration to create a schedule of when the reports should be generated. You can use crontab.guru to help you create your crontab. The format of a crontab should look similar to * * * * *.