https://github.com/farhan2106/svelte-typescript-ssr

Write typescript for svelte components in a SSR app
https://github.com/farhan2106/svelte-typescript-ssr

Last synced: about 2 months ago
JSON representation

Write typescript for svelte components in a SSR app

• Host: GitHub
• URL: https://github.com/farhan2106/svelte-typescript-ssr
• Owner: farhan2106
• License: gpl-3.0
• Archived: true
• Created: 2019-03-30T08:59:04.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-10-28T04:47:19.000Z (almost 5 years ago)
• Last Synced: 2024-05-10T21:47:37.563Z (5 months ago)
• Language: TypeScript
• Homepage:
• Size: 231 KB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.MD

Awesome Lists containing this project

README

        
This repo was developed when Svelte 3 first came out. Since then better svelte-typescript integration has been developed, such as this [one](https://www.npmjs.com/package/svelte-preprocess)

=========

# Svelte + Typescript + Storybook SSR Boilerplate

This is a __Svelte + Typescript + Storybook SSR__ boiletplate project.

If you are intrested in developing only UI components or SPA, it is [here](https://github.com/farhan2106/svelte-typescript).

## Creating Pages / Routes

1. Create a `.html` file and a corresponding `.ts` file for the svelte component. During build time, the `.ts` will be combined with the `.html` file to become a svelte component. `.html` & `.ts` must have the same filename.

2. Subroutes is created by subfolder. It also assumes `/Index` as `/`. For example, `pages/member/Index.html` will create a route `http://localhost/member/`

3. Every page has its own client side javascript to be used during hydration. This client side JS will load the minimum required svelte component.

## How does the build process works?

1) Compile typescript and put it `build` folder,

2) Combine svelte html & svelte js (generated from typescript) together

3) Generated the list of entry files to be used by webpack for client side hydration

4) Profit!

## TODO

- Add service-worker

- Add Purify CSS

- Add Brotli compression