/vite-plugin-ssr-example-netlify

An example vite-plugin-ssr project demonstrating how to deploy to Netlify with all of the available rendering modes.

Primary LanguageVueMIT LicenseMIT

vite-plugin-ssr Netlify Example

A full example for deploying vite-plugin-ssr on Netlify.

Extension of https://github.com/AaronBeaudoin/vite-plugin-ssr-example.

How To Deploy

  1. Fork this repository.
  2. Go to https://app.netlify.com/start.
  3. Connect to GitHub and select your fork.
  4. Press the "Deploy" button.
  5. Wait for Netlify to run the build (~30s).
  6. Go to the URL for your deployment.
  7. Enjoy! 🍹

Going Full Static

If your pages don't need to change often, you may want to pre-render all pages to static files and deploy your site without a serverless function. To deploy this way instead:

  1. Delete the functions/ directory.
  2. Remove the [functions] section from your netlify.toml.
  3. Change the to value for your "catch-all" (/*) rewrite to /404.
  4. Change the status value for your "catch-all" (/*) rewrite to 404.
  5. Remove doNotPrerender from all pages (even _default).
  6. Deploy! 🚀

How It Works

  • Netlify deployment configuration all starts with a netlify.toml file at the root of the project. Netlify calls this file-based configuration because some of the options can also be set in the Netlify dashboard.
  • The build.publish option in netlify.toml specifies the path to static files generated by the build. For vite-plugin-ssr, this path is the dist/client/ directory created during the build. The build.command option specifies the command we use to build our project. For vite-plugin-ssr, this command is simply vite build, which we trigger in our project via an NPM script with npm run build.
  • The functions.directory option in netlify.toml specifies the path to our project's serverless functions. In our project, we simply use functions/. All of our routes will be handled by a single serverless function, which is exported as handler from functions/index.ts. This function imports the renderPage function from vite-plugin-ssr, which internally creates a dependency on the dist/server/ directory created during the build. Types for our function are provided by @netlify/functions.
  • The redirects option in netlify.toml is an array of redirect rules we would like to use for our project's deployment. In our project, we want all requests for which there exists no static file to be handled by our serverless function. We specify /* for the redirects[].from option to catch all routes. We specify /.netlify/functions/index for the redirects[].to option because that path is where Netlify will deploy our function as described here in the docs. Finally, we specify a 200 for the status option, which causes our rule to become a rewrite.

Points of Integration (Summary)

  • The netlify.toml file contains Netlify deployment configuration.
  • The functions/index.ts file contains our serverless function code.
  • The @netlify/functions package provides types for our serverless function.

Caching Non-Static Pages

Netlify doesn't support caching in front of serverless functions, so every incoming request that isn't to a static file will invoke your serverless function. If this is what you want, great! Otherwise, check out Netlify On-demand Builders for a potential solution, with some limitations.