2. The tools 🔨
Last updated
Was this helpful?
Last updated
Was this helpful?
For this workshop we'll use Angular and Firebase, but instead of installing a bunch of packages, tools, and editors, we'll use Stackblitz 💡
It's a code editor you don't need to install. It runs on the web browser and handles everything for you.
And when we say everything, we mean it. It gives you the editor, installs the packages for you, and even has a view where you can see the result of your app in real-time with live-reload (that's just fancy word to say the view updates when you write new code).
You'll head over to "START A NEW PROJECT" and click on Angular, it will create a new Angular project for you with all the dependencies. You'll see something like this:
On the left panel, you'll have the folder structure, you can click on any file there and it will open it for you.
On the middle panel, you'll see the opened file. That's your code, and every edit you do there we'll appear live in the right panel.
On the right panel, you'll have a real-time view of your app.
Go ahead, play with it, open the app.component.html and delete everything, replace it with this:
Then you'll see it updated in real-time in your right panel.
The goal for this workshop is to get you comfortable writing code against a cloud backend. We won't focus on styles but since we want everything to look nice we're giving you the default CSS for the app.
Go ahead and inside the app/app.component.css file paste the following code:
Once you're ready, move to the next step, where you'll learn how to connect Firebase with your Angular app.
The first thing you'll need to do is head over to where you'll see something like this:
