Hosting-Providers.md

Hosting providers

Let's deploy the same static folder to multiple hosting providers, and see how requests are served.

Summary

Host	Settings	Url	/file	/file/	/file.html	/folder	/folder/	/folder/index.html	/both	/both/	/both.html	/both/index.html
GitHub Pages		link	✅	💢 404	✅	➡️ /folder/	✅	✅	✅	✅	✅	✅
Netlify	Default: Pretty Urls on	link	✅	➡️ /file	✅	➡️ /folder/	✅	✅	✅	➡️ /both	✅	✅
Netlify	Pretty Urls off	link	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
Vercel	Default: cleanUrls=false trailingSlash=undefined	link	💢 404	💢 404	✅	✅	✅	✅	✅	✅	✅	✅
Vercel	cleanUrls=false trailingSlash=false	link	💢 404	💢 404	✅	✅	➡️ /folder	✅	✅	➡️ /both	✅	✅
Vercel	cleanUrls=false trailingSlash=true	link	💢 404	💢 404	✅	➡️ /folder/	✅	✅	➡️ /both/	✅	✅	✅
Vercel	cleanUrls=true trailingSlash=undefined	link	✅	✅	➡️ /file	✅	✅	➡️ /folder	✅	✅	➡️ /both	➡️ /both
Vercel	cleanUrls=true trailingSlash=false	link	✅	➡️ /file	➡️ /file	✅	➡️ /folder	➡️ /folder	✅	➡️ /both	➡️ /both	➡️ /both
Vercel	cleanUrls=true trailingSlash=true	link	➡️ /file/	✅	➡️ /file/	➡️ /folder/	✅	➡️ /folder/	➡️ /both/	✅	➡️ /both/	➡️ /both/
Cloudflare Pages		link	✅	➡️ /file	➡️ /file	➡️ /folder/	✅	➡️ /folder/	✅	✅	➡️ /both	➡️ /both/
Render		link	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅
Azure Static Web Apps		link	✅	💢 404	✅	✅	✅	✅	✅	✅	✅	✅

GitHub Pages

Important: GitHub Pages is historically one of the most popular and free option to host a static website. In 2021, there are better free alternatives, offering more features.

Deployment: slorber.github.io/trailing-slash-guide

Url	Result
/file	✅
/file/	💢 404
/file.html	✅
/folder	➡️ /folder/
/folder/	✅
/folder/index.html	✅
/both	✅
/both/	✅
/both.html	✅
/both/index.html	✅

Netlify

Netlify has a setting Post Processing > Asset Optimization > Pretty Urls that affects the way a static site is served. Disabling the Pretty Urls setting can help prevent Netlify to add an unwanted trailing slash.

VERY IMPORTANT: the global checkbox Disable asset optimization is confusing and does not really disable the Pretty Urls settings in practice: make sure to uncheck all the Asset optimization independently.

Default settings (Disable asset optimization checked)

Deployment: trailing-slash-guide-default.netlify.app

Url	Result
/file	✅
/file/	➡️ /file
/file.html	✅
/folder	➡️ /folder/
/folder/	✅
/folder/index.html	✅
/both	✅
/both/	➡️ /both
/both.html	✅
/both/index.html	✅

Pretty Urls enabled

Deployment: trailing-slash-guide-pretty-url-enabled.netlify.app

Url	Result
/file	✅
/file/	➡️ /file
/file.html	✅
/folder	➡️ /folder/
/folder/	✅
/folder/index.html	✅
/both	✅
/both/	➡️ /both
/both.html	✅
/both/index.html	✅

Pretty Urls disabled

Important: make sure the Pretty Urls checkbox is really unchecked (ie, don't use the broken Disable asset optimization global checkbox).

Deployment: trailing-slash-guide-pretty-url-disabled.netlify.app

Url	Result
/file	✅
/file/	✅
/file.html	✅
/folder	✅
/folder/	✅
/folder/index.html	✅
/both	✅
/both/	✅
/both.html	✅
/both/index.html	✅

Vercel

Vercel has 2 options affecting how files are served with 6 possible combinations:

• cleanUrls
• trailingSlash

Important: Next.js also has a distinct trailingSlash option

Important: surprisingly, by default next export creates /myPath.html but this filename is not well-supported by Vercel by default (unless you use cleanUrls: true)

Default settings (no config file)

Deployment: trailing-slash-guide.vercel.app

Url	Result
/file	💢 404
/file/	💢 404
/file.html	✅
/folder	✅
/folder/	✅
/folder/index.html	✅
/both	✅
/both/	✅
/both.html	✅
/both/index.html	✅

Cloudflare Pages

Deployment: trailing-slash-guide.pages.dev

Url	Result
/file	✅
/file/	➡️ /file
/file.html	➡️ /file
/folder	➡️ /folder/
/folder/	✅
/folder/index.html	➡️ /folder/
/both	✅
/both/	✅
/both.html	➡️ /both
/both/index.html	➡️ /both/

Render

Deployment: trailing-slash-guide.onrender.com

Url	Result
/file	✅
/file/	✅
/file.html	✅
/folder	✅
/folder/	✅
/folder/index.html	✅
/both	✅
/both/	✅
/both.html	✅
/both/index.html	✅

Azure Static Web Apps

Deployment: polite-bay-08a23e210.azurestaticapps.net

Url	Result
/file	✅
/file/	💢 404
/file.html	✅
/folder	✅
/folder/	✅
/folder/index.html	✅
/both	✅
/both/	✅
/both.html	✅
/both/index.html	✅

TODO: add other hosting providers

TODO add all other static hosting providers: S3/CloudFront, Amplify, Azure, Heroku, Surge, Firebase, Gatsby Cloud ... and self-hosting tools (Apache, Nginx...)