rwa-triviaTrivia App - Real World Angular series

联合创作 · 2023-09-24 12:10

rwa-trivia app


See it in action:



This is part of building a new app for my series - Real World Angular @ https://blog.realworldfullstack.io/


Part 0: From zero to cli-ng


Part 1: Not another todo list app


Part 2: It's a Material world


Part 3: Form Formation


Part 4: State of my SPA


Part 5: Light my fire


Part 6: 3Rs ... Rules, Roles & Routes


Part 6.1: Upgrading to 4.0.0-rc.2


Part 7: Split my lazy loaded code


Part 8: Just Ahead of In Time


Part 9: Unit Testing


Part 9.1: More Unit Testing


Part 9.2: Even More Unit Tests


Part 10: Angular 4 upgrade


Part 11: Gameplay with Angular


Part 12: Cloud Functions for Firebase


Part 13: Elasticsearch on Google Cloud with Firebase functions


Part 14: Faceted search with Elasticsearch and Angular Material data-table


Part 15: Incorporate Material UI design into the app


Part 16: Migrating from Firebase to Firestore


Part 17: Bulk upload and User profile settings using firebase cloud storage


Part 18: Revisiting ngrx - Splitting store into feature modules, using action classes, selectors & router-store


Part 19: Ready Player Two - Two player game play, computing stats, dashboard and other features


Part 20: Angular, ngrx & cli version 6 - Upgrading Angular, cli, ngrx, material & RxJS to version 6


Part 21: Service Workers (Progressive Web App) with Angular


Part 22: Angular Testing with Protractor, Jasmine and Jest


Part 23: Server side rendering with Angular universal


Part 24: Angular workspace


Part 25-a: NativeScript, Angular and Firebase


Quick Installation Instructions



  • Install cli globally (version should match the one in package.json)


npm install -g @angular/cli@1.0.0



  • Install npm packages


npm install



  • Setup your firebase instance @ https://firebase.google.com/


  • Setup providers in Firebase Authentication


  • Use the firebase configuration information and plug it in src/environment.ts


  • Import src/db.json to your firebase database instance to get the initial set of test data


  • Run the application using ng serve



ng serve



  • Add yourself as a user using the application. Ensure you are added as a user in Authentication tab of firebase console.


  • Add your user id as an admin in the firebase database (admins need to be added manually) -



Set: users/<user id>/roles/admin: true



  • Use firebase-rules.json file to setup the firebase rules for your database


  • Serve the application again. Ensure you have admin privileges



ng serve


Deploy to Firebase Server



  • Install firebase tools globally


npm install -g firebase-tools



  • Authenticate with your firebase credentials


firebase login



  • Setup firebase hosting configuration for the application, using "dist" instead of public as the public folder name


firebase init



  • Create a build


ng build



  • Serve up the app using firebase server locally


firebase serve



  • Deploy Site to firebase


firebase deploy --only hosting



  • Setup firebase functions - creates functions folder and installs dependencies


firebase init



  • Deploy functions to firebase


npm run deploy-functions


Testing



  • Test the application using


ng test

浏览 19
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报