You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+234-4
Original file line number
Diff line number
Diff line change
@@ -3,13 +3,243 @@ Make Bacon with React & Firebase
3
3
4
4
This is the companion repository to [React, Firebase & Bacon](https://frontarm.com/bacon) -- a complete guide to building a real-world app with React.
5
5
6
-
Each branch within this repository contains code for one or more steps within the course. [See an outline and installation instructions at the master branch »](https://github.com/frontarm/react-firebase-bacon)
6
+
The repository contains branches for individual steps within the course. In the first few sections, you'll create and deploy a small [landing page](https://vouch.chat) -- with hooks, Create React App and Firebase:
Then, within later steps, you'll add authentication, profiles, payments, modals -- and other features from [vouch.chat](https://beta.vouch.chat).
11
12
12
-
This extra step contains the code for the REST API used earlier in the course. It's built with Firebase functions, using the same code as your actions.
13
+
14
+
Outline
15
+
-------
16
+
17
+
*This outline just includes branches in this repository. You can the [full course outline](https://frontarm.com/courses/react-and-bacon/getting-started/welcome/) at [Frontend Armory](https://frontarm.com).*
18
+
19
+
20
+
### 1. Setting up
21
+
22
+
-[step-010](https://github.com/frontarm/react-firebase-bacon/tree/step-010) – Create an app and deploy it
23
+
24
+
25
+
### 2. Basic hooks and data fetching
26
+
27
+
-[step-020](https://github.com/frontarm/react-firebase-bacon/tree/step-020) – Fetch and display data with effects
28
+
-[step-021](https://github.com/frontarm/react-firebase-bacon/tree/step-021) – Store form state with `useState`
29
+
30
+
31
+
### 3. Forms, errors and state management
32
+
33
+
-[step-030](https://github.com/frontarm/react-firebase-bacon/tree/step-030) – Submitting forms
-[step-064](https://github.com/frontarm/react-firebase-bacon/tree/step-064) – Staging and production builds
68
+
69
+
You can see the result of this step online at [vouch.chat](https://vouch.chat).
70
+
71
+
72
+
### 7. Authentication
73
+
74
+
*coming soon*
75
+
76
+
77
+
### 8. Context and advanced hooks
78
+
79
+
*coming soon*
80
+
81
+
82
+
83
+
Installation
84
+
------------
85
+
86
+
If you just want to get the app working without the full walkthrough, here's what to do.
87
+
88
+
89
+
### 1. Firebase app
90
+
91
+
Before starting, you'll need a Firebase project. Once you've set it up, you'll need your firebase project's config object, which is available in the Firebase console and looks a little like this:
92
+
93
+
```js
94
+
constfirebaseConfig= {
95
+
apiKey:"qwertyuiopasdfgh_asdfasdfasdfasdfasdfas",
96
+
authDomain:"something.firebaseapp.com",
97
+
databaseURL:"https://something.firebaseio.com",
98
+
projectId:"something",
99
+
storageBucket:"",
100
+
messagingSenderId:"111111111111",
101
+
appId:"1:111111111111:web:1rstarstarstarst"
102
+
};
103
+
```
104
+
105
+
You'll also need to ensure that your project has a *Firestore* database available. To start, you can create it in test mode -- we'll lock it down later.
106
+
107
+
Here's the full process to configure your Firebase project and Firestore database:
To actually build and deploy the app, you'll need to create some configuration files:
129
+
130
+
```bash
131
+
cp .env.example .env.development.local
132
+
cp .env.example .env.production.local
133
+
```
134
+
135
+
These two files provide configuration for your development server and distributable app, respectively. They start out blank, so you'll need to add the relevant parts from your Firebase config. The end will result will look something like this:
You'll also need to add a `functions/.serviceaccount.json` file, which includes credentials for your *development* Firebase service account -- needed to test your Firebase functions locally. You can download the contents of this file from the Firebase console:
Once you've downloaded the service account file, just move it into your `functions` directory and rename it to `.serviceaccount.json`.
154
+
155
+
All of these configuration files are listed in `.gitignore`, so you don't need to worry about accidentally pushing any private configuration to a public repository.
156
+
157
+
158
+
### 4. Start the dev server
159
+
160
+
You can test your configuration by starting the development server:
161
+
162
+
```bash
163
+
npm run start:client
164
+
```
165
+
166
+
This should open a browser window to <http://localhost:3000/>, where if everything has gone to plan, you'll see the landing page. However, before being able to submit the form, you'll first need to start a server to simulate your Firebase functions locally.
167
+
168
+
169
+
### 5. Set up the Firebase CLI tools
170
+
171
+
Before continuing, you'll first need to make sure you have the Firebase CLI tools installed:
172
+
173
+
```bash
174
+
npm install -g firebase-tools
175
+
```
176
+
177
+
Once installed, you'll also need to login to your Firebase account:
178
+
179
+
```bash
180
+
firebase login
181
+
```
182
+
183
+
This will give you a `firebase` command, which lets you deploy your app to Firebase hosting, deploy Firebase functions, and run Firebase functions locally.
184
+
185
+
186
+
### 6. Create your `.firebaserc` file
187
+
188
+
In order to know which Firebase project to use, the `firebase` command looks for the current project's ID in a file could `.firebaserc` -- which you'll need to create. The easiest way to do this is by running `firebase use --add`, selecting a project, and then naming it `default` when prompted:
189
+
190
+
```
191
+
$ firebase use --add
192
+
193
+
? Which project do you want to add? vouchchat
194
+
? What alias do you want to use for this project? (e.g. staging) default
195
+
196
+
Created alias default for vouchchat.
197
+
Now using alias default (vouchchat)
198
+
```
199
+
200
+
201
+
### 7. Start the local Firebase functions server
202
+
203
+
Once you've set up the Firebase CLI tools, you can start a local server in a separate terminal window to simulate your Firebase functions:
204
+
205
+
```bash
206
+
npm run start:functions
207
+
```
208
+
209
+
If this has worked correctly, then you should now be able to submit the form on your landing page!
210
+
211
+
You'll usually want both the React and Firebase dev servers running simultaneously, so this repository also includes a special script that will start both of them in the same tab:
212
+
213
+
```bash
214
+
npm start
215
+
```
216
+
217
+
218
+
### 8. Deploy!
219
+
220
+
Once you've completed all of the earlier steps, deploying your app to the internets is simple:
221
+
222
+
```bash
223
+
npm run build:development # or npm run build:production
224
+
firebase deploy
225
+
```
226
+
227
+
This will build your app's distributable files with the `react-scripts` command, before calling `firebase deploy` to upload the new app to Firebase hosting, deploy cloud functions, and lock down your database's access rules. Once complete, your new app's URL will be printed to the console.
228
+
229
+
If everything is set up correctly, you should now be able to submit the form in the live app with another email address, and see it appear in your Firebase console after a refresh. Congratulations -- you've got your landing page working! All that's left is to play with the styles to make it work for your brand.
230
+
231
+
232
+
### 9. Bonus step: add a domain
233
+
234
+
Within the [Firebase Console](https://console.firebase.google.com)'s *Hosting* area, you can add a domain name for your landing page -- so that it looks a little more official.
235
+
236
+
237
+
How does this all work though?
238
+
------------------------------
239
+
240
+
Want to build real apps that make real bacon? Then check out [React, Firebase & Bacon](https://frontarm.com/bacon) -- and while you're there, pick up a free CLI cheatsheet with many of the commands from this guide. I'll see you there!
0 commit comments