2 posts tagged with "web"

Flutter to Netlify: Seamlessly Deploy Your App with Continuous Deployment Delight!

Developing apps can feel overwhelming and take up a lot of time. On top of that, deploying web applications can be an added challenge. As developers, our focus should be on creating and improving our products, not getting stuck in the complexities of deployment. In this blog post, I’ll walk you through a straightforward process of deploying your Flutter app on Netlify using GitHub actions. For those who are not aware

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline

Whether you’re using Flutter or any other web framework, this post will provide you with simple steps to effortlessly deploy your app without any hassle.

We will be using Netlify actions which will run the Github workflow for every commit and deploy our web app. We will be deploying this flutter-palm project which is basically a chat app powered by the Google Palm Api.

The app is available for use here https://palmchat.netlify.app

Screenshot of the deployed app

To set up Continuous deployment in your project first you need to create a new site on Netlify https://app.netlify.com/start or you may also use the Netlify CLI, if you feel comfortable with it. Go to your team's Sites page, open the Add New Site menu, and create a new site it should be pretty straightforward if you feel stuck see https://docs.netlify.com/welcome/add-new-site/ There are multiple ways of creating a site

• Import an existing project from a Git repository
• Select a prebuilt site from Netlify Templates
• Deploy local project files manually using Netlify's deploy Dropzone

Once you have your site created we need two things

1. OAuth Token is required to authorize workflow (which we will create in a moment) to deploy your site. Visit the Oauth access token and create a new token.
2. Site Id to identify unique to your site you can find your site id under Site Settings -> General -> Site details -> Site id

We will need to provide these tokens to our workflow site. Don't worry we won't directly hardcode them in the script rather we will make use of Github secrets to store them and use them as variables in our workflow script. Go to your project repository under Settings -> secrets and variables -> actions -> create a new repository secret 

And we will store our Netlify Oauth token and SiteId here.

The screenshot shows three secrets added in my repository API_KEY, Token, Site id

Once you have your secrets added note down the names of your secret because we will use them in our workflow script.

Now it's time to set up the Github workflow.

1. In the root of your project create a workflows directory under .github, for me the directory path will be palmchat/.github/workflows
2. Create a file named workflow.yml (name it whatever you like)
3. Paste the below workflow script, most part of it is self-explanatory, But I will still try to explain whats cooking

name: Deploy to netlify on merge
"on":
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: subosito/flutter-action@v2
        with:
          # flutter-version: '3.3.10'
          channel: "stable"
      - run: flutter clean
      - run: flutter pub get
      - run: flutter pub run build_runner build --delete-conflicting-outputs
      - run: flutter build web --release --dart-define=API_KEY=${{secrets.API_KEY}}
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v1.1
        with:
          publish-dir: "./build/web"
          production-branch: main
          github-token: ${{ secrets.GITHUB_TOKEN }}
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: false
          enable-commit-comment: true
          overwrites-pull-request-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        timeout-minutes: 1

1. The above script (named "Deploy to Netlify on merge") executes every time we make a commit on the main branch.
2. It gets a stable version of flutter SDK (since we are trying to build a flutter app) using this action subosito/flutter-action@v2.
3. It runs the flutter commands required to clean and build the release.
4. We then run the actual part which this blog post is about deploying to Netlify

- name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v1.1
        with:
          publish-dir: "./build/web"
          production-branch: main
          github-token: ${{ secrets.GITHUB_TOKEN }}
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: false
          enable-commit-comment: true
          overwrites-pull-request-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        timeout-minutes: 1

The important part here is to check your production-branch name and path to publish-dir where your release build will be, after running the build in the previous step (flutter build web … in this case)

And finally, we define the env environment variables basically the secrets we added to Github to be used in this script.

Once we have this setup try making a commit to your repository and you should see your Github actions workflow running.

Previous workflow runs and their status

Once the workflow succeeds you should see your website deployed to your domain specified in Netlify (https://palmchat.netlify.app in this case If it ever fails you can always look at the logs to figure out the error.

Additionally, if you want to handle your web app urls see https://github.com/flutter/flutter/issues/89763#issuecomment-925040018

I hope this blog post will help you grab a coffee while this workflow is busy deploying your web app to Netlify, if you have any questions or have problems deploying your web app feel free to write your queries in the comments and I would be happy to help.

Thanks for reading and have a happy time deploying :)

Curious about How to deploy a flutter web app to Github Pages check out my other blog here Deploying your Flutter WebApp to GitHub Pages

This post is mainly to share my experience about how I used GitHub actions to deploy my open-sourced flutter web app without exposing any secrets or API keys that are crucial to my application. This approach can be used for any frontend framework and not just flutter.

Building the frontend of your application seems much interesting but once you start integrating with your backend or services like firebase or supabase etc, You need to manage API keys, JSON files, or secrets for your app, and we often end up either hardcoding those confidential keys by some kind of encryption or even the pros hardcode it as plaintext and commit it to a public repo😆, which might put your application at risk.

I wanted to develop a vocabulary app that is open-sourced and at the same time, I wanted it to be secure and wanted to make sure the app gets deployed without exposing the keys. This vocabulary app uses supabase in the backend, which is a open-sourced firebase alternative that provides a serverless solution that can get up and running in less than 2 minutes. In order to access the supabase database, it provides us with few keys which are unique to your application basically anyone with those keys could access the database, So you have to make sure those keys are safely stored.

Problem There were two challenges to make the project publicly available on Github

I have stored all those confidential keys into my flutter app in a constant file and the application can fetch those keys from that file and the app works fine locally, But the problem comes when we want to push the code to GitHub, since we cannot expose the keys publically.

Another problem is that the app uses flutter-action by subosito which is basically a CI solution using GitHub actions that automatically runs a script and deploys my flutter webapp on each commit by running some build commands, You can find the complete script here. But it is obvious that the build would fail if it finds if any of the pieces of the code are missing from the repository (Our secret keys in this case)this means the app won’t get deployed.

Image showing the build script running on each commit on a master branch

Basically, these two things wouldn’t allow my app to be deployed securely.

Solution​

So for this Github Encrypted Secrets comes to the rescue if you go to any repository under settings you will see an option called secrets which basically allows you to store any sensitive information in your organization, repository, or repository environments which can be accessed in GitHub Actions workflows.

But there is another problem​

The problem is you cannot access those encrypted secrets in your application, had it been the case the problem would have been solved and I would have called it a day 👋🏻. I searched a little about it but couldn’t find any solution which will allow you to access the encrypted secrets but since we have been using this amazing Q&A platform for devs called “StackOverflow” which helped me get an answer. Here is that stackoverflow question that I asked and I got a simple and amazing answer to that. Thanks to this user Xamantra for the solution.

Tell me the solution​

The solution is to

1. encode your confidential file to base64 and store the encoded output to GitHub secrets.
2. In your GitHub workflow decode the encrypted secret and convert it back to a file and then run your build scripts.

It's that simple

Now you can add your confidential files to .gitignore and never push it to the repository since now you have GitHub encrypted secrets.

Show me how it's done​

Here is how we do it step by step

1. convert your secret file to base64 the file can be of any type. I had a dart file which has the api keys stored so convert it to base64 using this command

base64 lib/path/to/secrets.dart

This will give you a base64 string copy that string and add it to GitHub secrets as shown in the below picture.

2. Now in your workflow script before you run the build command decode the base64 and convert it back to file with the path where it needs to be created.

run: echo $YOUR_SECRET_KEY | base64 -d > lib/somedirectory/secrets.dart env: YOUR_SECRET_KEY: ${{ secrets.YOUR_SECRET_KEY }}

And that's it, gentlemen ! that is it! you will see your build running successfully and the app getting deployed to the web, safe and secure with open-sourced code.

But there is one more problem what if you delete your local repository how do you get back those keys which you never pushed to Github?

That is still a mystery to me apart from the manual decoding let me know if you have a solution to this problem. More on this later sometimes if I find a solution.

Here is a link to the repository in case you would want to check it out.

Repository:https://github.com/maheshj01/vocabhub

Successful Builds : https://github.com/maheshj01/vocabhub/actions

Thanks for reading till the end.

Have a great day!