How to add/compile/link an external CSS in AppDesigner, same with JQuery

We have this project, created category/by folder (css folder, views folder (html), js folder). I use AppDesigner and embed my index.html and run but it doesn't load all the styles and jquery. How can I link/compile it?

Answer 1

[Rushikesh]

Hello John,

I understand you're facing an issue where external CSS and JS scripts linked in your HTML file aren't loading in MATLAB App Designer's HTML component. Let's address this step-by-step:

Root directory

|- views

|- index.html

|- CSS

|- style.css

|- JS

|- script.js

Here are some steps to resolve this issue:

1. According to the MATLAB documentation for the ‘uihtml’ component, referenced files like CSS and JS scripts should be in the same folder or a subfolder of your ‘index.html’ file. Therefore, consider moving your ‘index.html’ file out of the views folder and into the root directory, where the CSS and JS folders are located.

https://www.mathworks.com/help/matlab/ref/uihtml.html

2. Ensure that the paths to your CSS and JS files in ‘index.html’ are relative to the file's location or use full paths. For example:

<script src="./JS/script.js"></script> 

3. The ‘uihtml’ component in MATLAB cannot access third-party JavaScript libraries such as ‘jquery.min.js’ via a Content Delivery Network (CDN). Therefore, you need to download libraries like jquery.min.js and place them in your project directory.

Example: root >> JS folder >> jquery.min.js

Hope this helps.