DEV Community

Cover image for thinking to myself when setting up a project boilerplate
jan paul
jan paul

Posted on

thinking to myself when setting up a project boilerplate

this is a thinking out loud to myself.

how to prepare a SPA in different frameworks/libraries but also in angular

  1. ng new create-react-app vue cli
  2. enable router
  3. enable i18n strategy
  4. enable store / reduxy stuff
  5. bind router into store
  6. ensure your API with smthng like or curls / postmany stugff
  • test GET / POST/ UPDATE
  • brief moment of think: do we need to auth? if so handle auth token with like setLocalStorage
  1. create an entityfolder for selected endpoint, (if angular, also create a module here!!)
  2. create model/type declartion (only if typescript, which we prefer) of entities
  3. create service to consume any http-client (eg axios) // consider auth process
  • test GET / POST/ UPDATE loadAll(), oneOneById(), postNew(), update(), delete() for selected entity
  1. test servicemethods in bare minimum but routable component, most liekly in lifecycle method of given framework
  2. from now on we would need to distungiush from framework to framework/library which should be more articles,

in angular -which we atm work with- we go with:

  1. create routeresolvers
  2. prepare actions / reducer / selectors from ngrx, naivly bind http service into the loadaction (we like ngrx-entity here)
  3. access store in template and trigger action for udf to ensure actions work
  4. create effect for entity -> loadAllEntity -> http-service -> dispatch loadAllEntitySucess, bind result into store
  5. we forget about, register router, effect, store, store-router in module, considering it silently given from now on, knowing forRoot() and forFeature().
  6. remove 3 from template
  7. consume loadEntity from action in routeresolver -> which should also will trigger the effect -> which will trigger the http -> which will trigger store binding
  8. bind observable/subscriber to store in template list view
  9. prepare route for single entity
  10. access route, write resolver that gains single entity from store / write actions..... from here on
  11. rinse repaet

quod erat demonstrandum.

Discussion (0)