This is a small explanation on how to develop Flutter inside of a Docker-Container with Code-Server. I created this, to be able to do Flutter development on my iPad (Just open the two tabs in Split-Screen).
You need to have Docker installed. (If not, take a look here.)
Please continue by installing nginx, if not installed yet:
For Debian-based systems:
sudo apt update
sudo apt install nginx
sudo systemclt start nginx
sudo systemctl enable nginxFor Arch-based systems:
pacman -Syu
pacman -S nginx
sudo systemclt start nginx
sudo systemctl enable nginxSetup Code-Server-Config (You can try to ignore this step, since the config will be generated most of the time - but I had some errors while doing so):
In your home-directory, run:
nano .config/code-server/config.yaml
This will open the configuration file for code-server. Paste this text inside:
bind-addr: 127.0.0.1:8080
auth: password
password: <Your password>
cert: falseSet a password instead of <Your password>. (If you let code-server generate your config files, it will generate a pretty strong password)
In the next step, create the Dockerfile:
nano Dockerfile
and paste
FROM codercom/code-server:latest
# Install Flutter
RUN sudo apt-get update
RUN sudo apt-get install -y unzip
# Usually in a normal Linux environment, you should not do that
RUN sudo chmod 777 /opt
RUN git clone https://github.com/flutter/flutter.git -b stable --depth 1 /opt/flutter
ENV PATH="/opt/flutter/bin:${PATH}"
RUN flutter doctor
RUN flutter config --enable-web
# Install Code extensions
RUN code-server --install-extension dart-code.flutterSince web is available on stable now, you can use it too. To use more experimental features, consider setting the branch to something higher than stable (Branch/Channel descriptions)
Create a file called something like start-code-server and edit to:
#/bin/sh
# This will start a code-server container and expose it at http://127.0.0.1:8081 and http://127.0.0.1:8082.
# It will also mount your current directory into the container as `/home/coder/project`
# and forward your UID/GID so that all file system operations occur as your user outside
# the container.
#
# Your $HOME/.config is mounted at $HOME/.config within the container to ensure you can
# easily access/modify your code-server config in $HOME/.config/code-server/config.json
# outside the container.
# Create links for nginx to create the reverse proxy
sudo ln -s /etc/nginx/sites-available/code-server.conf /etc/nginx/sites-enabled/code-server.conf
sudo ln -s /etc/nginx/sites-available/code-server-flutter.conf /etc/nginx/sites-enabled/code-server-flutter.conf
sudo systemctl restart nginx
mkdir -p ~/.config
docker run -d -it --name code-server -p 8081:8080 \
-p 8082:8081 \
-v "$HOME/.config:/home/coder/.config" \
-v "*<Your Project Directory>*:/home/coder/project" \
-u "$(id -u):$(id -g)" \
-e "DOCKER_USER=$USER" \
custom-code:latestReplace *<Your Project Directory>* with the directory on your server/machine you want to expose to the code-server-container. I usually have "${HOME}" set there, since I will be able to open every subdirectory with Ctrl + K Ctrl + O or F1 with Open Folder.
To be able to execute it, run
chmod +x start-code-server
In the directory of your Dockerfile create another file called build-image.
Paste:
# /bin/bash
docker build . -t custom-code:latestand do
chmod +x build-image again.
Then run ./build-image. It may take some time.
I wanted to have a reverse proxy from 2 different subdomains of mine to point to my code-server and my flutter-web result.
Therefore I generated the SSL-certificates with certbot.
Next, create two files in /etc/nginx/sites-available/: code-server.conf and code-server-flutter.conf.
For code-server.conf, paste this code:
server_tokens off;
server {
listen 80;
server_name *<domain>*;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl http2;
server_name *<domain>*;
access_log /var/log/nginx/code-server.app-access.log;
error_log /var/log/nginx/code-server.app-error.log error;
# allow larger file uploads and longer script runtimes
client_max_body_size 100m;
client_body_timeout 120s;
sendfile off;
# SSL Configuration (Only if you have the certificates)
ssl_certificate /etc/letsencrypt/live/*<domain>*/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/*<domain>*/privkey.pem;
ssl_session_cache shared:SSL:10m;
ssl_protocols TLSv1.2;
ssl_ciphers "ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384";
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://localhost:8081;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
}
Replace <domain> with your domain/subdomain for your code-server environment.
For code-server-flutter.conf, paste this code:
server {
listen 80;
server_name *<flutter-domain>*;
return 301 https://$server_name$request_uri;
}
server {
listen 443 ssl http2;
server_name *<flutter-domain>*;
access_log /var/log/nginx/code-server-flutter.app-access.log;
error_log /var/log/nginx/code-server-flutter.app-error.log error;
# allow larger file uploads and longer script runtimes
client_max_body_size 100m;
client_body_timeout 120s;
sendfile off;
# SSL Configuration (Only if you have the certificates)
ssl_certificate /etc/letsencrypt/live/*<flutter-domain>*/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/*<flutter-domain>*/privkey.pem;
ssl_session_cache shared:SSL:10m;
ssl_protocols TLSv1.2;
ssl_ciphers "ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384";
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://localhost:8082;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
}
Replace <flutter-domain> with your domain/subdomain for your Flutter-Web result environment.
Me not liking to have the proxy turned on all the time, I have created a small script to delete the config-links in a second: Just execute
sudo rm /etc/nginx/sites-enabled/code-server.conf
sudo rm /etc/nginx/sites-enabled/code-server-flutter.conf
sudo systemctl restart nginxTo start your Docker-Dev environment, run your start-code-server file.
Now you should be able to go to your domain specified in the Setup nginx step and see your code-server.
To run your Flutter project, run
flutter pub get
and
flutter run -d web-server --web-hostname=0.0.0.0 --web-port=8081
It will expose itself to the domain specified for the flutter-result.
If you have any questions, feel free to contact me at this email or by creating a issue.
You will find all the files mentioned in the repository.