Flutter Web App Hosted in NodeJS shows only white screen

Question

I have built a flutter web application (flutter stable@3.3.9) where I have set the url strategy to PathUrlStrategy().

Of course, locally this application builds fine and runs fine. I am hosting this application in a NodeJS application as follows:

import express, {Express, Request, Response} from "express";
import dotenv from "dotenv";
import cookieParser from "cookie-parser";
import https from "https";
import {ClientRequest, IncomingMessage} from "http";
import path from "path";

const app: Express = express();
const port = process.env.PORT;

app.use(express.json());
app.use(express.urlencoded({extended: false}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "flutter")));

app.get("/api/page/:id", async (req, res) => {
  getPageSessionHandler(req, res);    
});

app.post("/api/payment", async (req, res) => {
  console.log("handling payment request");
  postPaymentHandler(req, res);       
});


app.get("*", (_, res) => {
  res.sendFile(path.resolve(__dirname, "flutter/index.html"));
});

app.listen(port, () => {
  console.log(
    `⚡️[server (nodejs)]: Server is running at http://localhost:${port}`,
  );
});


var postPaymentHandler = (authToken: String, req: any, res: any) => {
  //implementation removed
};

var getPageSessionHandler = (authToken: String, req: any, res: any) => {
  //implementation removed
};

Of course, this runs fine locally as follows:

flutter build web --release --web-render=html

Then move the build/web* output to the proper folder in my nodejs server.

I can even locally containerize this application and run it from my docker desktop (windows 11) using the following dockerfile:

FROM debian:latest AS build-env
# Install flutter dependencies and nodejs dependencies
RUN apt-get update 
RUN apt-get install -y curl git wget unzip gettext-base libgconf-2-4 gdb libstdc++6 libglu1-mesa fonts-droid-fallback lib32stdc++6 python3  
RUN apt-get clean

RUN curl -fsSL https://deb.nodesource.com/setup_12.x | bash -
RUN apt-get -y install nodejs
RUN npm install

WORKDIR /app

COPY . .
RUN npm install
RUN npm run build

RUN git clone https://github.com/flutter/flutter.git /usr/local/flutter
ENV PATH="/usr/local/flutter/bin:/usr/local/flutter/bin/cache/dart-sdk/bin:${PATH}"

WORKDIR /app/flutter_src/payment

# Build the app
RUN touch .env
RUN flutter clean && flutter pub get
RUN flutter build web --release --web-renderer=html

# Build the final image
WORKDIR /app

RUN cp -R flutter_src/payment/build/web dist/flutter

CMD ["/bin/sh",  "-c", "exec node dist/index.ts"]

Again, this works fine in both my windows node server environment, and also in my docker desktop container. When I deploy this via my CI/CD pipeline to AWS ECR, I am unable to load the application. I can hit the associated API endpoints in the node's index.ts file above. My kubernetes pod is healthy... but I am not able to load routes with a second slash... i.e.:

https:///welcome <--- loads fine https:///user/fun_username <-- does not load.

After a ton of debugging, I'm finding another oddity in how this behaves in environment. See the Network log from a request to my application's deep-linked route in Chrome (and also Edge):

when requesting /page/{page-id-here}, the browser is requesting the main.dart.js at the subroute.

What's even more perplexing is that if I request the same deep route in Firefox, not only does my application load as intended and work as expected, the browser seems to literally be requesting my main.dart.js at the root (what it should be) of my node server, as it's serving the flutter directory statically... See this screenshot from firefox:

here, the main.dart.js file is requested from the root of the node server as I'd expect.

I have tried all sorts of routing tricks in the node server, but that just feels wrong, especially since it seems to be specific to my environment. If I revert the path strategy back to client-only routing (/#/path/here), this works fine, but does not meet my requirements on this project.

Thank you all for your help. This is weeks of struggling I'm deferring on at this point.

Flutter Web App Hosted in NodeJS shows only white screen

0 Answers0