Giter VIP home page Giter VIP logo

vite-plugin-ssr-example-netlify's Introduction

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.

vite-plugin-ssr-example-netlify's People

Contributors

aaronbeaudoin avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.