├── .gitignore
├── README.md
├── package.json
├── public
├── global.css
└── index.html
├── rollup.config.js
└── src
├── App.svelte
├── Login.svelte
├── Profile.svelte
├── TodoItem.svelte
├── Todos.svelte
├── firebase.js
└── main.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | public/bundle.*
4 | package-lock.json
5 | yarn.lock
6 | NOTES.md
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Svelte v3 - Firebase Demo
2 |
3 | More [Svelte](https://fireship.io/tags/svelte/) on Fireship.io
4 |
5 | Build a basic authenticated todo app with Svelte & Firebase (RxFire):
6 |
7 | * [x] login/logout with Google OAuth
8 | * [x] create, query, update, delete associated todo items.
9 |
10 | ```
11 | git clone
12 | npm run dev
13 | ```
14 |
15 | Replace the credentials in `app/firebase.js`.
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svelte-app",
3 | "version": "1.0.0",
4 | "devDependencies": {
5 | "npm-run-all": "^4.1.5",
6 | "rollup": "^1.10.1",
7 | "rollup-plugin-commonjs": "^9.3.4",
8 | "rollup-plugin-node-resolve": "^4.2.3",
9 | "rollup-plugin-svelte": "^5.0.3",
10 | "rollup-plugin-terser": "^4.0.4",
11 | "sirv-cli": "^0.3.1",
12 | "svelte": "^3.0.0"
13 | },
14 | "scripts": {
15 | "build": "rollup -c",
16 | "autobuild": "rollup -c -w",
17 | "dev": "run-p start:dev autobuild",
18 | "start": "sirv public",
19 | "start:dev": "sirv public --dev"
20 | },
21 | "dependencies": {
22 | "firebase": "^5.10.0",
23 | "rxfire": "^3.4.0",
24 | "rxjs": "^6.5.1"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/public/global.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | position: relative;
3 | width: 100%;
4 | height: 100%;
5 | }
6 |
7 | body {
8 | color: #333;
9 | margin: 0;
10 | padding: 8px;
11 | box-sizing: border-box;
12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
13 | }
14 |
15 | a {
16 | color: rgb(0,100,200);
17 | text-decoration: none;
18 | }
19 |
20 | a:hover {
21 | text-decoration: underline;
22 | }
23 |
24 | a:visited {
25 | color: rgb(0,80,160);
26 | }
27 |
28 | label {
29 | display: block;
30 | }
31 |
32 | input, button, select, textarea {
33 | font-family: inherit;
34 | font-size: inherit;
35 | padding: 0.4em;
36 | margin: 0 0 0.5em 0;
37 | box-sizing: border-box;
38 | border: 1px solid #ccc;
39 | border-radius: 2px;
40 | }
41 |
42 | input:disabled {
43 | color: #ccc;
44 | }
45 |
46 | input[type="range"] {
47 | height: 0;
48 | }
49 |
50 | button {
51 | background-color: #f4f4f4;
52 | outline: none;
53 | }
54 |
55 | button:active {
56 | background-color: #ddd;
57 | }
58 |
59 | button:focus {
60 | border-color: #666;
61 | }
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Svelte app
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import svelte from 'rollup-plugin-svelte';
2 | import resolve from 'rollup-plugin-node-resolve';
3 | import commonjs from 'rollup-plugin-commonjs';
4 | import { terser } from 'rollup-plugin-terser';
5 |
6 | const production = !process.env.ROLLUP_WATCH;
7 |
8 | export default {
9 | input: 'src/main.js',
10 | output: {
11 | sourcemap: true,
12 | format: 'iife',
13 | name: 'app',
14 | file: 'public/bundle.js'
15 | },
16 | plugins: [
17 | svelte({
18 | // enable run-time checks when not in production
19 | dev: !production,
20 | // we'll extract any component CSS out into
21 | // a separate file — better for performance
22 | css: css => {
23 | css.write('public/bundle.css');
24 | }
25 | }),
26 |
27 | // If you have external dependencies installed from
28 | // npm, you'll most likely need these plugins. In
29 | // some cases you'll need additional configuration —
30 | // consult the documentation for details:
31 | // https://github.com/rollup/rollup-plugin-commonjs
32 | resolve(),
33 | commonjs(),
34 |
35 | // If we're building for production (npm run build
36 | // instead of npm run dev), minify
37 | production && terser()
38 | ],
39 | // context: {
40 |
41 | // }
42 | };
43 |
--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
18 |
19 |
20 |
21 | Welcome to {name}
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/Login.svelte:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
24 |
25 |
26 | {#if user}
27 |
28 |
29 |
30 |
31 | {:else}
32 |
35 | {/if}
36 |
--------------------------------------------------------------------------------
/src/Profile.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | Hi { displayName }!
9 |
10 | 
11 | Your userID is { uid }
12 |
--------------------------------------------------------------------------------
/src/TodoItem.svelte:
--------------------------------------------------------------------------------
1 |
24 |
25 |
41 |
42 |
43 |
44 |
45 | {#if complete}
46 |
47 | { text }
48 |
49 |
52 | {:else}
53 |
54 | { text }
55 |
56 |
59 | {/if}
60 |
61 |
64 |
65 |
--------------------------------------------------------------------------------
/src/Todos.svelte:
--------------------------------------------------------------------------------
1 |
31 |
32 |
35 |
36 |
37 | {#each $todos as todo}
38 |
39 |
40 |
41 | {/each}
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | Your task: { text }
50 |
51 |
--------------------------------------------------------------------------------
/src/firebase.js:
--------------------------------------------------------------------------------
1 | import firebase from 'firebase/app';// rollup bundle issue with ESM import
2 | import 'firebase/auth';
3 | import 'firebase/firestore';
4 | var firebaseConfig = {
5 | apiKey: "AIzaSyCNGXNpOeRLQcJnuSgUXLv8sWcPhvJfyVA",
6 | authDomain: "fireship-lessons.firebaseapp.com",
7 | databaseURL: "https://fireship-lessons.firebaseio.com",
8 | projectId: "fireship-lessons",
9 | storageBucket: "fireship-lessons.appspot.com",
10 | messagingSenderId: "758773997881"
11 | };
12 |
13 | console.log(firebase)
14 |
15 | firebase.initializeApp(firebaseConfig);
16 |
17 | export const auth = firebase.auth();
18 | export const googleProvider = new firebase.auth.GoogleAuthProvider();
19 |
20 | export const db = firebase.firestore();
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import App from './App.svelte';
2 |
3 | const app = new App({
4 | target: document.body,
5 | props: {
6 | name: 'FireSvelte 🔥',
7 | },
8 | });
9 |
10 | export default app;
--------------------------------------------------------------------------------