add loader for create react app

[rykener]

While in development mode, CRA does not output source files. This prevents django from being able to pickup those files while running npm run start. In order to present Django Manifest Loader as a legitimate solution for importing create react app projects into Django, it needs to work for both CRA production builds as well as with the CRA development server.

The package cra-build-watch provides one solution to this problem. However, a bug in the package here prevents this from being the recommended solution for users of Django Manifest Loader.

This script might be worth investigating as an alternate solution.

[devo-wm]

For those looking for a solution without "ejecting" your app from the restraints of create-react-app = there are some packages that can help you modify write the development server files to disk; see blog post here: https://marmelab.com/blog/2021/07/22/cra-webpack-no-eject.html.

We're using craco and made one small change to our devServer configuration in our craco.config.js below:

module.exports = {
...
    devServer: {
        writeToDisk: true,
    },
...

And here's our custom CRAManifestLoader:

import fnmatch
from manifest_loader.loaders import LoaderABC

class CRAManifestLoader(LoaderABC):
    @staticmethod
    def get_single_match(manifest, key):
        return manifest['files'].get(key, key)

    @staticmethod
    def get_multi_match(manifest, pattern):
        matched_files = [file for file in manifest['entrypoints'] if
                         fnmatch.fnmatch(file, pattern)]
        return matched_files

Description of the entrypoints key from react-scripts source:

"entrypoints" key: Array of files which are included in index.html, can be used to reconstruct the HTML if necessary