Guide for web app configuration
Ridy maintains support for Rider Application's web version. This is useful for having the same rider application experience that is offered on Android & iOS to web users as well. The benefit here would be greater portability. Clients don't have to install the application from stores. They will go to the address and submit their request with the same UI as Android & iOS users whether it is from their Mobile or Desktop or any device with support for modern web browsers.
Rider application in Safari Browser
Mandatory configuration for the web app to run is to have the firebase configured for phone authentication login service. To do this create one app of web type on the firebase project you have created before. Copy the
firebaseConfigvariable that Firebase creates and paste it into the place for the variable in the
apps/rider-app/web/index.html. See the below images:
You can find the title of the web page in the
index.htmlfile under the meta tag named
<meta name="apple-mobile-web-app-title" content="Ridy">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="manifest" href="manifest.json">
favicon and Mobile icons are also here. Please note the format of the favicon is png. You can replace them with your assets.
Open a terminal in the
apps/rider-appfolder and run the below command:
flutter build web --release
Once the above command succeeds you will have the compiled website for the rider application located in the
build/webfolder. You can serve this file on your server in any manner you see fit using the web server of your choice.
Please consider the CORS policy to ensure that your web app can successfully connect to the backend. If you have configured the serverUrl in config.dart with the IP address of your server, the app should be served from the same server and IP address but on a different port. However, if you wish to assign a domain or run the app with HTTPS, which is typically required for production setups, you will need to set up and configure Nginx. By proxying both the rider app and its backend through the same domain, you can achieve the desired configuration.