# Svelte + Appwrite = 🚀
## Appwrite svelte template
Blazing fast development with done backend and fully-prepared frontend.
CMS ready!
## Appwrite installation
[Appwrite installation](https://appwrite.io/docs/installation)
## Start
### Appwrite cli
```bash
npm install -g appwrite-cli
```
### Appwrite new project
```bash
appwrite init project
```
### Appwrite new collection
```bash
appwrite init collection
```
### Appwrite new function
```bash
appwrite init function
```
[Appwrite cli documentation](https://appwrite.io/docs/command-line)
## env
Edit `.env` file for config project id.
## Frontend included
* tailwind
* scss
* css reset
* typescript
* routing
* ready routes
* oauth
* files upload, download
* folder structure
* common components
* service worker
* path aliases
* database realtime subscribers
* database paginate, infinity scroll
* i18n
* cms
* cms forms components
* vite
* prettier
* editorconfig
* icons: [Feather icons](https://feathericons.com/)
## Database subscribers
```svelte
{#if $loading}
Loading data from database...
{:else}
{#each [...$subscriber, ...$insertSubscriber] as item}
{item.name}
{/each}
{/if}
{#each $scrollData as item}
{item.name}
{/each}
console.log(e) /* on every fetch from scroll dispatcher do some action */} />
```
## Files subscribers
```svelte
```
## Routing
Routes can be added in `__routes.svelte` file. Every route is fetched lazyly.
```svelte
import('$routes/index.svelte'),
},
{
path: '/oauth',
component: () => import('$routes/oauth/index.svelte'),
},
{
path: '/oauth/failure',
component: () => import('$routes/oauth/failure.svelte'),
},
{
path: '/oauth/success',
component: () => import('$routes/oauth/success.svelte'),
},
]}
/>
```
### Routes structure
`__layout.svelte` the default layout for every page
`__error.svelte` the error page (404 error)
`__loading.svelte` the default loading component
`__routes.svelte` the file includes all routes in application
## Social auth
```svelte
```
## i18n
Locale file `src/locales/en.json`
```json
{
"page": {
"home": {
"title": "Appwrite svelte rocket start 🚀"
}
}
}
```
```svelte
{$_('page.home.title')}
Change language:
```
## path aliases
`$lib` = `src/lib`
`$root` = `/`
`$src` = `src`
`$routes` = `src/routes`
## commands
```bash
npm run dev
```
```bash
npm run build
```
```bash
npm run preview
```
```bash
npm run appwrite
```