The ScienceMakers Digital Video Archive is a web-based single page application (SPA) built with Angular, TypeScript, and Angular Flex Layout for responsive layout.
Run npm install in the root of the project directory to install the necessary build tools and depedencies.
NOTE: All of the build and deployment configurations have changed as of December 11, 2020. Please read carefully.
The application build is handled by Angular CLI, refer to the documentation for further details.
IMPORTANT: As of December 2020 the development environment requires a locally hosted API
All hosted versions of the Digital Archive API require authentication and are inaccessible to a locally hosted client, therefore the default development configuration requires the API to be locally hosted at https://localhost:5001/api. This is the default debug/development configuration for the .NET API.
There are two primary configuration environments as follows:
| Environment | Build Command | Build Target | Client URL | Configured serviceBase | Configured mediaBase |
|---|---|---|---|---|---|
| (default) | ng serve |
(development) | http://localhost:4200/ | https://localhost:5001/api | https://daproductionstorage.blob.core.windows.net/media/ |
| production | ng build --configuration=production |
sm-production-www | https://sm.thehistorymakers.org | api/ | https://daproductionstorage.blob.core.windows.net/media/ |
NOTES
- Continuous Deployment (CD) is not currently available; production archive must be updated manually.
- For authentication to work properly, the Angular application must be bundled and deployed together with the .NET API. This .NET API should be locked down to "ScienceMakers only" for this ScienceMakers Digital Archive.
- Deployment is handled by Visual Studio 2019, refer to the digital-archive-api documentation for publishing specifics.
We primarily develop using Chrome and as a result, it is the browser that is best supported. We recommend using Chrome for the best user experience.
We actively test the latest versions of the Chrome and Safari browsers, with lesser testing of Edge and Firefox.
- IE support was retired in 2020.
Font sizing has been implemented using rems and ems. For more information see: https://css-tricks.com/rems-ems/.
- Angular - Web application framework (version 15, from late 2022) (Angular Material is no longer needed)
- Angular Flex Layout - Used throughout to provide for responsive layout of elements
- Angular CLI - A command line interface for Angular
- angular-hmr - Angular Hot Module Replacement. Used by default when when running
ng serve.