Firebase is an interface on top of Google Cloud we can use to demo creating a basic app.
-
Visit https://firebase.google.com and sign into your account.
-
Click "Go to Console"
-
Click "Create a project"
-
Enter a name -- we're going to use "DSC Demo". Accept the terms and continue.
-
Step through the onboarding -- you can skip Analytics.
-
Select "Hosting" from the dropdown on the left under project overview.
-
Click "Get started"
-
Make sure you have npm and NodeJS installed (on macOS homebrew it's
brew install nodejs-- check out npmjs.org for other platforms) -
Follow the instructions -- run
npm install -g firebase-tools(this first one you may need to prefix withsudo) andfirebase login, you may need to click a link and log in. -
Create and
cdto a folder you're going to use (I didmkdir -p ~/Desktop/dscdemo && cd ~/Desktop/dscdemo) -
Run
firebase init -
Don't just press enter! Press the down arrow until you're over "Hosting: Configure files for Firebase Hosting", press "space" to toggle it, and then press enter to submit
-
Go down to "Use an existing project" and press enter
-
Select your DSC Demo project, probably the top one and press enter
-
For the rest of the hosting setup questions, use the defaults and just press enter until you see "Firebase initialization complete!"
-
Type "firebase deploy" into the command line.
-
You should see a "Hosting URL" show up -- congrats, that's your deployed website! That's a public link anyone can access.
-
Open the directory in your favorite editor, I like Visual Studio Code
-
Open up
public/index.htmland delete everything in the file. -
Here's a very basic template we can use to render our page:
<html>
<body>
<div class="container">
<h1>To-Do List App</h1>
<div class="items"></div>
</div>
<script>
</script>
</body>
</html>- Underneath our items div, let's add some UI to add an item to the todo list:
<input
type="text"
id="text"
class="item-input"
placeholder="Add an item..."
/>
<button id="add" class="add-item">Add Item</button>- Next, let's do some logic inside of our script to store the state and render it:
let state = [];
function renderItems() {
let itemsHTML = "";
state.forEach(function (item, i) {
itemsHTML += `
<div class="item">
<button onClick="deleteItem(${i})"class="item-delete">×</button>
<span class="item-text">${item}</span>
</div>`;
});
document.querySelector(".items").innerHTML = itemsHTML;
}- Ok great, our page is rendering our items (remember we have to call renderItems each time we change it). Let's add support to delete our item:
function deleteItem(index) {
state.splice(index, 1); // take it out of the state
renderItems(); // re-render the page
}- Add a handler to handle creation. OK - last part, let's add a handler for when we click the button
document
.querySelector(".add-item")
.addEventListener("click", function () {
let item = document.querySelector(".item-input");
state.push(item.value); // Add to the array
item.value = ""; // Reset the input
renderItems(); // Re-render the page
});- And... some styling for fun, just below
<html>(have fun with this, make it your own):
<head>
<style>
body {
font-family: sans-serif;
font-size: 14px;
background-color: black;
color: white;
}
button {
background-color: #212529;
border: none;
color: white;
margin: 5px;
}
span,
div {
color: white;
}
.container {
width: 100%;
max-width: 800px;
margin: 0 auto;
margin-top: 40px;
}
</style>
</head>-
Run
firebase deploy -
The Hosting URL is now a public link to your app hosted in the cloud! Huzzhah!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent