Skip to content

AaronBeaudoin/vite-plugin-ssr-example

Repository files navigation

vite-plugin-ssr Example

A full example of vite-plugin-ssr showcasing each of it's available rendering modes with Vue.

Getting Started

  1. Install project dependencies with npm install.
  2. Preview a serverless deployment with npm run preview:render.
  3. Preview a full static deployment with npm run preview:static.
  4. Go to http://localhost:3000 in your browser.
  5. Explore! 🔍

Core Dependencies

  • vite-plugin-ssr
    The reason that this repository exists. A flexible, framework agnostic vite plugin/framework for server-side rendering (SSR), but capable of even more, such as pre-rendering (SSG), server or client-only modes (SPA, HTML), and client routing. It's like a lightweight version of Next/Nuxt.js that gives you more architectural control. Thanks @brillout for your hard work! ❤️

  • vite
    The world's best (in my current humble opinion) development server and build tool, by Evan You. It's kind of like Webpack with webpack-dev-server, except you don't have to spend hours writing the world's longest and ugliest webpack.config.js, and HMR is actually hot.

  • vue
    vite-plugin-ssr might be framework agnostic, but I'm not. My preference for a front-end web framework (unless Svelte eventually steals my heart) is Vue because I find it cleaner and easier to work with than React, doesn't use JSX, and has a solid community ecosystem. Also, it's written by Even You, who later also created Vite. Maybe he's a mythical 10x developer?

  • typescript
    Makes JavaScript not suck. I guarantee you, if you're not using TypeScript, your code has more bugs than mine. Also, TypeScript ranks very highly among developer satisfaction, so it's definitely doing something right. It's simply a superset of JavaScript that adds syntax for types.

Other Dependencies

Package Name Description
@vitejs/plugin-vue Adds vue support to vite.
express + sirv The server setup used to preview build output.
ts-node Run .ts files directly from the command line.
chalk Used to add color to preview server logs.
@types/node, @types/express  TypeScript type definitions.

About

An example vite-plugin-ssr project showcasing all of the available rendering modes (SSR, SSG, SPA, HTML).

Resources

License

Stars

Watchers

Forks