static_micro_cms 0.1.1

A package that helps you create a webpage with Jamstack using microCMS

static_micro_cms

It is a package that helps you create a static webpage with Jamstack using microCMS.

これはmicroCMSを使ってJamstack構成でFlutter製のWebページを制作するのを支援するパッケージです。

Features

When you use this package, you can create a static webpage with microCMS, a headless CMS. It loads all api data before building an application, so there is no need to access to apis at run-time, and no need to keep an api key in the source code. It offers more secure and faster websites. It can also load data in CI.

Getting started

1. Create a microCMS API in https://microcms.io/
2. Create contents and define schemas.
3. Download API schemas and put it in the project (ex. ./schemas/api-xxx-000.json). You can get it in [API Settings].
4. Describe configurations in pubspec.yaml like below.

#...
static_micro_cms:
  baseUrl: "https://[your project name].microcms.io/api/v1"
  apis:
    - endpoint: profile
      type: object
      schema: schema/api-profile-20211122080708.json
    - endpoint: news
      type: list
      schema: schema/api-news-20211121223418.json
#...

5. Get API key from cms console, and put it on .env in project root like below.

API_KEY=[your api key]

6. To load data and create type definitions, run flutter pub run static_micro_cms. Then types.microcms.g.dart and datastore.microcms.g.dart will be created in /lib folder.
7. [optional] if you don't want to upload api data, add *.microcms.g.dart to .gitignore

Usage

After generation of the api data, you can use data with MicroCMSDataStore.[endpoint]Data.

how to write configs

• baseUrl: (required) The base url of the api. You can find it on [API Preview] window.
• apis.endpoint: (required) The endpoint name of the content.
• apis.type: (required) content type. "object" or "list"
• apis.schema: (required) schema file path.

update only type definitions

If you update api schemas but want to avoid useless communications, you can try flutter pub run static_micro_cms --dry. It updates only type definitions.

implementation progress

• contents

  • ✅ object
  • ✅ list

• types

  • ✅ text
  • ✅ textArea
  • ✅ richEditor
  • ✅ image
  • ✅ date
  • ✅ boolean
  • ❌ select
  • ✅ number
  • ✅ custom
  • ❌ repeater
    • single field type only