# [How-to]Build flutter web UI on FiveM CEF engine
*warning :this note is for those who knows some basic stuff of flutter*
1. Before compiling Dart code, Replace the source code HTML with
```htmlembedded=
<!DOCTYPE html>
<html>
<head>
<base href="/html/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<title>set your projectName</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<script>
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
loadMainDartJs();
</script>
</body>
</html>
```
2. Place the bat file in the build/ folder (same path as the build/web folder) [remove_files_for_Fivem.bat (click to download)](https://cdn.discordapp.com/attachments/817454204108144661/1077344351191056574/remove_files_for_Fivem.bat)
3. **Build command: `flutter build web --web-renderer canvaskit --no-source-maps && %cd%/build/remove_files_for_Fivem.bat`**
`(Using canvaskit renderer and not to produce src maps file,eventully, the unnecessary files will be automatically deleted by the bat file.) If using the VS Code terminal,type `cmd` to switch to cmd .`
4. **Put all the files in build/web folder into your fivem script's html folder Configure fxmanifest.lua in the script to be used**
> Just edit the `client_scripts` part and `server_scripts` part ,the `files` part and `ui_page` are basically fixed
```lua=
fx_version 'bodacious'
games { 'gta5' }
description "flutter UI"
ui_page "html/index.html"
files {
"html/index.html",
"html/*.png",
"html/**/*.png",
"html/*.js",
"html/**/*.js",
"html/*.json",
"html/**/*.json",
"html/**/*.wasm",
"html/**/*.otf",
"html/**/*.ttf",
}
client_script "client.lua"
```
5. start the resource and enjoyed it
## If you are looking for some demo:
[https://github.com/XNORGATE/web_test](https://github.com/XNORGATE/web_test)