You will learn how to host flutter web app in server. In this case we will use Linux server to host our web application. This application is a complete flutter web development tutorial course partial series.
You will learn how to enable flutter web app and build it. You can build the app using the below command flutter web build Then it will generate flutter compiled file in the build/web directory.
We need to copy the files in build/web and put in the server web directory.
You can create a web directory and put the files there. In general your web directory would be the domain name for accessing it from outside world.
We will use nodejs helps to access our app from the outside world.
In this tutorial we learn how to deploy flutter web app in Linux based server like centos.
First create a flutter project. After creating the flutter project go to the project root folder in the terminal and run the below command
Step 1
flutter build web
It will build the project for web browsing.
Step 2
Then copy everything from /build/web folder(not including build/web) and zip them into a new file. You can name the zip folder anything.
See the image below for copying
Step 3
Then go to your Linux machine where you want to deploy the flutter app. I will name it web.dbestech.com. It's the domain name as well, I will use this name to visit the site on the browser.
Now cd to your folder and create another folder inside it. Name it public-flutter
Step 4
create a two files in web.dbestech.com named as app.js and package.json
Now copy the below code in app.js
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var app = express();
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public-flutter')));
module.exports = app;Copy the below code in package.json
{
"name": "flutter-web-app",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"express": "~4.16.1",
"morgan": "~1.9.1"
}
}Step 5
In the same folder run the below command to install the necessary dependencies
yum install nodejs
npm install express
npm install cookie-parser
npm install morganExecute the above command one by one.
Step 6
Now drag the zip folder in the step 2 and put into public-flutter folder. You can ftp to upload the file. Next unzip the folder
Step 7
Now we need to create virtual host for website
<VirtualHost *:80>
ServerAdmin webmaster@example.com
DocumentRoot "/var/www/html/web.dbestech.com/public-flutter"
ServerName web.dbestech.com
ServerAlias web.dbestech.com
#errorDocument 404 /404.html
ErrorLog "/var/www/html/web.dbestech.com-error_log"
CustomLog "/var/www/html/web.dbestech.com-access_log" combined
#DENY FILES
<Files ~ (\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)$>
Order allow,deny
Deny from all
</Files>
#PATH
<Directory "/var/www/html/web.dbestech.com/public-flutter">
SetOutputFilter DEFLATE
Options FollowSymLinks
AllowOverride All
Require all granted
DirectoryIndex index.php index.html index.htm default.php default.html default.htm
</Directory>
</VirtualHost>Replace web.dbestech.com with your url.
Step 8
Run the below command in your Linux terminal
service httpd restartStep 9
run the below command
node app.js
