HTML / PWA / CMS to Fawi

If you have an App builded in HTML, PWA or CMS your job is pratically done. Just Publish in Fawi using your hosted App link.

Cordova to Fawi

Navigate to your App root folder and you will find a folder named "www". Inside this folder you can find all your App contents.

Host that folder (www) in an online server and Publish in Fawi using your hosted App link.

If you're using native APIs you need to configure to Fawi Native.

You should verify all your midia and file locations before host cause some of them can have a wrong path after build.

Phonegap to Fawi

If you have developed an App with Phonegap it's very simple to publish in Fawi too.

Just build your app with the code phonegap build and it will create a folder named "www" inside your root folder.

Host that folder (www) in an online server and Publish in Fawi with your hosted App link.

React to Fawi

Publish React Apps into Fawi has never been more easier. Just follow this three simple steps to get it done:

  1. Define a relative path to your App before building:
    • In your root folder, open the file named "package.json" in a text editor
      (example: AppName_Folder/package.json);
    • Change the homepage to ".", example: 
      
{
    "name": "AppName",
    "version": "0.1.0",
    "license": "MIT",
    "homepage": ".",
    ...
},
    • More info in Building for Relative Paths;
  2. Run the command yarn install to be sure that your projects have all the packages updated.
  3. Create a production build with administrative privileges of your App using sudo npm run build;
    • As result, you should see the message "Compiled successfully" in the terminal;
    • After the process your going to see a folder named "build" with all your app contents;
    • More info in Creating a Production Build;
  4. Host that folder (build) in an online server and Publish in Fawi with your hosted App link.

If you're using native APIs you need to configure to Fawi Native.

You should verify all your midia and file locations before host cause some of them can have a wrong path after build.

Ionic to Fawi

Publish Ionic Apps into Fawi is very similar to publish from React. See in these steps how you can get it done:

  1. Inside your root folder, open your terminal and write $ ionic build --prod -- --base-href ./:
    • This is gonna make a production build from your app with a relative path like the react publish process;
    • After the process your going to see a folder named "www" with all your app contents;
  2. Host that folder (www) in an online server and Publish in Fawi with your hosted App link.

If you're using native APIs you need to configure to Fawi Native.

You should verify all your midia and file locations before host cause some of them can have a wrong path after build.

Flutter to Fawi

If you want to publish a Flutter App into Fawi, first you need to Install the Flutter Web Build Tools to get access to the webdev package.

To install the webdev package, which provides the build tools for Flutter for web, open a terminal and run the following code:

$ flutter pub global activate webdev

Ensure that the $ HOME/.pub-cache/bin directory is in your path, and then you may use the webdev command directly from your terminal.

Then upgrade your flutter to the last version with this command:

$ flutter upgrade

Note: if you have problems configuring webdev to run directly, try this code:

$ flutter pub global run webdev [build/serve]

The flutter version should be higher than 1.5

Fisrt step is now done. The second step is to migrate your flutter app to web. You'll need to make some changes to existing Flutter code to run it on the Flutter for web. You should create a copy of your existing application code and modify it to add web support.

If you're using Git, we suggest creating a web-specific branch in your project repository for the time being.

pubspec.yaml


                                            
name: my_app

version: 1.0.0

dependencies:
  ## REPLACE
  ## Update your dependencies to use `flutter_web`
  #flutter:
  #  sdk: flutter
  flutter_web: any

dev_dependencies:
  ## REPLACE
  ## Same goes for test packages
  #flutter_test:
  #  sdk: flutter
  flutter_web_test: any

  ## ADD
  ## Add these dependencies to enable the Dart web build system
  build_runner: ^1.4.0
  build_web_compilers: ^2.0.0

  test: ^1.3.4

## REMOVE
## For the preview, assets are handled differently. Remove or comment
## out this section. See `Assets` below for more details
# flutter:
#   uses-material-design: true
#   assets:
#     - asset/
#
#   fonts:
#   - family: Plaster
#     fonts:
#     - asset: asset/fonts/plaster/Plaster-Regular.ttf

## ADD
## flutter_web packages are not published to pub.dartlang.org
## These overrides tell the package tools to get them from GitHub
dependency_overrides:
  flutter_web:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web
  flutter_web_ui:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_ui
  flutter_web_test:
    git:
      url: https://github.com/flutter/flutter_web
      path: packages/flutter_web_test

lib/

Change or add imports of package:flutter to package:flutter_web throughout your application code.

Change or add imports of dart:ui to package:flutter_web_ui/ui.dart.

web/

For the preview, you need to create

web/index.html and web/main.dart

These provide an entrypoint for your application. In general, you should be able to copy-paste the files below – other than changing the package: import to match your application.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
</body>
</html>
                                        
                                        
                                    

import 'package:flutter_web_ui/ui.dart' as ui;

// TODO: change `my_app` to refer to your app package name.
import 'package:my_app/main.dart' as app;

main() async {
  await ui.webOnlyInitializePlatform();
  app.main();
}

IMPORTANT: you can make a copy paste of this codes but do not forget to change the import 'package':YOUR_APP_NAME/main.dart' as app; to refer your app packege name in your "main.dart" file.

web/assets (optional)

If the application has assets, they need to be in the web/assets directory. You may also have to update paths within your source code that reference these assets.

By default, look like Flutter for Web looks for assets in web folder. So, we had to move it into here. But the good thing is, we didn’t have to define assets in pubspec.yaml anymore. Flutter for Web will automatically recognize it. Example:

web/assets/FontManifest.json (optional)

If the app has custom fonts, they need to be included in this file. Since cupertino icons did not work, we will use material icon by define in FontManfest.json (be careful about the spelling), and put the file inside web. Example:


[
    {
      "family": "MaterialIcons",
      "fonts": [
        {
          "asset": "https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"
        }
      ]
    }
]

Your application is now migrated to flutter web. If you want to make sure just open a terminal inside your root project and run the following code to see your app running on web browser:

$ webdev serve

OR

$ flutter pub global run webdev serve

Your job is pratically done. Now you can open a terminal inside your project's root folder and run the command $ flutter pub global run webdev build and use the folder named "build" that was created/changed with this command to host your Flutter Web Project in an online server. Then, Publish in Fawi with your hosted App link.

If you're using native APIs you need to configure to Fawi Native.

You should verify all your midia and file locations before host cause some of them can have a wrong path after build.