Hello world with a counter

This post shows the current demo state of this blog.

The publication stays server-rendered by default.

The counter below is a Flutter web app inside the publication.

Goal

Make one markdown publication.

Embed one Flutter web app in that publication.

Keep publication composition simple.

Current state

This repo uses jaspr_content for publication files.

This publication file is in content/posts/.

The embedded app metadata is in data/embedded_apps.yaml.

The server resolves the embedded app id from that catalog.

The Flutter app source is in flutter_apps/counter_app/.

The served Flutter web files are in web/flutter_apps/counter/.

Steps

1. Add jaspr_content to the project.
2. Store the publication as markdown in content/posts/.
3. Create a Flutter web counter app in flutter_apps/counter_app/.
4. Build the Flutter app for web output.
5. Serve the built files from web/flutter_apps/counter/.
6. Set the Flutter web base path to /flutter_apps/counter/.
7. Add a local Flutter bootstrap file so the app loads local assets.
8. Add an embedded app catalog in data/embedded_apps.yaml.
9. Add a catalog module that loads that YAML file.
10. Resolve one embedded app id in lib/main.server.dart.
11. Use one short tag in the publication:

<EmbeddedApp id="flutter-counter"></EmbeddedApp>

Files

• Publication: content/posts/hello-world-with-a-counter.md
• Embedded app catalog: data/embedded_apps.yaml
• Catalog module: lib/content/embedded_app_catalog.dart
• Flutter embed adapter: lib/components/flutter_embed.dart
• Flutter app source: flutter_apps/counter_app/lib/main.dart
• Flutter bootstrap: flutter_apps/counter_app/web/flutter_bootstrap.js

Run the demo

1. Run jaspr serve.
2. Open http://localhost:8080/posts/hello-world-with-a-counter.
3. Click -1, +1, and Reset in the counter.

If the number changes in the embedded app, the demo works.

Why this shape helps

The publication only knows one embedded app id.

The embedded app details stay in one catalog file.

The Flutter app source stays separate from the publication text.