🌟 Deploying Your Flutter Web App on Cloudflare Pages!
Welcome, fellow Flutter developers! 🚀 We’re embarking on an exciting journey to deploy your Flutter web app onto Cloudflare Pages with CI/CD support. Entire process will take less than five minutes. Let’s dive in together and make your app shine!
Firstly About Cloudflare Pages
Cloudflare Pages offers a hassle-free solution for deploying static sites and JAMstack applications. With built-in support for CI/CD pipelines, developers can automate the deployment process, ensuring seamless updates and continuous integration.
Now lets dive in straight to deployment. I will be explaining each step with images for reference.
Step 1: Logging In:
First things first, let’s get started by logging into our Cloudflare account. Simply navigate to Cloudflare’s website and log in as you normally would. Signing up is free if you don’t already have an account.
Step 2: Accessing Cloudflare Pages:
Once logged in, find your way to the Cloudflare dashboard. Look for the “Pages and Workers” section and click on it to access Cloudflare Pages.
Step 3: Creating Your Application:
Now, let’s carve out some digital space for our app. Click on “Create Application” and watch as your project takes its first steps towards going live.
Step 4: Integrating with Git:
It’s time to connect our app to our Git repository. Click on “Connect to Git” and choose between GitHub or GitLab, depending on your preference.
Step 5: Selecting Your Project:
Click on the desired project and then Click “Begin Setup” to initiate the process and prepare for the journey ahead.
Step 6: Building The App:
This the most important part of the process. Copy and paste the provided command to build your app. Ensure the output directory is set to “build/web”.
if cd flutter; then git pull && cd .. ; else git clone https://github.com/flutter/flutter.git; fi && ls && flutter/bin/flutter doctor && flutter/bin/flutter clean && flutter/bin/flutter config --enable-web &&flutter/bin/flutter build web --web-renderer canvaskit --releasebuild/web
Step 7: Monitoring Build Progress:
Sit back and relax as Cloudflare works its magic. Keep an eye on the build logs to track progress. Once everything’s good to go, click “Continue to Project”.
Step 8: Claiming Your Domain:
This is the last step of the process. Cloudflare will now provide you a unique domain for the project. In my context it is random-event-visualizer.pages.dev
Conclusion
Congratulations! We’ve successfully deployed your Flutter web app on Cloudflare Pages. Now, share your creation with the world and continue to explore the endless possibilities of your coding journey.
At last, I want to mention that this is my first story on Medium, so it might not be perfect, but I’ve poured my heart into sharing this guide with you. Your feedback and suggestions are always welcome as I continue to learn and grow as a writer and developer. Also, feel free to check out my website at sarthakparajuli.com.np and my GitHub profile at github.com/kingace2056 to connect and explore more of my work. Thank you for joining me on this journey! 📝✨
