You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: ARCHITECTURE.md
+4-24Lines changed: 4 additions & 24 deletions
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,10 @@
1
1
# Architecture and design decisions
2
2
3
-
This document covers the overall architecture and design decisions made for this base template, and the associated [FullStacksDev](https://FullStacks.dev) Angular and Firebase tech stack.
3
+
This document covers the overall architecture and design decisions made for this base template, and the associated [FullStacksDev](https://fullstacks.dev/) Angular and Firebase tech stack.
4
4
5
5
> [!NOTE]
6
6
>
7
7
> Feel free to deviate from these as you wish. The base template is designed to be fairly flexible so you can adapt it to your needs. Though note that deviations may require more tinkering to get everything to work well together.
8
-
>
9
-
> If you're keen on the full _curated tech stack_ experience — where we build on top of this base template with more opinionated patterns, practices and approaches — then check out the [example apps](https://fullstacks.dev/stacks/angular-and-firebase).
10
8
11
9
> [!TIP]
12
10
>
@@ -124,10 +122,6 @@ This live project is your **production** environment — what your users will ac
124
122
125
123
The deploy script will deploy to this live project (details below).
126
124
127
-
> [!TIP]
128
-
>
129
-
> In the patterns example app (coming soon) we show you how to set up an intermediate staging environment, together with continuous deployment (CD), which requires a bit more set-up and configuration.
130
-
131
125
## How the deploy works
132
126
133
127
|**:brain: Design decision**|
@@ -148,7 +142,7 @@ The [`./deploy`](./deploy) script in the root of the project is a simple script
148
142
>
149
143
> This is designed to be run locally only (not as part of a CI/CD pipeline) as it benefits from your locally authenticated `firebase` CLI.
150
144
>
151
-
> For CI/CD you'd want to update the GitHub Actions pipeline to deploy to Firebase, which would involve setting up a service account and securely storing the credentials in GitHub Secrets so that the pipeline can authenticate with Firebase. We show you how to do this in the patterns example app (coming soon).
145
+
> For Continuous Deployment (CD) you'll want to update the GitHub Actions pipeline to deploy to Firebase, which would involve setting up a service account and securely storing the credentials in GitHub Secrets so that the pipeline can authenticate with Firebase. And also modifying the deploy script to make it non-interactive (or add a non-interactive mode via a flag).
152
146
153
147
> [!IMPORTANT]
154
148
>
@@ -244,7 +238,7 @@ This is a recommended folder structure based on [Nx's suggested library types](h
244
238
245
239
For features within the `shared` folder you should follow the same structure, except you probably won't need a `feature` subfolder within each shared feature since these are shared bits of code for use elsewhere.
246
240
247
-
As things grow you may need to adapt and tweak this structure (e.g. to add another level in the hierarchy) — we show you how to tackle this in the patterns example app (coming soon).
241
+
As things grow you may need to adapt and tweak this structure (e.g. to add another level in the hierarchy).
248
242
249
243
## [`app`] Static prerendered pages and dynamic pages only
250
244
@@ -374,7 +368,7 @@ State management is a bit of a hot topic in the Angular community, and there are
374
368
>
375
369
> The [NgRx docs](https://ngrx.io/guide/store/why) do a fantastic job of explaining why you would want to use a library like NgRx to manage state. The linked page covers the older (but still relevant) NgRx Store, but the principles are still applicable to SignalStore. Note that SignalStore is more lightweight and does not follow the Redux pattern, making it a bit simpler to use.
376
370
377
-
The base template uses SignalStore for the provided global auth store as well as the component-specific login flow store. We cover stores (and state management) in more detail in the [example apps](TODO).
371
+
The base template uses SignalStore for the provided global auth store as well as the component-specific login flow store.
378
372
379
373
## [`app`] Accessing Firebase services from the Angular app
380
374
@@ -460,10 +454,6 @@ We encourage use of [ng-mocks](https://ng-mocks.sudo.eu/) to simplify a lot of t
460
454
461
455
Most of the components, services, etc. provided in the base template have corresponding test suites.
462
456
463
-
> [!TIP]
464
-
>
465
-
> We cover testing in more detail in the [example apps](TODO).
466
-
467
457
## [`app`] Linting using ESLint and formatting using Prettier
468
458
469
459
|**:brain: Design decision**|
@@ -521,10 +511,6 @@ We do recommend splitting out the actual functions into separate files within th
521
511
>
522
512
> Make sure you go through the [Firebase Functions docs](https://firebase.google.com/docs/functions) to understand how to write functions and what you can do with them. Also make sure you understand the costs and operational model of Firebase Functions.
523
513
524
-
> [!TIP]
525
-
>
526
-
> We make use of Firebase Functions extensively in the patterns example app (coming soon).
527
-
528
514
## [`firebase`] Security rules
529
515
530
516
The base template comes with all security rules — for Firestore, Realtime Database and Storage — set to block all access by default. This is the most secure setting. As you build out your app you'll need to update these rules to allow the necessary access.
@@ -557,10 +543,6 @@ See the files within the [`firebase/test`](./firebase/test/) folder for the secu
557
543
>
558
544
> You can add any additional tests you want in this folder — Vitest will pick these up as long as they contain ".test." or ".spec." in their filename.
559
545
560
-
> [!TIP]
561
-
>
562
-
> We cover more Firebase testing, such as functions testing and integration testing, in the patterns example app (coming soon).
563
-
564
546
## [`firebase`] Linting using ESLint and formatting using Prettier
565
547
566
548
|**:brain: Design decision**|
@@ -586,5 +568,3 @@ Use the [Firebase Console](https://console.firebase.google.com/) to manage and m
586
568
> [!CAUTION]
587
569
>
588
570
> Firebase currently doesn't have a way to set a hard limit on costs, so you need to be vigilant about monitoring your usage and costs, and how you build features to make sure of Firebase services. Ultimately, you are responsible for the costs incurred by your use of services like Firebase.
589
-
>
590
-
> We cover some strategies for managing costs in the patterns example app (coming soon).
Copy file name to clipboardExpand all lines: README.md
+5-24Lines changed: 5 additions & 24 deletions
Original file line number
Diff line number
Diff line change
@@ -1,15 +1,11 @@
1
-
# The [FullStacksDev](https://fullstacks.dev) Angular and Firebase base template
1
+
# The [FullStacksDev](https://fullstacks.dev/) Angular and Firebase base template
2
2
3
3
Part of the curated [**FullStacksDev Angular and Firebase tech stack**](https://fullstacks.dev/#angular-and-firebase). For solo devs and very small teams.
4
4
5
5
An opinionated full-stack starting point for building a web app, using Angular and Firebase. Aiming to be lean and useful enough so you can hit the ground running and focus on stuff that matters. With enough room for you to extend as you need.
6
6
7
7
You are free to use and customize this template as you want — build a prototype, an internal tool, a side project, or the next big thing.
8
8
9
-
> [!IMPORTANT]
10
-
>
11
-
> This is currently in **beta**. We're actively working on it and will be making regular updates — expect big changes and improvements until it gets to a stable release. Feel free to give your feedback and suggestions via the Issues tab.
12
-
13
9
## Features
14
10
15
11
This template gives you an empty app skeleton, working end-to-end, with the following included:
@@ -280,7 +276,7 @@ Make sure to do all this in a branch, test locally and push to GitHub, then open
280
276
281
277
> [!IMPORTANT]
282
278
>
283
-
> This is like any other dependency update process and can sometimes require changes to your code. Especially with major version updates with breaking changes. We aim to keep the base template up-to-date with the latest versions of dependencies, and if these result in changes to the code we make a new release of the base template with specific instructions on what to do. See the next section for more on this.
279
+
> This is like any other dependency update process and can sometimes require changes to your code. Especially with major version updates with breaking changes. We aim to keep the base template up-to-date with the latest versions of dependencies, and if these result in changes to the code we make a new release of the base template with best-effort instructions on what to do. See the next section for more on this.
284
280
285
281
> [!TIP]
286
282
>
@@ -298,7 +294,7 @@ Make sure to do all this in a branch, test locally and push to GitHub, then open
298
294
>
299
295
> Also, we won't usually make releases for simple dependency updates, or content changes.
300
296
301
-
Whenever we make a new release of the base template we will provide detailed release notes with specific instructions on what to do to update your app. These will contain specific code changes you can make (some may be optional), and it will all depend on how much you have deviated from the base template, and what is relevant to your app.
297
+
Whenever we make a new release of the base template we will provide release notes with best-effort instructions on what to do to update your app. These may contain specific code changes you can make (some may be optional), and it will all depend on how much you have deviated from the base template, and what is relevant to your app.
302
298
303
299
> [!IMPORTANT]
304
300
>
@@ -314,10 +310,6 @@ We document the architecture and design decisions in [a separate doc](ARCHITECTU
314
310
315
311
Feel free to deviate from these as you wish. The base template is designed to be fairly flexible so you can adapt it to your needs.
316
312
317
-
> [!TIP]
318
-
>
319
-
> If you want to get the full "curated tech stack" experience check out the example apps for this tech stack (more info at the end of this doc).
320
-
321
313
## How-to guides
322
314
323
315
Here we document some how-to guides to help you get started with this base template.
@@ -464,20 +456,9 @@ Some email templates (e.g. for Authentication) are customizable in the [Firebase
464
456
465
457
## How we decide what goes into the base template
466
458
467
-
It's important that the base template is as lean and broadly useful as possible, whilst maintaining the opinionated approach to the tech stack, architecture and patterns that we are developing as part of the _curated tech stacks_ approach in [FullStacksDev](https://fullstacks.dev).
468
-
469
-
For this reason, we carefully consider what goes into the base template and err on the side of caution. New capabilities are only added to the base template when they are proven to be broadly useful and fit within the tech stack, by first applying them to real-world projects and the example apps.
470
-
471
-
## What next? Check out the example apps for this tech stack…
472
-
473
-
If you want to continue learning more about the [FullStacksDev Angular and Firebase tech stack](https://fullstacks.dev/stacks/angular-and-firebase) you can check out the premium example apps built using this template (requires a premium upgrade):
474
-
475
-
-[Simple example app](https://github.com/FullStacksDev/angular-and-firebase-simple-example-app)
476
-
- Patterns example app (coming soon)
477
-
478
-
These apps showcase the capabilities of the tech stack and give you an opinionated, pragmatic and in-depth learning experience. Each come with comprehensive documentation and learning content covering patterns, architecture decisions, design decisions, data models, tech stack capabilities, learnings and more.
459
+
It's important that the base template is as lean and broadly useful as possible, whilst maintaining the opinionated approach to the tech stack, architecture and patterns that we are developing as part of the _curated tech stacks_ approach in [FullStacksDev](https://fullstacks.dev/).
479
460
480
-
You can read more about the [purpose and specs of the example apps](https://fullstacks.dev/example-apps-and-patterns).
461
+
For this reason, we carefully consider what goes into the base template and err on the side of caution. New capabilities are only added to the base template when they are proven to be broadly useful and fit within the tech stack, by first applying them to real-world projects.
0 commit comments