Flutter project deployment on vercel

Question

I've deployed flutter project on vercel from github, but after deployment it shows:

404: NOT_FOUND Code: NOT_FOUND.
Framework presets: Others

Build log:

15:28:18.542 Cloning github.com/Usman167/UPKeepApp-FluxStore- (Branch: master, Commit: e331f69) 15:28:20.977 Cloning completed: 2.435s
15:28:21.169 Analyzing source code...
15:28:26.899 Uploading build outputs...
15:28:26.913 Deploying build outputs...
15:28:33.974 Done with "."

Answer 1

Method 1

run the command in the root of project:flutter build web

create new repository in github and upload the web folder to github

and follow the procedure in below figure in vercel

https://githubactionss.vercel.app/#/ https://github.com/lavahasif/githubaction

Method 2

Just Create Flutter template project(test)

flutter create -t skeleton my_app

verify the web folder (enable web) exist other wise vercel show error upload the entire project to github do like this

• Build Command: flutter/bin/flutter build web --release
• Output Directory: build/web
• Install Command: 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

and Finally just deploy the link like this https://web-my-app.vercel.app/#/

Answer 2

You can change your Vercel project settings to build and deploy a Flutter Web project.

Build & Development Settings

• Framework Preset: Other
• Build Command: flutter/bin/flutter build web --release
• Output Directory: build/web
• Install Command: 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

Example build log showing a successful Flutter deploy