Insights Hub Cloud Foundry Static App: Resolving Script and Stylesheet Loading Issues
Summary
This article addresses the issue of a Cloud Foundry (CF) static application not finding linked scripts and stylesheets, leading to 404 errors, despite the files being present on the server. The provided solution involves updating the app registration and content security policy (CSP) settings.
Details
Problem Description:
A static file pushed to a CF space works perfectly when tested locally on a web server. However, once registered and opened on Insights Hub, the application shows a 404 Not Found error for scripts and stylesheets, with the exception of index.html.
Investigation:
File Verification: Logged in through SSH to the CF app, it was confirmed that the pushed files exist under app/public.
Issue Identification: Despite the correct file presence and local functionality, the issue lies in the app configuration and content security policy settings on Insights Hub.
Solution:
- Deregister the App:
- Deregister the current application on Insights Hub.
- Update Endpoints:
- Modify the endpoints from "/" to "**".
- Update Content Security Policy (CSP):
- In the configuration tab, update the CSP to ensure the necessary sources are included: for example, the app loads fonts from "fonts.gstatic.com" and some JS from "cdn.jsdelivr.net".
default-src 'self' static.eu1.mindsphere.io cdn.jsdelivr.net fonts.gstatic.com; style-src * 'unsafe-inline'; script-src 'self' 'unsafe-inline' static.eu1.mindsphere.io; img-src * data:;- Re-register the App:
- After making the above changes, re-register the app on Insights Hub.
- Result:
- The application should now successfully find and load all linked static files, scripts, and stylesheets without 404 errors.
Following these steps should resolve the 404 errors for scripts and stylesheets, ensuring the static app functions correctly when deployed on Insights Hub.