# DKAN JS Frontend Module

This is an integration module that provides a way to access a decoupled JavaScript frontend at defined paths.

## Defining Paths
The paths used are defined by the `dkan_js_frontend.config` yml. In the routes array add any path you want this module to use with a string structured like `unique_path_name,/the_path`. The first part is used by Drupal to store paths and the second is the actual path the JS frontend will show at.

### Sitemap Generation - the [Simple XML sitemap module](https://www.drupal.org/project/simple_sitemap)
If the Drupal [Simple XML sitemap module](https://www.drupal.org/project/simple_sitemap) is installed, the DKAN JS Frontend module will automatically add static routes and dataset routes listed in the `dkan_js_frontend.config` yml to the default sitemap.

## JS/CSS
The module assumes a JavaScript app exits in a `/frontend` directory in the docroot of your site code base. This can be changed by updating the `dkan_js_frontend.config` keys of `css_folder` and `js_folder` with the new directory paths.

The code will glob all files in the folders specified and attach them to any route/path that has been defined.

## [Data Catalog App](https://github.com/GetDKAN/data-catalog-app#readme)

This is a React app that will use the [Data Catalog Components](https://github.com/GetDKAN/data-catalog-components) library to build the frontend. It will serve as a starting point for your own customizations. If you are **not** using the included [DDEV commands](https://dkan.readthedocs.io/en/latest/developer-guide/dev_local_setup.html#additional-dkan-ddev-commands), follow the instructions on the [README file](https://github.com/GetDKAN/data-catalog-app/blob/master/README.md) for manual installation.

## Tips
If you are setting the JS frontend as the main frontend for your site, like on the demo DKAN site, you will want to do the following:

* Set the `404` and `home` paths for the site to `/home`. This will make it so whenever Drupal returns a page not found it will load the JS frontend and visiting the root url the JS site will be loaded instead of a default Drupal node.

## Attributes
Learn more about setting attributes here: https://www.drupal.org/docs/develop/creating-modules/adding-assets-css-js-to-a-drupal-module-via-librariesyml#attributes

## Sample Config
```
// The folders for the css and js compiled files.
css_folder: '/frontend/build/static/css/'
js_folder: '/frontend/build/static/js/'
// Routes to load the JS application when visited.
routes:
  - home,/home
  - about,/about
  - api,/api
  - dataset,/dataset/{id}
  - datasetapi,/dataset/{id}/api
  - search,/search
  - publishers,/publishers
// This is applied to both the CSS and JS library.
minified: true
preprocess: true
js:
  // These will overwrite the above global if set.
  minified: true
  preprocess: true
  weight: 0
  attributes:
    - type,module
css:
  // Same as above, will overwrite the global config above.
  minified: true
  preprocess: true
  weight: 0
  attributes:
    - crossorigin,anonymous
```
