Flutter Web Hosting in Server | Linux Server

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 morgan

Execute 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. Now this virtual host depends on every hosting provider, I mean it could be very different. If you are on shared server, you won't have access to this. But if you have your own server, you will have access this. For a dedicated server this changes are made in the /etc/httpd/conf folder a file name httpd.conf. 

For other type of server the file still be suffix .conf. A few common locations would be 

usr/local/apache/conf/extra/httpd-vhosts.conf

or 

/etc/hosts/

And now put the info in your file.

    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
     
       Order allow,deny
       Deny from all
    
    
    #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
    

Replace web.dbestech.com with your url. It's worth noting that, the document root and Directory path could be different based on your server OS and configutation

Step 8

Run the below command in your Linux terminal

service httpd restart

Comment

• r

  ra2886380@gmail.com

  2024-08-30 09:24:48

  Cool