Embedding an un-hosted React.js app in Flutter app for viewing PDF in mobile.
Combining two such powerful frameworks of different platforms might sound intriguing. In addition to that, we are not using a hosted react app rather we are making use of a react app without the need of hosting it, inside the flutter and bringing it to life on our whim. Hence the title says ‘Embedding’ not ‘Integrating’ React.js app.
You might find handful of blogs explaining the communication between vanilla Javscript side and Flutter. You know vanilla JS can be plain, dull and boring in contrast to powerful Js frameworks like React.js . This article gives you the insights on running those frameworks on flutter by taking it another level i.e by not hosting those framework elsewhere.
A ringing question might be why to go to such extreme situations. Hosting a React.js could be the silver bullet but there are scenarios where you won’t be able to host your React.js app. This article aims to target those real-life scenarios.
When hosted somewhere, your React.js app will be public, which could mean that you may have to add an extra layer of security if your app is sensitive. This addition increases the complexity.
How to do this ?
We start with things on React.js side and then on flutter. You don’t need to have much prior knowledge of React.js application, just a basic knowledge on it will suffice.
React Side
We need to design a React.js app to handle the flutter events only. In the above figure you will see another event i.e touch event. This is added because it’s comprehendible to see core React things in action first, rather than mixing stuffs for flutter. Hence, we start by creating a react app to handle touch event and then we will add another event coming from flutter in the same app.
Step 1 : Create a React.js project
It all starts with creating a React.js app from scratch.
npx create-react-app react_pdf_app
Step 2: Render pdf on touch event
Add a simple pdf rendering library by
yarn add pdf-viewer-reactjs
Step 3: CORS handling
Cross-origin resource sharing (CORS) is a security mechanism to prevent or to control the access to the resources in a server when a request is made out from the allowed domain.
This problem could thwart all you efforts and motivation. Here I will explain what can be done to view pdf using simple JS application. Better JS applications can be created for the workaround, but that will not be in the scope of this article. A simple way is to use Heroku. Concatenate this heroku url to the link of the PDF you are trying to view, and hit it on the browser and heroku might ask you to request access, by clicking that button the you can view pdf outside of the browser.
Hence, in the handleEvent method of we concatenate this heroku link to gain the access. You don’t need to do any of this when you are running a hosted React.js app on browser but heroku is savior for the unhosted applications. What happens is Heroku puts the correct headers and send back to you the data it receives form the given pdf url.
After completing those 3 steps we will get the following react app which is able to render the pdf when clicked on the title. Its is the foundation for all the steps that are yet to come.
Step 4: Build the React.js
Since our objective is to use the React app without hosting or serving, we will build the application and use that build. In order to that, first you need to put
a dot as a value on key “homepage” in package.json file. Following code shows you where to put that key.
Then we are ready to build the application, use the following command to create the production build.
yarn build
Below is the demo of how this react app looks like. Take a look at the address bar, you will not see localhost:3000/ as this is react app is not hosted. After opening the index.html of the build you should expect see as following. Click on the title, it will render the default pdf.
Step 5: Listening to Flutter
As soon as the react app is loaded, we need to listen to the flutter events. Hence registering the listeners on the component did mount method is the best. Here you will see ‘flutterInAppWebViewPlatformReady’ channel, whose callback will be called automatically when this React.js app runs on top of the flutter project.
First, verifying that the flutter platform is ready, we are now ready to communicate with the flutter side. In order to do that, we need to know which handler should the react app contact to. Here, we can call ‘fileDetailsHandler’ as we will register a handler with the same name in the flutter side.
Caveat : not to use function() for events, this may throw error saying something like : ‘this’ is unspecified. Always use fat arrow functions, so that the event call-backs gets bind with the class or the component of the react we are concerned with.
Flutter Side
Now turning the wheels in the flutter side.
Step 1: New flutter project
Start creating a new flutter project from scratch by
flutter create flutter_app
Step 2: Flutter Assets
Copy all the files inside the build folder of our React.js app. Then, inside the assets folder of Flutter project, create a new empty folder under the name “react_app_pdf”. Now, paste all the copied build files inside this folder of assets.
See the image on the left to know where to create and put the files.
Step 3: Loading it in project
Mere pasting it inside the folder won’t work. Going with the process of flutter, in pubspec.yaml we need to link the folders and subfolders of the assets. Permission error might occur when you don’t link the subfolders of the ‘react_app_pdf’ folder. You can see the following code snippet to link or load the files into the Flutter project.
Step 4: Reviving React.js app in Flutter Webview
We will use inappwebview package as we can seamlessly communicate between the flutter application and react application. This package is quite powerful for things related to the web-views in flutter
We then create a screen that will use the InAppWebView widget given by the upper mentioned package and try to load the React.js chunk files and chunk css in the webview. This can be said as reviving the React.js.
Step 5: Communicating with React
InAppWebView allows to communicate two different technologies i.e dart and Javascript with the help of Handlers. These are simply the channels through which data can be passed. In order to communicate with the React along with respective data, we need to create respective handlers. We need to add a javascript handler or channel as the webview is created in Flutter. All we need to provide is the name of the handler, and the callback function.
In our case, since we designed our React.js App to call a handler named ‘fileDetailsHandler’, we need to have same name in the flutter side too. And as the callback function of the handler is called , it will return the file details. That’s all for the communication between React and Flutter.
Putting all together on InAppWebView Widget , a widget powered to communicate to JS by the means of handlers or channels, following is what the complete widget looks.
Step 6: Passing dynamic data to React
It makes great sense if we could have flexibility of sending any file name we want and any file link we want the React.js app to render from the Flutter side. We can do that by creating a sample json of pdf details somewhere in Fluter project. This is to show how dynamic data can be sent to the React.js application. These data could come from anywhere, all you need is the file name and file link.
To better use these data you can first create a screen with Gesture Detectors that can trigger some code when pressed on pdf title tiles, like displayed at the last GIF of this article. Lets say this screen you built for this purpose is ListViewScreen. Now from ListViewScreen pass the data to the webview screen when tapped .Code should look like the following.
Here is how it all looks all together.
React app can be combined with / in Flutter for powerful PWA applications without the need of hosting the react application;
Thats the essence of the blog and the core part ends here.
Thank you for your valuable 7 mins.
Interested ? Checkout the ‘blog’ branch the repo at this github link to if you want full version of this React and Flutter app.
