(edited)
Description:
I am deploying a React-based single-page application (SPA) to Vercel. The deployment completes successfully, but when accessing the site, I encounter a 404: NOT_FOUND error.
Steps Taken to Resolve:
- Verified that the deployment URL is correct and checked DNS propagation (I am using a custom domain pointing to Vercel).
- Confirmed that the deployment exists in the Vercel dashboard and appears active.
- Reviewed the build and deployment logs, and there were no critical errors or failures during the process.
- Ensured that the correct root directory (
webapp) and output directory (channels/dist) were configured in the Vercel dashboard. - Added a
vercel.jsonfile to the root of the project with the following content to handle routing:
json
Copy code
{ "rewrites": [ { "source": "/(.*)", "destination": "/" } ]}- Tested the app locally, and the build process works as expected. The output directory contains the necessary static files.
Despite these efforts, the 404 error persists. Ive tried the default build command and npm run build --workspace=channels which chat gpt recommended I try based off my makefile:-include config.override.mk
include config.mk
# The CI environment variable is set automatically in CircleCI and GitLab CICI ?= false
# Detect Linux/ARM64 and set a flag to fix the issue with optipng-bin on it:# please see optipng-bin Linux arm64 support issue (https://github.com/imagemin/optipng-bin/issues/118) for details:ifeq ($(shell uname)/$(shell uname -m),Linux/aarch64) LINUX_ARM64 = true CPPFLAGS += -DPNG_ARM_NEON_OPT=0endif# Exact same issue but for Linux/PPC64ifeq ($(findstring Linux/ppc64,$(shell uname)/$(shell uname -m)),Linux/ppc64) LINUX_PPC64 = true CPPFLAGS += -DPNG_POWERPC_VSX_OPT=0endif
.PHONY: runrun: node_modules ## Runs app @echo Running Mattermost Web App for development
npm run run
.PHONY: stopstop: ## Stops webpack @echo Stopping changes watching
ifeq ($(OS),Windows_NT) wmic process where "Caption='node.exe' and CommandLine like '%webpack%'" call terminateelse -@pkill -f webpack || trueendif
.PHONY: restartrestart: | stop run ## Restarts the app
.PHONY: devdev: node_modules ## Runs app with webpack-dev-server npm run dev-server
.PHONY: testtest: node_modules ## Runs tests @echo Running jest unit/component testing
npm run test
.PHONY: check-stylecheck-style: node_modules ## Checks JS file for ESLint confirmity @echo Checking for style guide compliance
npm run check
.PHONY: fix-stylefix-style: node_modules ## Fix JS file ESLint issues @echo Fixing lint issues to follow style guide
npm run fix
.PHONY: check-typescheck-types: node_modules ## Checks TS file for TypeScript confirmity @echo Checking for TypeScript compliance
npm run check-types
.PHONY: distdist: node_modules ## Builds all web app packages @echo Packaging Mattermost Web App
npm run build
node_modules: package.json $(wildcard package-lock.json) @echo Getting dependencies using npm
ifeq ($(CI),false) CPPFLAGS="$(CPPFLAGS)" npm installelse # This runs in CI with NODE_ENV=production which skips devDependencies without this flag npm ci --include=devendif
touch $@
.PHONY: cleanclean: ## Clears cached; deletes node_modules and dist directories @echo Cleaning Web App
npm run clean --workspaces --if-present rm -rf node_modules
.PHONY: packagepackage: node_modules dist ## Generates ./mattermost-webapp.tar.gz for use by someone customizing the web app mkdir tmp mv channels/dist tmp/client tar -C tmp -czf mattermost-webapp.tar.gz client mv tmp/client channels/dist rmdir tmp
## Help documentation à la https://marmelab.com/blog/2016/02/29/auto-documented-makefile.html.PHONY: helphelp: @grep -E '^[0-9a-zA-Z_-]+:.*?## .*$$' ./Makefile | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s", $$1, $$2}'