Nighthawk

Quick start

👉🏼 How to get started quickly?

Clone the starter repository, by running the following command:

Then just simply go to the project directory, install packages and run the server:

Feel free to configure any options in the app.component.ts file

The source code for the starter repository can be found here.

👉🏼 How to create a new project?

1. Install the Nighthawk Devkit by running the following command:

2. Import Nighthawk Devkit default styles file in your styles.scss file, like so:

3. Run a script that copies Nighthawk core assets into your public folder after, like so:

4. Wrap your <router-outlet /> (in app.component.ts) with a <main> tag, so it works with the page loader, like so:

5. Set the ViewContainerRef and bootstrap the Nighthawk application after view initialization, like so:

6. All done, you can now configure the page loader and style variables in your theme.scss file.

🫵🏼 Application configuration

OptionTypeDescriptionDefault valuePossible values
timezonestringTimezone to be used for date formattingtrue/false
databaseTimezonestringDatabase timezone to be used for date formattingtrue/false
pageLoaderEnabledbooleanShows the loader on initial page loadtruetrue/false
routeLoaderEnabledbooleanShows the loader when switching routesfalsetrue/false
pageLoaderTypeenum Specifies which type of loader to use for page/route loading (fallback) - 'bouncing-ball', 'bouncing-circles', 'bouncing-squares', 'fade-stagger-circles', 'fade-stagger-squares', 'gear-spinner', 'infinite-spinner', 'motion-blur-2', 'ripples', 'tube-spinner', 'tube-spinner'
pageLoaderSizenumberPage loader size in pixels16any number
pageLoaderCustomImagePathboolean | stringCustom loader image path, overrides pageLoaderType-any string
manualLoaderboolean Show loader until NighthawkBootstrapService::pageLoaded() is called falsetrue/false
minimumLoaderTimenumber Minimum time that the initial page loader should be visible for in milliseconds 1000500-infinite
fontsstring[] List of fonts used on the page to check before loader can finish []string[]