Working example: Link
-
Run command
firebase loginit will prompt a google login -
initaite your project run this command from your app's root dierctory
firebase init -
when you're ready, deploy your web app with this command
firebase deploy -
after deploying you will see your app at [projectName].web.app
-
Done ✅
-
Create account at https://firebase.google.com/.
-
Create new project at firebase. ([any_title]).
-
Disable authorization / add github pages domain to list of allowed domains [github_username].github.io.
-
Add firebase script to index.html according to Add Firebase to your web app.
-
Enable Realtime Database on the Firebase console.
// index.html
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
//main.js
// Initialize Firebase
var config = {
apiKey: "[api_key]",
authDomain: "[any_title].firebaseapp.com",
databaseURL: "https://[any_title].firebaseio.com",
storageBucket: "[any_title].appspot.com",
};
firebase.initializeApp(config);
var db = firebase.database();
- Simplest server for development:
npm install -g live-server
live-server- Create simple form:
<h4>CREATE/UPDATE review</h4>
<form id='reviewForm'>
<input type="hidden" id='hiddenId' />
<input type="text" id='fullName' />
<br/>
<br/>
<textarea id='message'></textarea>
<br/>
<br/>
<button type='submit'>Add/Update rewiew</button>
</form>
- Add handlers:
var reviewForm = document.getElementById('reviewForm');
var fullName = document.getElementById('fullName');
var message = document.getElementById('message');
var hiddenId = document.getElementById('hiddenId');
reviewForm.addEventListener('submit', (e) => {
e.preventDefault();
var id = hiddenId.value || Date.now()
db.ref('reviews/' + id).set({
fullName: fullName.value,
message: message.value
});
fullName.value = '';
message.value = '';
hiddenId.value = '';
})
- Check in console if data was created:
curl https://[any_title].firebaseio.com/reviews.json
- Add container to render reviews.
<h4>READ/DELETE reviews</h4>
<ul id='reviews'></ul>
- Add listener on firebase event 'child_added'.
var reviews = document.getElementById('reviews');
var reviewsRef = db.ref('/reviews');
reviewsRef.on('child_added', (data) => {
var li = document.createElement('li')
li.id = data.key;
li.innerHTML = reviewTemplate(data.val())
reviews.appendChild(li);
});
function reviewTemplate({fullName, message}) {
return `
<div class='fullName'>${fullName}</div>
<div class='message'>${message}</div>
`
}
- Add button Edit to template.
function reviewTemplate({fullName, message}) {
return `
<div class='fullName'>${fullName}</div>
<div class='message'>${message}</div>
<button class='edit'>Edit</button>
`
}
- Add handler on button Edit:
reviews.addEventListener('click', (e) => {
var reviewNode = e.target.parentNode
// UPDATE REVEIW
if (e.target.classList.contains('edit')) {
fullName.value = reviewNode.querySelector('.fullName').innerText;
message.value = reviewNode.querySelector('.message').innerText;
hiddenId.value = reviewNode.id;
}
})
- Add listener on firebase event 'child_changed'.
reviewsRef.on('child_changed', (data) => {
var reviewNode = document.getElementById(data.key);
reviewNode.innerHTML = reviewTemplate(data.val());
});
- Add button Delete to template.
function reviewTemplate({fullName, message}) {
return `
<div class='fullName'>${fullName}</div>
<div class='message'>${message}</div>
<button class='edit'>Edit</button>
<button class='delete'>Delete</button>
`
}
- Add handler on button Delete:
reviews.addEventListener('click', (e) => {
var reviewNode = e.target.parentNode
// UPDATE REVEIW
//...
// DELETE REVEIW
if (e.target.classList.contains('delete')) {
var id = reviewNode.id;
db.ref('reviews/' + id).remove();
}
})
- Add listener on firebase event 'child_removed'.
reviewsRef.on('child_removed', (data) => {
var reviewNode = document.getElementById(data.key);
reviewNode.parentNode.removeChild(reviewNode);
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent