What Is Path to / Location of Files Bundled with assetBundlePatterns in SDK v25?

[reggie3]

I’m using SDK version 25 and am bundling the contents of a directory using the foolowing key in my app.json file

    "assetBundlePatterns": [
      "dist/**"
    ]

I’m then trying to require one of the files in a WebView component using the following:
source={require('./dist/reactQuillEditor-index.html') }
Of course, this works during local development since the path points to file location on my local machine. However, it does not work when the app is published.

I’m assuming that since V25 allows asset bundling, fetching and caching assets isn’t required for those assets. Is that a correct assumption?

Bottom line: what is the correct path to get to assets bundled using the technique added in V24 and expanded in V25? Are those assets required to be included via an import or require statement, or can I access them via a uri type of address?

[jesse]

Hi @reggie3. So it doesn’t work at all when published or doesn’t work when published and offline?

If you haven’t already, can you try adding

    "packagerOpts": {
      "assetExts": ["html"]
    },

to your app.json?

[reggie3]

It doesn’t work at all when published. I’ll try inserting the code that you posted. I’m assuming it goes in the app.json file, is that correct? What is it supposed to do?

[shpadoinkle]

I’ll bump this to stop it automatically closing like all the other threads relating to this bundle issue.

i have an almost similar issue and have posted it in this thread

Bundle your assets inside your standalone binary - not working

Having issues getting this to work properly. i have tried all combinations of paths in the app.json right now i have a test folder within my assets folder with only three small jpgs inside. i have tried: "assetBundlePatterns": [ "./assets/test/**" ] as well as “./assets/test/" "assets/test/” “assets/test/**” but when i run exp build:android and check the contents of the apk once downloaded… there are no images to be found. i have even tried direct path’s to the jpegs themselves with …

basically have tried all sorts of path’s and spent the entire day running exp build:android and none of them have bundled up the images.

[shpadoinkle]

would also like to know what “packagerOpts” is supposed to do. can’t find any descriptions in the documentation other that the name

[shpadoinkle]

@jesse

just trying to get my head around packagerOpts… does packerOpts require a list of all the file extensions we want to be picked up by the asset bundler before it will even attempt to bundle said assets?

[shpadoinkle]

@reggie3,

Hi reggie, are you still having problems with this?

Someone commented on my thread about this and mentioned the version number of the expo cli.
I was using version 46 and updated it to the latest (version 49) and it seems to be working (only tested with one image so far, doing a larger test now).

check your cli with

exp -V

was a pity i couldn’t find any mention of cli version dependency for image bundling, i lost an entire day trying to sort this out.

[reggie3]

@shpadoinkle,
I haven’t had the chance to test the packagerOpts suggestion @jesse posted. I hope to get around to it this week. I’m glad somebody figured out the expo cli versioning issue. I’ll have to give that a shot.

[reggie3]

@shpadoinkle,
Can you include more detail on you you go this to work. For example, it seems like you’re including file from a ./assets/test/ directory, did you need to use one or two asterisks to make it include the files you needed? Also, how did you reference the files you included, did you use require, import, or something else? Finally, what “path” did you have to use to reach the file that you were able to get to work?

[shpadoinkle]

@reggie3 ah yes sorry, so in the end i used “./assets/**”

i wasnt too sure which one to use either but a quick google said that a single asterix will only grab files on that first level and will ignore folders and their content. So two asterisks will grab everything within every folder as well within the assets folder.

just a note, that not everything in the assets folder will get bundled, the way it grabs things seems to be handled by expo, so just dumping files into the asset folder doesnt mean it will be bundled, it checks your code first and will only package up assets that are used. ie-- you have set an image somewhere with a require()

As for the path when referencing an asset, just reference your files as you would normally for your image component ie- source={require(./assets/images/image.jpg)}, expo handles it all

[reggie3]

@jesse,
I’ve finally been able to try the project out using the packagerOpts you recommended. Here are my results using a packaged published using exp CLI tool to the following URL: https://exp.host/@reggie3/react-native-webview-quilljs?release-channel=asset-bundling .

1. Without packagerOpts, and no HTML in the body of the HTML file to be shown by the WebView.
   Result: nothing displayed in the WebView

2. Added the text “html” in the body of the HTML to be displayed.
   Result: An “AccessDenied” error
   

   

3. Added the recommended packagerOpts
   Results: the “html” text contained in the HTML file to be displayed by the WebView is shown. At least this proves the HTML file is being bundled in the published app. However, the JS files that the HTML relies on aren’t being included
   

   

4. “required” the JS files needed by the HTML file that the WebView displays
   Result:
   

   

5. added “js” to the “assetsExts” key of packagerOpts:
   Result:
   

   

Bottom line: the packagerOpts you suggested resulted in the HTML file being included, and the ability to display that file. However, I’m still trying to get the JS files bundled so that the HTML file can access them. Just like @shpadoinkle Expo seems to only package the files that the project used, and the JS files are only referenced in the HTML used by the WebView, so I don’t think Expo knows to bundle them.

[jesse]

Thank for you all the details here! I think this is an issue in Metro and Expo is just inheriting this issue. Maybe for now you could require all the js files you’re using so that Metro knows to bundle them? I think unfortunately that fixing this issue in a nice way will require digging into the Metro source code and changing how it handles assets.

[reggie3]

I tried to require all the needed files in step 4 which resulted in an error. I’m going to give this path a rest for now, and try something different. I’m going to use webpack to inline the css and js in the HTML page, and see what happens. It works in non-developer mode via the Expo XDE. Now I just need to get it to work when published.

[ide]

Inlining the files sound like a good idea. I suspect that will be simplest to work with for reasons similar to why statically linked binaries are easy to deploy. You’ll have just one file to think about instead of many.

[coconuttheslayer]

Hello, I’m having the same issue here, did someone actually managed to get it working?

[reggie3]

Unfortunately, I wasn’t able to find a way to get the the HTML file locally. Based on the conversations here, that is because the JS files required by the HTML page don’t get bundled with the package. It appears that the Metro bundler is the culprit.

Additionally, React Native WebViews are not currently capable of running JS that is inlined on the HTML page, so the 2nd method I mentioned above doesn’t work either.

I was only able to get close to what I wanted by downloading my HTML files and their required JS files from a location on the Internet. The method that I used is described in this article: Using Expo, Gulp, and Webpack to Create and Publish React Components to NPM | by Reginald Johnson | Exposition

[marclestertang]

Hi, this is very unfortunate. I also would like to load an html locally since, it only does on IOS expo ran locally but when I expose the app or build it it doesn’t work. Maybe the only work around we have is to host the file.