Setup the landing page

ShipFlutter starter-kit offers also a landing page to promote and get organic traffic for your app.

We use Astro.build framework to build a static page that is, fast and optimized for search engines. It allows you to customize the landing page with your own content, add blogs (for SEO) and hosts privacy policy and terms pages that are required to launch an app on Google Play and Apple Store.

The ladning page is based on AstroWind but optimized for app landing page use-case.

Page speed results

We used Google Pagespeed to analyze the landing page and get a score of 100 in nearly all categories.

Getting started

You can locally run the landing page by following these steps:

1. Install Node.js and npm (if you haven’t yet)
2. From within the landing page folder run

   npm install

3. Once the dependencies are installed run

   npm run dev

4. Open http://localhost:4321 in your browser and enjoy

Setup Firebase Hosting

First, make sure you setup Firebase before continuing.

The setup depends if your project include a Flutter web target or not:

Landing + Flutter Web

If you are targeting web for Flutter and want to setup a landing page. You need to create two targets for Firebase Hosting. Otherwise you can skip this step.

1. Open Firebase Hosting dashboard

2. Create two sites. One for landing and one for your app (e.g. landing-myproject and app-myproject).

3. Go to the root of your project and run:

   firebase target:apply hosting app app-yourproject
   firebase target:apply hosting landing landing-yourproject

Only Landing

If you only need to setup the landing page you can use the firebase CLI wizard:

1. Run firebase init

2. Select Hosting and follow the setup flow

3. What do you want to use as your public directory? landing/dist

   Point to the build folder of Astro.

4. Configure as a single-page app (rewrite all urls to /index.html)? yes

5. Set up automatic builds and deploys with GitHub? yes

6. Login to GitHub and follow the setup flow

7. When asked about Set up the workflow to run a build script... say NO to both.

   We already provide the GitHub workflow .github/workflows/

Tip

Change the release storage settings from your sites to avoid extra costs. Keeping the last 2 or 3 releases should be enough.

Deploy

We recommend using Firebase Hosting to deploy your landing page (along your webapp). The project comes with a Firebase configuration and GitHub workflows that will help you setup and deploy the project.

Manually Deploy to Firebase Hosting

To manually deploy the site follow these steps:

1. Build your site with

   npm run build

2. If you target Flutter web build it too

   flutter build web  --web-renderer canvaskit

3. Deploy with

   firebase deploy --only hosting

Automatically Deploy to Firebase Hosting

If you are using GitHub we provide a workflow that will deploy whenever you merge code in GitHub. You can follow the detailed steps from the official docs.

In a nutshell:

1. Create the secrets for GITHUB_TOKEN and FIREBASE_SERVICE_ACCOUNT by running

   firebase init hosting:github

2. Set the user/project in GitHub
3. Say No when prompted to generate the workflow files (they are already provided by us)
4. Update workflows in .github/workflows/ by providing the right secrets names.