Skip to content

Commit 1e3ac60

Browse files
victorkanevictorkane
committed
feat(initial version in firebase test mode): no app user authentication required
1 parent 71d732b commit 1e3ac60

File tree

7 files changed

+742
-89
lines changed

7 files changed

+742
-89
lines changed

‎.example.env‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Copy to .env file (see config.next.js), fill in settings from Firebase Console, make sure package dotenv is installed.
2+
3+
FIREBASE_API_KEY=/*your api key*/
4+
FIREBASE_AUTH_DOMAIN=/*your api key*/
5+
FIREBASE_DATABASE=/*your database*/
6+
FIREBASE_PROJECT_ID=/*your project id*/
7+
FIREBASE_STORAGE_BUCKET=/*your storage bucket*/
8+
FIREBASE_SENDER_ID=/*your sender id*/
9+
FIREBASE_APP_ID=/*your app id*/
10+

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717

1818
# misc
1919
.DS_Store
20+
.*.swp
21+
22+
# dotenv
2023
.env*
2124

2225
# debug

‎firebase.config.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import firebase from 'firebase/app';
2+
import 'firebase/firestore';
3+
4+
const loadFirebase = () => {
5+
try {
6+
const config = {
7+
apiKey: process.env.FIREBASE_API_KEY,
8+
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
9+
databaseURL: process.env.FIREBASE_DATABASE,
10+
projectId: process.env.FIREBASE_PROJECT_ID,
11+
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
12+
messagingSenderId: process.env.FIREBASE_SENDER_ID,
13+
appId: process.env.FIREBASE_APP_ID
14+
};
15+
firebase.initializeApp(config);
16+
} catch (error) {
17+
if (!/already exist/.test(error.message)) {
18+
console.error('Firebase initialization error', error.stack);
19+
}
20+
}
21+
return firebase;
22+
};
23+
24+
export default loadFirebase;

‎next.config.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const webpack = require('webpack');
2+
require('dotenv').config();
3+
4+
module.exports = {
5+
webpack: config => {
6+
const env = Object.keys(process.env).reduce((acc, curr) => {
7+
acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
8+
return acc;
9+
}, {});
10+
11+
config.plugins.push(new webpack.DefinePlugin(env));
12+
13+
return config;
14+
}
15+
};

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
"start": "next start"
99
},
1010
"dependencies": {
11+
"dotenv": "^8.2.0",
12+
"firebase": "^7.6.2",
1113
"next": "9.1.7",
1214
"react": "16.12.0",
1315
"react-dom": "16.12.0"

‎pages/index.js‎

Lines changed: 112 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,118 @@
1-
import React from 'react'
2-
import Head from 'next/head'
3-
import Nav from '../components/nav'
1+
import React, { Component } from 'react';
2+
import Head from 'next/head';
3+
import Nav from '../components/nav';
44

5-
const Home = () => (
6-
<div>
7-
<Head>
8-
<title>Home</title>
9-
<link rel="icon" href="/favicon.ico" />
10-
</Head>
5+
// Firebase
6+
import loadFirebase from '../firebase.config';
117

12-
<Nav />
8+
class Home extends Component {
9+
static async getInitialProps() {
10+
const firebase = await loadFirebase();
11+
const db = firebase.firestore();
12+
let result = await new Promise((resolve, reject) => {
13+
db.collection('photos')
14+
.get()
15+
.then(snapshot => {
16+
let data = [];
17+
snapshot.forEach(doc => {
18+
data.push(
19+
Object.assign(
20+
{
21+
id: doc.id
22+
},
23+
doc.data()
24+
)
25+
);
26+
});
27+
resolve(data);
28+
})
29+
.catch(error => {
30+
reject([]);
31+
});
32+
});
33+
return { photos: result };
34+
}
1335

14-
<div className="hero">
15-
<h1 className="title">Welcome to Next.js!</h1>
16-
<p className="description">
17-
To get started, edit <code>pages/index.js</code> and save to reload.
18-
</p>
36+
render() {
37+
const photos = this.props.photos;
38+
console.log('photos', photos);
39+
return (
40+
<div>
41+
<Head>
42+
<title>Home</title>
43+
{/* <link rel='icon' href='/favicon.ico' /> */}
44+
</Head>
1945

20-
<div className="row">
21-
<a href="https://nextjs.org/docs" className="card">
22-
<h3>Documentation &rarr;</h3>
23-
<p>Learn more about Next.js in the documentation.</p>
24-
</a>
25-
<a href="https://nextjs.org/learn" className="card">
26-
<h3>Next.js Learn &rarr;</h3>
27-
<p>Learn about Next.js by following an interactive tutorial!</p>
28-
</a>
29-
<a
30-
href="https://github.com/zeit/next.js/tree/master/examples"
31-
className="card"
32-
>
33-
<h3>Examples &rarr;</h3>
34-
<p>Find other example boilerplates on the Next.js GitHub.</p>
35-
</a>
36-
</div>
37-
</div>
46+
<Nav />
47+
48+
<div className='hero'>
49+
<h1 className='title'>Welcome to Next.js with Firebase!</h1>
3850

39-
<style jsx>{`
40-
.hero {
41-
width: 100%;
42-
color: #333;
43-
}
44-
.title {
45-
margin: 0;
46-
width: 100%;
47-
padding-top: 80px;
48-
line-height: 1.15;
49-
font-size: 48px;
50-
}
51-
.title,
52-
.description {
53-
text-align: center;
54-
}
55-
.row {
56-
max-width: 880px;
57-
margin: 80px auto 40px;
58-
display: flex;
59-
flex-direction: row;
60-
justify-content: space-around;
61-
}
62-
.card {
63-
padding: 18px 18px 24px;
64-
width: 220px;
65-
text-align: left;
66-
text-decoration: none;
67-
color: #434343;
68-
border: 1px solid #9b9b9b;
69-
}
70-
.card:hover {
71-
border-color: #067df7;
72-
}
73-
.card h3 {
74-
margin: 0;
75-
color: #067df7;
76-
font-size: 18px;
77-
}
78-
.card p {
79-
margin: 0;
80-
padding: 12px 0 0;
81-
font-size: 13px;
82-
color: #333;
83-
}
84-
`}</style>
85-
</div>
86-
)
51+
<div className='row'>
52+
{photos.map(photo => (
53+
<div className='card' id='data' key={photo.id}>
54+
<img src={photo.url} alt='Photo' className='photo' />
55+
<h3>{photo.title}</h3>
56+
</div>
57+
))}
58+
</div>
59+
</div>
60+
61+
<style jsx>{`
62+
.hero {
63+
width: 100%;
64+
color: #333;
65+
}
66+
.title {
67+
margin: 0;
68+
width: 100%;
69+
padding-top: 80px;
70+
line-height: 1.15;
71+
font-size: 48px;
72+
}
73+
.title,
74+
.description {
75+
text-align: center;
76+
}
77+
.row {
78+
max-width: 880px;
79+
margin: 80px auto 40px;
80+
display: flex;
81+
flex-direction: row;
82+
justify-content: space-around;
83+
}
84+
.card {
85+
padding: 18px 18px 24px;
86+
width: 220px;
87+
text-align: left;
88+
text-decoration: none;
89+
color: #434343;
90+
border: 1px solid #9b9b9b;
91+
}
92+
.card:hover {
93+
border-color: #067df7;
94+
}
95+
.card h3 {
96+
margin: 0;
97+
color: #067df7;
98+
font-size: 18px;
99+
}
100+
.card p {
101+
margin: 0;
102+
padding: 12px 0 0;
103+
font-size: 13px;
104+
color: #333;
105+
}
106+
.photo {
107+
vertical-align: middle;
108+
width: 50px;
109+
height: 50px;
110+
border-radius: 50%;
111+
}
112+
`}</style>
113+
</div>
114+
);
115+
}
116+
}
87117

88-
export default Home
118+
export default Home;

0 commit comments

Comments
 (0)