Vite Plugin Ssr Svelte

screenshot of Vite Plugin Ssr Svelte
express
svelte
vite

Vite Plugin Ssr Svelte

Vite-based static site alternative to SvelteKit

Overview

This project is a starter project that combines Vite, Svelte, and vite-plugin-ssr to create a static prerendered website. It demonstrates how to create Svelte pages and components with hot reloading during development, prerender all content during build time, and hydrate the prerendered content with client-side JavaScript. It also allows for easy setting of MetaTags and includes examples of making server-side API calls. The project includes vite-plugin-ssr, vite-plugin-svelte, and express.js for the prerendering process.

Features

  • Fully prerendered HTML: Provides correct hydration settings for smooth loading in any context.
  • Customization with vite-plugin-ssr: Allows for overriding and adding other frameworks (such as Vue, React, etc.) for specific routes by providing more specific page.client.js and page.server.js files.
  • Hot reloading during development: Enables easy creation and modification of Svelte pages and components with hot reloading.
  • MetaTag support: Allows for easy setting of MetaTags using the provided example component.
  • Asset handling: Includes an assets folder that is copied straight to the build folder, allowing for easy referencing of images without worrying about importing them.
  • Server-side API calls: Includes examples of making API calls on the server-side to fetch data.

Installation

To use this starter project, follow these steps:

  1. Clone this repository.
  2. Install the dependencies by running npm i.
  3. Run the project with hot reloading during development by running npm run dev. You can access the project at http://localhost:3000.
  4. Build the project by running npm run build.
  5. Serve the built project by running npx serve dist/client.

Summary

This starter project combines Vite, Svelte, and vite-plugin-ssr to create a static prerendered website. It provides features such as fully prerendered HTML with smooth hydration, customization options with vite-plugin-ssr, hot reloading during development, MetaTag support, asset handling, and examples of server-side API calls. The installation process is straightforward, and the project can be easily updated using the normal NPM update procedures.

express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects