Angular frontend application for reservation system Shongo. Created by Michal Drobňák.
- Node 14
- npm
- Clone the repository.
- Run
npm install
, npm will take care of the rest.
- Never use
ng serve
ornpm start
for production. Instead build the app withnpm run build-prod
and deploy it on a server. Production build creates both czech and english versions of the app in thedist
folder. - You can run the app in watch mode with
npm start
or in production mode withnpm run start-prod
.
You can configure app's environment in src/environments
. Modify environment.ts for development build or environment.prod.ts for production build. Here you can set REST api's host and port, or specify whether HTTPS should be used.
Resources need to be configured before they can be used on the frontend. They won't be accesible without proper configuration.
- Add the new technology to Technology enumerable in
src/app/shared/models/enums/technology.enum.ts
. Use the same value as will be returned from REST api. - Add technology to supportedTechnologies array in virtual room configuration file
src/config/virtual-room-resource.config.ts
. - Add a human readable name to technologyNameMap also in virtual room configuration file. Optionally tag the name with
$localize
to support i18n, it will be available for translation after generating translation file. Make sure to use back ticks on a string when using$localize
otherwise it won't work.
- Add tag to supportedTags array in physical resource configuration file
src/config/physical-resource.config.ts
. - Add a human readable name to tagNameMap also in physical resource configuration file. You can use
$localize
as described in virtual resource configuration.
Use npm start
to run development server, app will refresh automatically on file updates.
App uses Husky and Lint-staged to run tests and eslint before every commit.
Application needs an Oauth2 authentication server and backend implementation to function properly. Here we describe technologies we use for development, you can however substitute them with other technologies of your choice.
Mockoon - link
We use Mockoon to mock backend's REST API, feel free to use our Mockoon environment (check readme for usage).
mock-oauth2-server - link
We use mock-oauth2-server for mocking Oauth2 authentication server. It can be easily installed with docker (tutorial in link). When running the image make sure to set host to localhost
and port mapping like this docker run -p 8080:8080 -h localhost $IMAGE_NAME
.
App uses Jasmine and Karma to run unit tests. You can run tests with npm run test
.
App is configured to support czech translation. You can create a translation like this:
- Use
npm run extract-i18n
to generate translation file. Generated file can be found insrc/locales
folder under the namemessages.xlf
. - Copy the
messages.xlf
file inside thelocales
folder and name itmessages.cs.xlf
. - Create translations, tutorial here.
- You can now build czech version of the app with
ng run shongo-frontend:build:cs
and english version withng run shongo-frontend:build:en
(you need Angular CLI to use ng).