Skip to content

Commit a872cf2

Browse files
committed
docs(README): Initial README for test mode
1 parent 1e3ac60 commit a872cf2

File tree

1 file changed

+84
-0
lines changed

1 file changed

+84
-0
lines changed

README.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
## Simple Next.js App with Firebase
2+
3+
### Initial test mode v1.0.0-alfa2
4+
5+
#### Create Firestore Project in the Firebase Console
6+
7+
In the [Firebase Console](https://console.firebase.google.com), we log in with a Google Account and set up a project with a collection and its respective documents.
8+
9+
* Go to [Google Firebase page](https://firebase.google.com/) and click on the `Get Started Button` (took me to [The Google Firebase Console](https://console.firebase.google.com/)
10+
* Login if necessary with a Google Account
11+
* Click on `Create a Project` or `Add project`
12+
* Step 1 - project name
13+
* Project name `Simple Next JS App`
14+
* Project ID `simple-next-js-app`
15+
* Click on `Continue` button
16+
* Step 2 - Google Analytics
17+
* For this project it is not necessary to leave Google Analytics enabled, so we disable.
18+
* Click on `Continue` button
19+
* Step 3 - Click on `Create project` button
20+
* `Your new project is ready`
21+
* Click on `Continue` button
22+
* We'll stay in the free Spark plan for now. The Flame plan is a fixed $25/month usable plan
23+
* When I enter the [The Google Firebase Console](https://console.firebase.google.com/), I see `Create a Project` as well as clickable cards for my already existing projects.
24+
25+
#### Create and populate a Firestore database for your newly created project
26+
27+
* Go to [The Google Firebase Console](https://console.firebase.google.com/) and click on the `Simple Next JS App` project.
28+
* Select `Database` on left-hand sidebar menu
29+
* Click on the Cloud Firestore `Create database` button. (See [Choose a Database: Cloud Firestore or Realtime Database](https://firebase.google.com/docs/database/rtdb-vs-firestore?authuser=0) for why Cloud Firestore is "recommended for most developers starting a new project".
30+
* Select the `Start in test mode` option for now, "to enable quick setup".
31+
* Click on `Next` button and then confirm or select an alternative database storage location, then click on the `Done` button in order to provision the Cloud Firestore database.
32+
* Let's Add data. Say, the first 3 records from [JSONPlaceholder posts collection](https://jsonplaceholder.typicode.com/photos)
33+
* After creating the database, we can see a `+ Start collection` link, which we click to get started with our first collection (NoSQL terminology, it's similar to table in SQL terms).
34+
* We enter `photos` as the Collection ID and hit the `Next` button.
35+
* Leaving the `Document ID` field on `Auto-ID`, we enter `albumId` into the field labeled `Field`, change the `Type` field to `number` and enter `1` as the initital value.
36+
* In the same way, we click on the `+ Add field` link to add `title`, `url` and `thumbnailUrl` fields and their corresponding values (all of type `string`) to complete the first document for our `photos` collection, and hit the `Save` button.
37+
* We click on the `Add document` link for each additional document we care to add. Let's finish adding the first three JSONPlaceholder photo documents. [JSONPlaceholder photos collection](https://jsonplaceholder.typicode.com/photos):
38+
39+
```json
40+
[
41+
{
42+
"albumId": 1,
43+
"id": 1,
44+
"title": "accusamus beatae ad facilis cum similique qui sunt",
45+
"url": "https://via.placeholder.com/600/92c952",
46+
"thumbnailUrl": "https://via.placeholder.com/150/92c952"
47+
},
48+
{
49+
"albumId": 1,
50+
"id": 2,
51+
"title": "reprehenderit est deserunt velit ipsam",
52+
"url": "https://via.placeholder.com/600/771796",
53+
"thumbnailUrl": "https://via.placeholder.com/150/771796"
54+
},
55+
{
56+
"albumId": 1,
57+
"id": 3,
58+
"title": "officia porro iure quia iusto qui ipsa ut modi",
59+
"url": "https://via.placeholder.com/600/24f355",
60+
"thumbnailUrl": "https://via.placeholder.com/150/24f355"
61+
}
62+
]
63+
```
64+
65+
#### Show database contents with a simple NextJS app
66+
67+
* Create a web app `simple-nextjs-firebase-app` for our project and its database. In the Firebase Console online, under the Project Overview gear icon click on the Project Settings option. Under `Your apps`, click on the `</>` web app option (or, if you've already created another app for this project, click on the `Add app` button), then add a nickname to Register the app. After entering `simple-nextjs-firebase-app`, click on the `Register app` button. We are shown the Firebase SDK settings, which we will apply in a moment. For now we click on the `Continue to console` button.
68+
* To scaffold our app initially, from a project directory, do `yarn create next-app simple-nextjs-firebase-app` (`npx create-next-app simple-nextjs-firebase-app`)
69+
* `cd simple-nextjs-firebase-app`
70+
* `yarn dev -p 4001` (`npm run dev -- -p 4001`)
71+
* Point browser at `http://awebfactory.org:4001/`
72+
* Install firebase package: `yarn add firebase` (`npm install firebase`)
73+
* After installing the `dotenv` package with `yarn add dotenv` (`npm install dotenv`), we create a file `.env` with firebase config info, obtainable from the Firebase Console Project Overview > Project Settings `Your apps` section. The repo includes an `example.env` file you can copy to create the `.env` file with the necessary environment variable names and format.
74+
* We create the file `next.config.js` (enabling `.env` and its contents for the app)
75+
* We create the file `firebase.config.js`. Thanks to the use of the `dotenv` package, this file never needs to be edited for project and app specific info.
76+
* We edit `pages/index.js` in order to render the contents from our database.
77+
* Run with `yarn dev` (`npm run dev`)
78+
79+
> Based on short article in Spanish along similar lines: [NextJS con Firebase - 20200103](https://medium.com/@lemmusm/nextjs-con-firebase-790adfe988b2). There exists a [Repo: Next.js con Firebase](https://github.com/lemmusm/nextjs-firebase). However our repo is a construction from scratch, and includes details in the README on how to create the Firestore database and handle each step, explaining along the way in the README. Also, we shall be adding newer versions as needed to cover all basic uses of Next.js with Firebase.
80+
81+
### Authentication mode v1.0.0-beta1
82+
83+
Coming soon!
84+

0 commit comments

Comments
 (0)