[Due for payment 2025-10-21] Fix the web production build locally not working

[mountiny]

Coming from https://expensify.slack.com/archives/C08CZDJFJ77/p1749629334304079

Using the npm run web:prod seems to not work reliably and the app runs into the 404 issues. Let's make sure this flow works and developers can run and test the production web build

Issue Owner

Current Issue Owner: @abekkala

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Pujan92 (External)

[melvin-bot]

Triggered auto assignment to @abekkala (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[PiyushChandra17]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Fix the web production build locally not working

What is the root cause of that problem?

Improvement

What changes do you think we should make in order to solve the problem?

We need replace http-server with serve here in order to avoid 404 issues

App/package.json

Line 79 in 25a9740

"web:prod": "http-server ./dist --cors",

 "web:prod": "npx serve ./dist --cors",

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

n/A

What alternative solutions did you explore? (Optional)

n/A

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[LukasMod]

Currently, the README instructions for production build is:

#### Local production build of the web app
In order to generate a production web build, run `npm run build`, this will generate a production javascript build in the `dist/` folder.

Standard development builds are run with npm run web. For production builds, there is an additional script: npm run web:prod. We can assume that this is proper way to build and run locally production web:

npm run build
npm run web:prod

This successfully starts the local production website, but API requests return a CORS errors or 404 errors (depends on USE_WEB_PROXY env flag). There are likely additional steps required to make it work, possibly including changes to environment files that should be documented in the README or additional proxy commend.

@PiyushChandra17 I tried your solution but it didn’t work. Could you check if there are any additional settings in the environment files? Is there any command that should be run besides these two?

with USE_WEB_PROXY true:

[PiyushChandra17]

@LukasMod In the env prod, we can set USE_WEB_PROXY ENV flag to true here

App/.env.production

Line 7 in ba30be5

USE_WEB_PROXY=false

And -P additional proxy flag

"web:prod": "http-server ./dist --cors -P http://localhost:8080?"

[LukasMod]

@PiyushChandra17 I did try with that proposition "web:prod": "http-server ./dist --cors -P http://localhost:8080?" and USE_WEB_PROXY set to true in env.production, but got loop with wrong requests in terminal and still offline indicator in web (there is no 404 requests, but it seems not right in terminal for sure).

"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36"
[2025-09-04T12:49:49.048Z]  "POST ?/(..)/?/?/?/?/?/?/?/?/?/?/?/?/?/api/SendPerformanceTiming?"

On your side, are you able to interact or log in normally after running that command? I wonder if there’s something else that needs to be configured to make this work.

[PiyushChandra17]

@LukasMod This is exactly what's happening

• USE_WEB_PROXY=true - > the app expects the local dev proxy to forward API calls, this kinda works with npm run web but not with npm run web:prod

• USE_WEB_PROXY=false - > the app calls the prod API directly - > which leads to CORS/404 restrictions

So just running

1. npm run build
2. npm run web:prod
   this isn't enough

We need:

1. Proper proxy set up for prod builds so the local server rewrites API BE
2. Or correct .env overrides so the app points to the correct working production level BE without trigerring CORS issues

We need to start the proxy server too along with those two commands

App/package.json

Line 30 in ba30be5

"web-proxy": "ts-node web/proxy.ts",

[PiyushChandra17]

1. Set the USE_WEB_PROXY=true in .env prod
2. Update the web:prod npm script if needed (just working on this and let's see what resolves the issue)
3. Run web-proxy

npm run build
npm run web:prod
npm run web-proxy