Merge pull request #13 from MasterKale/feature/support-cra-homepage

feature/support-cra-homepage

README.md

@@ -11,6 +11,7 @@
   - [3. asset-manifest.json](#3-asset-manifestjson)
 - [Development](#development)
 - [Production](#production)
+  - [Supporting CRA's relative paths](#supporting-cras-relative-paths)
 - [React in Django templates](#react-in-django-templates)
   - [Specifying React Components via template context](#specifying-react-components-via-template-context)
   - [Referencing React static files](#referencing-react-static-files)
@@ -239,7 +240,33 @@ Similar to the `bundle_js` template variable mentioned earlier, **django-cra-hel
   > NOTE: These JavaScript and CSS files should be arranged in an order required for the site to load; the ultimate order is derived from the order present in **asset-manifest.json**.
 </details>
 
+### Supporting CRA's relative paths
 
+CRA allows developers to specify a [relative sub-folder for their site to be hosted from](https://create-react-app.dev/docs/deployment/#building-for-relative-paths) via the `"homepage"` property in **package.json**:
+
+```json
+{
+  "name": "cra-app",
+  "version": "0.1.0",
+  "homepage": "/frontend",
+  ...
+}
+```
+
+When this value is set, `npm run build` will output assets and an **asset-manifest.json** with paths prepended with the path prefix:
+
+```
+Before: /static/js/main.319f1c51.chunk.js
+After:  /frontend/static/js/main.319f1c51.chunk.js
+```
+
+**To make sure the React imports/assets/etc... can be found even when hosted through Django, you'll also need to update `STATIC_URL` in Django's settings.py to include the path prefix:**
+
+```py
+STATIC_URL = '/frontend/static/'
+```
+
+Once these changes are made then the React app should be able to find everything it needs to function.
 
 ## React in Django templates
 

cra_helper/asset_manifest.py

@@ -84,8 +84,8 @@ def generate_manifest(cra_url: str, app_dir: str) -> dict:
             manifest_items = data.get('files').items()
 
         # Prepare a regex that'll help us detect and remove the leading "/static/" from manifest
-        # filepaths
-        static_base_path = re.compile(r'^/static/', re.IGNORECASE)
+        # filepaths. Support relative path prefixes that might also prefix "/static/".
+        static_base_path = re.compile(r'^(?:/[\w.-]+)?/static/', re.IGNORECASE)
         for file_key, path in manifest_items:
             # Don't include index.html, serviceWorker.js, etc...
             if static_base_path.match(path):
@@ -106,9 +106,13 @@ def generate_manifest(cra_url: str, app_dir: str) -> dict:
             # Map manifest files by their path
             mapped_manifest_items = {}
             for file_key, path in manifest_items:
-                # Paths in "entrypoints" don't start with a leading "/" so we have to trim it off
-                # with the `[1:]`
-                mapped_manifest_items[path[1:]] = clean_file_key(file_key)
+                # Paths in "entrypoints" in asset-manifest.json don't include the relative path
+                # that might be set to "homepage" in package.json. Convert the asset file paths in
+                # "files" in asset-manifest.json from `/frontend/static/...` to `static/...` so
+                # that our truncated manifest file paths generated above can be matched to
+                # the "entrypoints" paths
+                normalized_path = re.sub(static_base_path, 'static/', path)
+                mapped_manifest_items[normalized_path] = clean_file_key(file_key)
 
             for path in entrypoints:
                 rel_static_path = manifest[mapped_manifest_items[path]]

setup.py

@@ -27,7 +27,7 @@
     keywords='django react create-react-app integrate',
     packages=find_packages(exclude=['contrib', 'docs', 'tests']),
     install_requires=[
-        'bleach>=3.1.1',
+        'bleach>=3.1.4',
         'django-proxy>=1.2.1',
     ],
 )