6

I've been working on my flutter app with environnent builds, and i would like to modify my index.html file depending on the type of web build I am doing.

Is there a way to do so? I have an env.dart which contains the variables I need but i don't know how to modify the index.html with my dart variable.

Thanks you.

Larva Pox
  • 145
  • 1
  • 6
  • 1
    This isn't really a great answer, but when I've needed to do this in the past, I've written a python build script that modifies the html file, and then runs my build commands. – phimath Oct 30 '20 at 16:57

1 Answers1

4

Solution with shellscript

I currently use one but it is a shell script

Setup your environment-specific index.html

From your project folder create the environment where you will store your index.html files:

mkdir config
cd config
mkdir release
mkdir dev
mkdir uat

Then copy your different index.html (especially the one from web/) to config/release/ config/dev/ and config/uat/

cp ../web/index.html release/ && cp ../web/index.html dev/ && cp ../web/index.html uat/

/!\ MAKE A BACKUP OF YOUR CURRENT FILE LOCATED IN WEB/INDEX.HTML
The script will copy index.html from your different environments directories directly to web/ and erase the current file in web/. I decline any liability should you permanently delete the file. You are warn.

Script file

Create the script file:

touch run.sh && chmod +x run.sh

copy this script inside:

cp config/$1/index.html web/index.html && flutter run -d chrome --no-sound-null-safety

How to use

And run it with either ./run.sh release, ./run.sh dev or ./run.sh dev

Use --dart-define for your environment-specific variable

I also run this script along with setting environment variables with --dart-define

flutter run --dart-define=MY_ENV_VARIABLE=ITS_VALUE

NB: I currently disable null-safety because of the libs of my project that are not yet null-safe.

Antonin GAVREL
  • 9,682
  • 8
  • 54
  • 81