5.2 KiB

Raw Blame History

Svelte + Appwrite = 🚀

Appwrite svelte template

Blazing fast development with done backend and fully-prepared frontend.

CMS ready!

Appwrite installation

Start

Appwrite cli

npm install -g appwrite-cli

Appwrite new project

appwrite init project

Appwrite new collection

appwrite init collection

Appwrite new function

appwrite init function

Appwrite cli documentation

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

Database subscribers

<script>
  import { Collection } from '$lib/database'
  import { Query } from 'appwrite'

  const collection = new Collection('[database-id]', '[collection-id]')
  const [subscriber, loading] = collection.createSubscriber([Query.limit(5) /*, ...queries */])
  // listen changes (update, delete) in database and automatically rerender on change
  // current data = [{ name: 'John', lastName: 'Doe' }, ...]

  const insertSubscriber = collection.createObserver()
  // listen changes (create) in database and automatically rerender on change

  const [paginator, paginatorInitalLoading] = collection.createPaginate(10, [/* ...queries */])
  // paginate the collection of documents with limit and automatically rerender on change
  // paginator.next() makes the next request for items, paginator store automatically rerender on next load

  const [scrollData, scrollDispatch] = collection.createInfinityScrollDispatcher(10, [/* ...queries */], { /* intersection observer options */ })
  // load next data after scroll to anchor (scrollDispatch) element
</script>

<div>
  {#if $loading}
    <p>Loading data from database...</p>
  {:else}
    {#each [...$subscriber, ...$insertSubscriber] as item}
      <p>{item.name}</p>
    {/each}
  {/if}
</div>

<!-- scroll dispatcher example -->
<div>
  {#each $scrollData as item}
    <p>{item.name}</p>
  {/each}
  <div use:scrollDispatch on:fetch={(e) => console.log(e) /* on every fetch from scroll dispatcher do some action */} />
</div>

Files subscribers

<script>
  import { Bucket } from '$lib/storage'
  import { Query } from 'appwrite'

  const bucket = new Bucket('[bucket-id]')
  const [files, loading] = bucket.createSubscriber([Query.limit(5) /*, ...queries */])
  // listen changes (update, delete) in files and automatically rerender on change

  const insertSubscriber = bucket.createObserver()
  // listen changes (create) in files and automatically rerender on change

  const [upload, dispatch] = storage.createUploadDispatcher(/* many files ? true : false, default = false */)

  const [content, loading] = storage.getFileContent('6391f7c70ede82115575')
  // get file content and automatically rerender on file update
</script>

<div>
  <input type="file" use:upload />
  <button on:click={() => dispatch().then(uploadedFile => console.log(uploadedFile))}>Upload</button> 
</div>

Routing

Routes can be added in __routes.svelte file. Every route is fetched lazyly.

<script lang="ts">
  import Router from '$lib/router/Router.svelte'

  import Layout from '$src/__layout.svelte'
  import Loading from '$src/__loading.svelte'
  import Error from '$src/__error.svelte'
</script>

<Router
  layout={Layout}
  loading={Loading}
  error={Error}
  routes={[
    {
      path: '/',
      component: () => 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

<script>
  import { account, url } from '$lib/stores/appwrite'
</script>

<div>
  <button on:click={() => account.createOAuth2Session('github', url.oauth.success, url.oauth.failure)}>
    Github
  </button>
</div>

i18n

Locale file src/locales/en.json

{
  "page": {
    "home": {
      "title": "Appwrite svelte rocket start 🚀"
    }
  }
}

<script>
  import { _, locale, locales } from 'svelte-i18n'
</script>

<div>
  <h1>{$_('page.home.title')}</h1>

  <div>
    <p>Change language:</p>

    <select bind:value={$locale}>
      {#each $locales as locale}
        <option value={locale}>{locale}</option>
      {/each}
    </select>
  </div>
</div>

path aliases

$lib = src/lib

$root = /

$src = src

$routes = src/routes

commands

npm run dev

npm run build

npm run preview

npm run appwrite

5.2 KiB Raw Blame History