How I Deployed My Flutter Web App to Heroku and Lived to Tell the Tale

🎉 The Git Repository

Please click here!

Alternatively, try:

Our

Live Web Application

To view, please click here.

Once upon a time in the land of code and coffee, there lived a brave developer named "X-Cross Dev". With a heart full of ambition and a brain wired for logic, they embarked on a journey to deploy their Flutter web app to Heroku. The mission seemed straightforward, but little did they know, the path was filled with quirky bugs, mysterious errors, and moments of sheer bewilderment.

🚀 The Mission

Deploy a Flutter web app to Heroku and set up a CI/CD pipeline with GitHub integration. Sounds simple, right? Well, buckle up, because this ride has more twists and turns than a season finale of a telenovela.

🧰 The Toolbox

Let's gather our tools:

• Heroku CLI: Our trusty sidekick for this adventure.
• GitHub: The fortress where our code resides.
• Flutter: The magical framework that makes our app come alive.
• A Big Cup of Coffee: Because no great story ever started with someone eating a salad.

🏗️ Step 1: Setting the Stage

First things first, we need to install the Heroku CLI. If you haven't already, grab it from Heroku CLI. Then, log in using:

heroku login

With a swift command, the door to Heroku's realm opens, and we're ready to create our app:

heroku create my-awesome-flutter-app

📝 Step 2: The Mysterious Procfile

Every hero needs a plan, and ours comes in the form of a Procfile. This little file tells Heroku how to run our app. Create a Procfile in your project root with:

web: npx http-server build/web -p $PORT

📦 Step 3: The Package.json Enigma

Next up, we need a package.json file. This isn't just any JSON file; it's the key to unlocking our app's potential on Heroku. Create one with:

{
  "name": "my-awesome-flutter-app",
  "version": "1.0.0",
  "description": "A Flutter web app",
  "main": "index.js",
  "scripts": {
    "start": "npx http-server build/web -p $PORT"
  },
  "dependencies": {
    "http-server": "^0.12.3"
  },
  "engines": {
    "node": "14.x"
  }
}

🛠️ Step 4: Building the Fortress

Time to build our app:

flutter build web

This command spins the magic, transforming our code into a web-ready format. Now, we need to initialize a Git repository (if we haven't already) and commit our changes:

git init
git add .
git commit -m "Initial commit"

🚀 Step 5: The Great Deployment

With our app ready and our code committed, it's time to deploy:

heroku git:remote -a my-awesome-flutter-app
git push heroku main

As the terminal spews out lines of logs, we hold our breath, waiting for the magical words: "Deployed to Heroku."

🔄 Step 6: CI/CD - The Circle of Code Life

To ensure our app stays up-to-date with every code change, we set up CI/CD with GitHub. Head over to the Heroku Dashboard, connect your GitHub repository, and enable automatic deploys for the desired branch.

But wait, there's more! To harness the full power of CI, we need an app.json:

{
  "name": "my-awesome-flutter-app",
  "description": "A Flutter web app",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "env": {
    "FLUTTER_WEB": {
      "value": "true"
    }
  },
  "buildpacks": [
    {
      "url": "heroku/nodejs"
    }
  ]
}

Commit and push, go forth and deploy these changes to GitHub!

🎉 The Victory

With the app deployed and CI/CD set up, we stand victorious. Our Flutter web app is live on Heroku, and every push to GitHub triggers a new deployment. And remember, every bug is just a plot twist waiting to be resolved.