Deploy Flutter Web App in a Shared Hosting with NodeJs

Ifyou are a flutter developer then you have came to a point that you have wanted to deploy your flutter apps to the web but you didn’t have much info about how to do it. So this blog post is for you

I will assume you already have your app build and ready for deployment.

If not then the first step you need is to build your app for the web using the command “flutter build web” if you don’t know how we will cover it in detail in another blog post soon.(see flutter.dev for now)

You have 2 hosting to deploy your app through:

VPS Hosting (Dedicated Virtual Private Server)
Shared Hosting (Which means you and other people in the same server)

The VPS is more like your laptop or computer which you control through ssh if its Linux server or desktop remote if its windows server. As much as the VPS is more cool and handy but its expensive and hard for some people but its easy to deploy flutter apps with. Here is how you can do it:

You can server your flutter web app through python with this command

nohup python -m SimpleHTTPServer 8000 &

Just make sure you are in your web app folder when your run the command. “nohub” will let the command keep running even if you closed the SSH session on Linux .

Or you can server your app through Dart pub/webdev tools by using the dhttpd package.

Build and release a web app

During a typical development cycle, you test an app using flutter run -d chrome (for example) at the command line. This…

flutter.dev

Now lets continue with what we are here for which is the Shared Hosting. The shared hosting has a control panel which has all your configurations and tools to help you manage your websites and email and you can access them through your web browser

Example of a CPanel

Lets dive into code

files and folders structure

Prepare your nodejs app as a simple server for your flutter web app here is sample code

app.js

package.json

Create a folder and name it (“public-flutter”) and then put your flutter web app in the folder you have just created so nodejs can serve it through the server
Now archive the whole nodejs app folder using ZIP and upload it to your shared hosting through File Manager in the CPanel and extract it to your destination folder (ex. home/<your_username>/flutterwebapp)

And then proceed with your Nodejs app setup on your shared hosting

Go to Software Section

Once you are inside the control panel

Search for “Setup Node.js App” and select it.

You will see all your web apps here

Click on “Create Application”

Create application page

“Application Root” should be your Repository Path from the previous step
“Application URL” should already hold your domain name do just choose what route do you want your web app to run on.
“Application startup file” must basically point to the js file which creates the server. If you have server creation in app.js, just enter app.js and If you created your node server using the Express framework, then it should “./bin/www”.
Click on “Create”. This will start the node app and should reload the page, with a “Detected configuration file” section. This should detect your package.json (packaje.json should be in the root folder of your app)
Click on “Run NPM install”. This is basically installing all your npm packages listed in your package.json
Click on “Restart” and Hurry!! your flutter web app should be up and running in the url you entered in “Application URL”.

Requirements:
Updated and Latest Browsers like (Chrome or Firefox)

PS:
The web app will load after (30s — 60s). it depends on your internet speed and if your browser is not supported try to update it.

Known Problems:

CROS is a pain for flutter developers when they want there app to make http calls through XMLHttpRequest .. so make sure to enable CROS in your server side which has your database.

All the source code of this blog post is on github