4

I've built a site in React and would want to use the build files inside of the iOS WKWebView.

Follow-up

In order to run a React build folder it must be served so currently the only way to achieve this is to build a server inside the iOS app, serve the React build files, and load the local url in the WKWebView.

The best option I've found for the server is https://criollo.io/#getting-started.

Why is the best?

  • Work for both Objective-C and Swift codebases
  • Easy to use documentation
  • Strong support from the developer
alanionita
  • 1,272
  • 1
  • 16
  • 34
  • 2
    A React app needs to be hosted on a server, so you can either implement a web server in your app or host the React app elsewhere and state that URL in your WebView. And WebViews do support localStorage. –  Jul 06 '18 at 11:38
  • I was hoping to include the build files in the Native codebase so it can run offline. So far I'm stumbled across a few iOS based servers, but nothing about simply loading a build inside WKWebView. – alanionita Nov 28 '18 at 13:45
  • 1
    If you haven't seen that one yet, try https://github.com/robbiehanson/CocoaHTTPServer –  Nov 28 '18 at 18:17
  • 1
    I'm doing reactjs + cordova and am running into issues with file:// and this plugin helped me https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix – Jacksonkr May 10 '20 at 01:08

2 Answers2

6

You don't necessarily need to build react app and then load those files locally. It works but the better way is to start your local server i.e. yarn start and then specify your url (normally http://localhost:3000/, might differ according to your setup) to load in the WKWebView like this,

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        let configuration = WKWebViewConfiguration()
        // (optional) your configuration 
        webView = WKWebView(frame: .zero, configuration:configuration)
        view = webView

        let url = URL(string: "http://localhost:3000")!
        let request = URLRequest(url: url)
        webView.load(request)
    }

Since your server loads files via http, App Transport Security of iOS will block it. It only allows files to be loaded via https protocol. In order to allow ATS to load via http you need to add exception for localhost or 127.0.0.1 or whichever local ipaddr your server is running on. To do that, open info.plist as source code and paste following,

<key>NSAppTransportSecurity</key>  
<dict>  
    <key>NSExceptionDomains</key>  
    <dict>  
        <key>127.0.0.1</key>  
        <dict>  
            <key>NSExceptionAllowsInsecureHTTPLoads</key>  
            <true/>  
        </dict>  
        <key>localhost</key>  
        <dict>  
            <key>NSExceptionAllowsInsecureHTTPLoads</key>  
            <true/>  
        </dict>  
    </dict>  
</dict>

Now you should be able to access your React app in WKWebView.

Pranit Harekar
  • 61
  • 1
  • 4
  • If you use webpack-dev-server via your `npm start` command, or via create react app, it is not recommended to use it in production (adds live reloading and other development tools). Your react codebase also isn't built in production mode which affects performance. Your best bet is to build your code and serve it (externally or via a static server embeded in the app) – LoicUV Jun 10 '20 at 13:12
2

You can run a local React app without a server. Just use function WkWebView.loadFileURL(url, allowingReadAccessTo: url) . You can check the detailed steps to add your React app files to your xcode project in this answer.

Remember to configure your React app to use relative paths by setting "homepage": "./" in your package.json.

noe
  • 1,684
  • 1
  • 17
  • 35
  • Amazing! Can't wait to try this. Is this a WkWebView update? @ncasas – alanionita Aug 04 '20 at 21:38
  • It seems `loadFileURL` has been there [since iOS 9.0](https://developer.apple.com/documentation/webkit/wkwebview/1414973-loadfileurl), not sure about the `allowingReadAccessTo` argument, which is key here – noe Aug 04 '20 at 22:44