DEV Community

Ian Speer
Ian Speer

Posted on

How to deploy Drift DB with flutter on ALL platforms.

When I say all, I mean it. Windows, macOS, Linux, Android, iOS and WASM with JS failover.

While the oem drift website is a good source, it combines many different types of deployments on each page making it in-optimal to manually parse. Drift is much easier to deploy today than demonstrated before in most older posts. This is a simple step by step cheat-sheet to get you up and running fast so you can spend more time actually learning to use drift rather than figuring out how to simply deploy it in a way that retains flutters platform agnosticism benefits.

run the following command within your project root to add all dependencies:

dart pub add drift drift_flutter path_provider dev:drift_dev dev:build_runner
Enter fullscreen mode Exit fullscreen mode

Reference Example File Structure 

lib/
├── data/
│   ├── tables/
│   │   └── todo_table.dart
│   └── database.dart
└── main.dart

web/
├── sqlite3.wasm    (add this file)
└── drift_worker.js    (add this file)
Enter fullscreen mode Exit fullscreen mode

You will need to download and place the official sqlite3.wasm & drift_worker.js files in the top of the web/ folder as drawn out above.

Obtain the files from their official sources here:
sqlite3.wasm: https://github.com/simolus3/sqlite3.dart/releases
drift_worker.js: https://github.com/simolus3/drift/releases

fill data/tables/todo_table.dart with the following content(example):

import 'package:drift/drift.dart';

class TodoItems extends Table {

IntColumn get id => integer().autoIncrement()();
TextColumn get title => text().withLength(min: 6, max: 32)();
TextColumn get content => text().named('body')();
DateTimeColumn get createdAt => dateTime().nullable()();

}
Enter fullscreen mode Exit fullscreen mode

fill data/database.dart with the following content(example):

import 'package:drift/drift.dart';
import 'package:drift_flutter/drift_flutter.dart';

///import all your tables
import 'tables/todo_table.dart';

part 'database.g.dart';

@DriftDatabase(tables: [TodoItems])
class AppDatabase extends _$AppDatabase {
  AppDatabase() : super(_connectWithDriftFlutter());

  @override
  int get schemaVersion => 1;

  static QueryExecutor _connectWithDriftFlutter() {
    return driftDatabase(
      name: 'my_app_db',
      web: DriftWebOptions(
        sqlite3Wasm: Uri.parse('sqlite3.wasm'),
        driftWorker: Uri.parse('drift_worker.js'),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode
  • The great majority of the above database.dart code is boilerplate, much of which will be the same throughout all your projects -

Build Database:

dart run build_runner build --delete-conflicting-outputs
Enter fullscreen mode Exit fullscreen mode

WebServer headers (customize to server in use)

Content-Type: application/wasm
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
Enter fullscreen mode Exit fullscreen mode

Alt: Deploy with flutter:
Local JS:

flutter run -d web-server --web-hostname 0.0.0.0 --web-port 3000
Enter fullscreen mode Exit fullscreen mode

Local WASM:

flutter run -d web-server --web-hostname 0.0.0.0 --web-port 3000 --wasm
Enter fullscreen mode Exit fullscreen mode

please note depending on your system configuration you may or may not be able to access these over your network using the local test methods above, however to truly test this over the net you will want to use a real webserver and set the appropriate headers as noted.

Top comments (0)