Skip to content

Commit 471fc14

Browse files
codediodeiocodediodeio
committed
doc: update readme for template
1 parent 1c8e935 commit 471fc14

File tree

2 files changed

+73
-98
lines changed

2 files changed

+73
-98
lines changed

‎README.md

Lines changed: 14 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -40,125 +40,41 @@ Handle multiple levels of async relational data (and their loading & fallback st
4040
...
4141
```
4242

43-
4443
## Quick Start
4544

46-
Create a Svelte App and install Firebase.
45+
Grab the [sveltefire-template](https://github.com/codediodeio/sveltefire-template).
4746

4847
```bash
49-
npx degit sveltejs/template fireapp
50-
cd fireapp
48+
npx degit codediodeio/sveltefire-template fireapp
49+
cd fireapp
5150
npm install
52-
53-
npm install sveltefire firebase
54-
```
55-
56-
57-
Create a web app from the [Firebase Console](https://console.firebase.google.com/) and grab your project config. Enable **Anonymous Login** and create a **Firestore** database instance in test mode.
58-
59-
60-
Initialize the Firebase app in the `App.svelte` file.
61-
62-
```html
63-
<script>
64-
import { FirebaseApp, User, Doc, Collection } from 'sveltefire';
65-
66-
// Import the Firebase Services you want bundled and call initializeApp
67-
import firebase from "firebase/app";
68-
import 'firebase/firestore';
69-
import 'firebase/auth';
70-
import 'firebase/performance';
71-
import 'firebase/analytics';
72-
73-
const firebaseConfig = {
74-
apiKey: 'api-key',
75-
authDomain: 'project-id.firebaseapp.com',
76-
databaseURL: 'https://project-id.firebaseio.com',
77-
projectId: 'project-id',
78-
storageBucket: 'project-id.appspot.com',
79-
messagingSenderId: 'sender-id',
80-
appId: 'app-id',
81-
measurementId: 'G-measurement-id',
82-
}
83-
84-
firebase.initializeApp(firebaseConfig)
85-
</script>
8651
```
8752

88-
**Full Example**
89-
90-
Start by building an **authenticated realtime CRUD app** . A user can sign-in, create posts, and add comments to that post. Paste this code into your app.
91-
92-
```html
93-
<!-- 1. 🔥 Firebase App -->
94-
<FirebaseApp {firebase}>
95-
96-
<!-- 2. 😀 Get the current user -->
97-
<User let:user let:auth>
98-
99-
<p>Howdy, {user.uid}</p>
100-
<button on:click={() => auth.signOut()}>Sign Out</button>
101-
102-
<div slot="signed-out">
103-
<button on:click={() => auth.signInAnonymously()}>Sign In</button>
104-
</div>
105-
106-
<!-- 3. 📜 Get a Firestore document owned by a user -->
107-
<Doc path={`posts/${user.uid}`} let:data={post} let:ref={postRef} log>
53+
Create a project at https://firebase.google.com/ and grab your web config:
10854

109-
<h2>{post.title}</h2>
55+
![firebase config](https://firebasestorage.googleapis.com/v0/b/firestarter-96e46.appspot.com/o/project-config.PNG?alt=media&token=5eabb205-7ba2-4fc3-905f-e9547055e754)
11056

111-
<span slot="loading">Loading post...</span>
112-
<span slot="fallback">
113-
<p>Demo post not created yet...</p>
11457

115-
<button on:click={() => postRef.set({ title: 'I like Svelte' })}>
116-
Create it Now
117-
</button>
118-
</span>
11958

120-
<!-- 4. 💬 Get all the comments in its subcollection -->
121-
<Collection
122-
path={postRef.collection('comments')}
123-
let:data={comments}
124-
let:ref={commentsRef}
125-
log>
126-
127-
{#each comments as comment}
128-
<p>{comment.text}</p>
129-
<button on:click={() => comment.ref.delete()}>Delete</button>
130-
{/each}
59+
Opt-in to the following services from the Firebase console to run the demo.
13160

132-
<hr />
61+
1. **Anonymous** Login under *authentication -> sign-in method*
62+
1. **Cloud Firestore** under *database*. Make sure it's in test mode (or provide write access to the `posts/` collection using Security Rules).
13363

134-
<button on:click={() => commentsRef.add({ text: 'Cool!' })}>
135-
Add Comment
136-
</button>
13764

138-
<span slot="loading">Loading comments...</span>
139-
140-
</Collection>
141-
</Doc>
142-
</User>
143-
</FirebaseApp>
144-
```
145-
146-
Run it on localhost:5000
65+
Open `App.svelte` and replace the `firebaseConfig` prop with your Firebase project credentials. Run it:
14766

14867
```
14968
npm run dev
15069
```
15170

152-
If you see the error **'openDb' is not exported by node_modules\idb\build\idb.js**, go in the `rollup.config.js` and add this line:
71+
![sveltefire demo app](https://firebasestorage.googleapis.com/v0/b/sveltefire-testing.appspot.com/o/sveltefire-demo.gif?alt=media&token=d5ea2807-7c50-4f94-bc73-8698b9528902)
15372

154-
```js
155-
resolve({
156-
...
157-
mainFields: ['main', 'module'] /// <-- here
158-
}),
159-
```
73+
Congrats! You are now running an authenticated realtime Svelte app.
74+
75+
👀 See the [Install Guide](https://github.com/codediodeio/sveltefire/tree/master/docs/install.md) for additional options.
16076

161-
## Concepts
77+
## Concepts and Examples
16278

16379
SvelteFire allows you to use Firebase data anywhere in the Svelte component without the need to manage async state, promises, or streams.
16480

‎docs/install.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
## Install from Template (Recommended)
2+
3+
Follow the instructions on the [sveltefire-template](https://github.com/codediodeio/sveltefire-template).
4+
5+
## Install from Scratch
6+
7+
Create a Svelte App and install Firebase.
8+
9+
```bash
10+
npm install sveltefire firebase
11+
```
12+
13+
Create a web app from the [Firebase Console](https://console.firebase.google.com/) and grab your project config. Enable **Anonymous Login** and create a **Firestore** database instance in test mode.
14+
15+
16+
Initialize the Firebase app in the `App.svelte` file. Make sure to import the Firebase packages you expect to use.
17+
18+
```html
19+
<script>
20+
import { FirebaseApp, User, Doc, Collection } from 'sveltefire';
21+
22+
// Import the Firebase Services you want bundled and call initializeApp
23+
import firebase from "firebase/app";
24+
import 'firebase/firestore';
25+
import 'firebase/auth';
26+
import 'firebase/performance';
27+
import 'firebase/analytics';
28+
29+
const firebaseConfig = {
30+
apiKey: 'api-key',
31+
authDomain: 'project-id.firebaseapp.com',
32+
databaseURL: 'https://project-id.firebaseio.com',
33+
projectId: 'project-id',
34+
storageBucket: 'project-id.appspot.com',
35+
messagingSenderId: 'sender-id',
36+
appId: 'app-id',
37+
measurementId: 'G-measurement-id',
38+
}
39+
40+
firebase.initializeApp(firebaseConfig)
41+
</script>
42+
43+
44+
<FirebaseApp {firebase}>
45+
46+
<!-- 1. 🔥 Have some fun in here -->
47+
48+
</FirebaseApp>
49+
```
50+
51+
52+
If you see the error **'openDb' is not exported by node_modules\idb\build\idb.js**, go in the `rollup.config.js` and add this line:
53+
54+
```js
55+
resolve({
56+
...
57+
mainFields: ['main', 'module'] /// <-- here
58+
}),
59+
```

0 commit comments

Comments
 (0)