React-native-code-push: JS files as assets

[samermurad]

I have a special scenario where I need some js files to be serves as local assets for webview that has a bridge implementation and somehow code-push doesn't treat them as such, when running a release without code push it works, but I guess code push overrides the assets once it updates everything right? this is a bit like #977 but not quite.
Is there any way this can be achieved? can I somehow force these js files to be treated as assets?
To clarify more on the matter, I actually need to manually copy these files to the final build dir on both android and ios.
In iOS I have a shell script the runs on each build and a gradle script in android that copies all html/js/css assets to the android_asset dir in order for it to work.

please help

Environment

• react-native-code-push version: 2.0.1-beta
• react-native version: 0.44.2
• Reproduces on release builds only
• tested on release devices only, seems to work normally on android, doesn't work on ios

[max-mironov]

Hey @samermurad, thanks for reaching us and for your question.

Could you please clarify us some points so we could assume that we are on the same page.
You said: can I somehow force these js files to be treated as assets and somehow code-push doesn't treat them as such, when running a release without code push it works.
Do you mean here that when releasing with codepush CLI these files are not included but when you just run react-native bundle ... they are?
Also for #977 as I get it right the problem was that path for some files was changed after applying code-push update (and that is expected!) and it was required to get out the directory where they were located so user can reference them correctly. Will it work for you if you bundle your js files and reference them for your needs later?
Also don't get it well why do you need to treat js files as assets and do not just bundle them normally as other js contents for using them later?

[samermurad]

Hey, @max-mironov thanks for the quick response.
I'm not quite sure if it's the path issue as in #977, it might be, but I'm trying to understand if it is.
In my app I have a screen where I have WebView and bridge implementation between the react-native and the native JavaScript that runs inside the WebView browser.
The WebView loads an html file that uses couple of JS and CSS files, some contain the bridge implementation some contain other functionalities and of course the styling.
Theses files cannot/shouldn't be bundled because they should not be available on the react native level, this is browser based code which will in some scenarios even break react-native if bundled.
The funny thing is, that the HTML files gets loaded correctly, but it just can't find the JS/CSS files.
the assets structure goes as follows:
_ src
__ assets
___ img
___ html
____ myFile.html
____ js
_____ [ALL JS FILES]
____ css
_____ [ALL CSS FILES]

from within the html I reference the file relatively, maybe this has something to do with the issue.

regarding the bundling, as I stated above, I have a script that copies the files to the build dirs of the apps because it doesn't happen with the bundling.

[max-mironov]

@samermurad got it, so if I get it correctly your js/css are not found, probably you could debug the app to see where it is looking for this files? It seems to be an issue with relative path being changed after applying codepush update but would be great to have an app to verify.

[samermurad]

@max-mironov Exactly, when I debug the webview through safari, I see that the paths to the files are in the Application support dir, under CodePush/[CODE_PUSH_VERSION_HASH???]/, but if the app can load the html file it means that it indeed was copied wasn't it? so in this case, what happened to the js/css files? so I guess it's a combination of both problems isn't it? I mean if the js/css files were to be treated as assets, wouldn't they be available in the above mentioned code push folder as well?

[max-mironov]

@samermurad so it looks like that html file was bundled whereas js/css not? Do you use the same approach to load html as here: https://stackoverflow.com/a/35816271?
Also it is still possible to use inline css/js to resolve your issue, sure it is not an elegant solution but probably it could work for you.

[samermurad]

@max-mironov

renderWebView = () => {
        let isIOS = Platform.OS === 'ios';
        return isIOS ? (
            <WebView
                bounces={false}
                style={styles.webView}
                ref={webview => this.webView = webview}
                onMessage={this.invoke.listener}
                source={require('./html/myHtmlFile.html')}
            />
        ):
            (
                <WebView
                    style={styles.webView}
                    ref={webview => this.webView = webview}
                    onMessage={this.invoke.listener}
                    source={{uri:'file:///android_asset/html/myHtmlFile.html'}}
                />
            );
    };

This is my html load, again, the html is loaded successfully, the files aren't.
I have around 10 different files, I have this problem on two different projects, having everything inline would be very messy.
So you are telling me that there is currently nothing that I can do about it?
Can I some how copy the files I need to the code-push dir after the update in runtime? That could also work no? I don't know if I like this approach either, the best option would be to somehow treat these specific files as assets through an extra option in the cli maybe?

[max-mironov]

@samermurad it looks like html is loaded correctly as it has been "required".
It is stated here: https://github.com/facebook/react-native/issues/505#issuecomment-180346039
Also according to this one js/css files will not be bundled. So I'm afraid it is not possible to treat them as assets.

So if you copy this files when codepush update is applied in codepush dir I believe it should work.
Also if their location is unchanged you probably can use absolute path for these files.

[max-mironov]

@samermurad I'd rather to close this if you don't have any further questions, but if you have any - please let us know, we are all ears.

[sujitpk-perennial]

@samermurad can you help me with your solution? I am also facing same issue but only for iOS. Android is working fine.

[samermurad]

@sujitpk-perennial Hi, sorry for the delay, well actually both projects decided to drop code push for the moment, although I don't think they'll ever come back to implement it.
Like I stated in the question, this actually only happens on iOS due to how assets are treated on the platforms, because assets in android apps must be under the assets folder, which is not the case in iOS.
If I would go about solving this, I probably consider one of the following options:

1. The easiest way to do that would without wasting any more time would be to upload the JS/CSS files to a remote repo/server (maybe even a github gist?) and load them from the url so wont have to have them locally (you would still have to manually copy the HTML file on build), the downside of this is that it's a drag for debugging, and if you JS solution is an offline solution, well then you always have a chance that these files wont load in some cases.
2. If having the files on the client side is a must for you, maybe you can download the files on the first app run and save them somewhere in the app's document folder, which wont be overwritten by code-push (you'll probably have a hard time debugging this)
3. Another option would be to write a script (maybe you can even use grunt) the will minify all your JS files and add them in a <script> tag in the HTML file, its probably a hustle, but I'm sure that once you are done with this script, it should be a breeze, you can probably depend the app builds on this script so you wont have to run it manually.
4. it might be possible to have these files bundled on the native level, where they will be out of code-push's reach, using Xcode's folder reference instead of folder group.
5. The last option I would consider (this sounds like a real headache) is to try to move these files to the relevant code-push folder after the code-push update is done, just thinking about this makes my head hurt, the assets are moved to a some codePush folder, I don't remember the exact path, you'll have to debug to figure out, in general, I actually kinda hate all the solutions that involve playing with the file dirs on the app run rather than in compile time.

Let me know if it helped,
I'm actually interested to know how you'll solve it.

Good luck!

[Arshiamidos]

hey guys
found the trick base on Image doesn't show after bundling into the apk.
as you know require('index.html') work on _simulator_ and _emulator_ for both &driod and IOS
but problem will faced when you bundle and you want release your app
for android just follow this enablejavascript and copy you files in assets folder in YOUR_APP/app/src/main/assets and use just picture below.

and for ios just bundle package with
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios
when bundle created you have main.bundle.js and asset folder
just copy you files in .xcworkspace like this image

and set free all refrence in will be and unchanged just like mine.

i hope this tutorial help you from confusing release app in RN

[sujitpk-perennial]

@Arshiamidos are you able to do codePush the changes done in js file which is added in .thml file ?