Skip to content
The ultimate SPA boilerplate
TypeScript HTML CSS JavaScript
Branch: master
Clone or download
Latest commit 9bec6cc Jan 26, 2020


status stability contribution issues ngversion license

Live demo:

Wizdm is a boilerplate to kickstart serverless single page applications based on Angular and Firebase. Designed to help aspiring startuppers bootstrapping their side projects into functioning prototypes ready to launch.

Developers' notes

The project revolves around a web-app running on Angular + Angular Material + FlexLayout with a minimal clean interface to fit both desktop and mobile. Icon set comes from both Material and FontAwesome. Including Hammerjs to handle gestures for material components. Using Moment for time and locale management.


The app relies on several firebase services using Angularfire 2 to connect with:

  • Firebase Hosting to host the production demo app at
  • Firebase Auth for user authentication
  • Cloud Firestore realtime database for user's profile and content
  • Cloud Storage for user's images and files

Take a look on @wizdm/connect library abstracting the communication layer with all the firebase services.


The workspace has been converted from the original angular-cli to the monorepo format suggested by Nrwl using their Nx Angular Extension @nrwl/schematics. This means both the source code of the web application(s) and the external potentially shared libraries are stored in the same single repository under the /apps and /libs folders respectively.


The project uses a content resolver to dynamically load contents in different languages by pre-fetching localilzed content from 'assets/i18n'. The service is then injected into the components (pages) needing to get localized contents making sure it is always fully loaded and available to the target container prior to get initialized.

At first start, the resolver checks the authenticated user language preferences falling back detecting the browser language when unavailable (aka the user is not logged in). This provides the useful side effect of preventing the initial page from flickering between unlogged and logged-in statuses while an already logged-in user is loading the app from scratch.

The navigation system is used to switch among languages, so, from the user perspective, it looks like having multiple apps in different languages (e.g. for English or for Italian).

The localized content is provided as an observable granting smooth transitions while switching languages without the need of reloading the full page nor the app.

The same service is used as a guard for both activating/deactivating pages while routing.

Development server

Run ng serve for a dev server. Navigate to https://localhost:4200/. The app will automatically reload if you change any of the source files. Be aware that --ssl option is enabled by default using local ssl/server.crt and ssl/servr.key files.

Code scaffolding

Run ng generate component component-name to generate a new component to be added to the default project (apps/widm) or specify --project=project-name otherwise. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

To generate a new library, run ng generate lib library-name that will be automatically added to libs.


Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Run firebase deploy to upload the last build.


Source code is now mantained on GitHub.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

You can’t perform that action at this time.