vite: Enable use of vite preview to preview built SPA sites

[ngbrown]

This enables use of vite preview for serving built SPA sites. This works better than http-server because it correctly supports the SPA fallback (i.e. serving a statically deployed site with all routes being served from a root /index.html).

This is more than a template change because the Remix Vite plugin was setting appType: "custom", preventing vite preview from working in "spa" mode. The patch also sets the build.outDir when previewing so additional command line options aren't needed.

The SPA template has been updated to use npm run preview (or yarn preview) to preview the built site. The start script (npm run start) has been removed from the SPA template because it isn't something that should be used in production.

Closes #8623

• Docs (template/spa/README.md)

Testing Strategy:

I opened up my windows machine and ran this script (PowerShell):

Remove-Item -Recurse .\scripts\playground\template.local\
Copy-Item -Recurse .\templates\spa .\scripts\playground\template.local
yarn playground:new
cd .\playground\playground-1706546017969 # use directory name produced by previous command
echo "export default function Hello() { return <>Hello</>; }" | Out-File ./app/routes/hello.tsx -Encoding utf8
echo "import { Link } from `"@remix-run/react`";`n`nexport default function Index() { return <Link to=`"/hello`">Navigate</Link>; }" | Out-File ./app/routes/_index.tsx  -Encoding utf8
npm run dev
npm run build
npm run preview

Open browser to link provided by vite preview and click on the "Navigate" link to arrive at http://localhost:4173/hello (port may differ). Refresh the page (e.g. F5), and the page should load without a 404. Also try navigating directly to that URL in a new tab.

[changeset-bot]

🦋 Changeset detected

Latest commit: 4a757cc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@remix-run/dev	Patch
create-remix	Patch
remix	Patch
@remix-run/architect	Patch
@remix-run/cloudflare	Patch
@remix-run/cloudflare-pages	Patch
@remix-run/cloudflare-workers	Patch
@remix-run/css-bundle	Patch
@remix-run/deno	Patch
@remix-run/eslint-config	Patch
@remix-run/express	Patch
@remix-run/node	Patch
@remix-run/react	Patch
@remix-run/serve	Patch
@remix-run/server-runtime	Patch
@remix-run/testing	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[ngbrown]

I also implemented the required Remix changes as a patch against @remix-run/dev@2.5.1:

@remix-run+dev+2.5.1.patch

And for @remix-run/dev@2.6.0:

@remix-run+dev+2.6.0.patch

[brophdawg11]

This works better than http-server because it correctly supports the SPA fallback.

What is the "SPA Fallback" you're referring to here? Remix SPA mode renders the root HydrateFallback on initial load while client JS loaders and clientLoaders execute - is "SPA Fallback" referring to another form of fallback UI?

has been removed from the SPA template because it isn't something that should be used in production

I kind of liked start + http-server because it was something you could deploy in production. But I'm not too sure how many folks are serving their SPA's that way in prod versus a static CDN host, or a custom HTTP server of their own - so maybe it's fine for the template not to have an opinion there.

[brophdawg11]

oh, I see the linked issue now - nvm my question about the fallback, we can discuss in #8623

[ngbrown]

What is the "SPA Fallback" you're referring to here?

I was using what seemed to be the most common parlance used in the web server discussions, but it's not super obvious. I meant the option to serve up the root-directory index.html when a path 404's, no matter the route. It's something that became common when react and react-router were serving multiple URL paths from a single index.html file.

[ngbrown]

@brophdawg11 I see that you are about to stabilize SPA mode. I just rebased this on the most recent dev branch. I also tested it again.

Let me know if you have any suggestions for what you would like to see changed.

[brophdawg11]

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.7.0-pre.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.7.0 which includes this pull request. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!