This is the official frontend of Cryptic.
Advice for Developers
This web application is created with the Angular framework. The Framework uses the languages TypeScript (JavaScript with typing), HTML and SCSS. A fundamental understanding of these languages is important to understand the code. SCSS or Sass is a CSS preprocessor. You can find a tutorial here.
The framework also uses a CLI (Comand Line Interface). It helps creating and managing Angular projects fast.
Editor
The project of course works with any editor, but we recommend the editor VSCode by Microsoft. Visual Studio Code also has a build-in debugger and a helpful git support.
Setting up an Development Environment
For compiling and starting of the application NodeJS and NPM are needed. Downloads and installation advice can be found on https://nodejs.org/de/.
With VSCode
After the installation of Node an NPM open the repository in VSCode. Press Ctrl+Shift+P / CMD+Shift+P to open the command palette. Type Task: Run Task to enter task mode. The task install installs all dependencies needed.
! On Unix-based systems such as Linux or OS X you have to type in your password.
After this you can execute the task run. It starts an development server listening on http://localhost:4200.
With the CLI
After the installation process open the repository in the terminal and run npm install. Make yourself a coffee, because this process can take a bit time.
To start a development server on http://localhost:4200 run ng serve. This is also possible with npm start.
VSCode
Tasks
Visual Studio Code offers the possibility to create tasks. Tasks can be very helpful to manage big projects without a CLI. Tasks can be executed via the command palette (open with Ctrl+Shift+P / CMD+Shift+P).
Build
The task build compiles and builds the whole project. The result will be stored in dist/.
Testing
Via the task test code can be tested with Karma.
End-to-End Testing
End-to-end tests can be made with e2e and Protractor.
Debugging
VSCode comes with a build-in debugger. It's already configured. The only thing you have to do is running the taks run, switching to the debug section and starting Run.
! For the debugger the extension Debugger for Chrome must be installed.
The Angular CLI
The Angualar CLI helps you managing Angular projects.
Generating Components
The command ng generate component component-name (short: ng g c component-name) creates a new Component. Details can be found in the Angular documentation.
Build
ng build compiles and builds the whole project. The result will be stored in dist/. For production mode use the --prod argument.
Testing
Via ng test code can be tested with Karma.
End-to-End Testing
End-to-end tests can be made with ng e2e and Protractor.
Appendix
Advice for browser compatibility
Every contributor should test his code minimum with one WebKit browser, such as Chrome, Chromium, Safari and Opera, and a non-WebKit browser, such as Firefox, Internet Explorer or Edge.
Before you use very new or old things in your code it's recommendet to use "Can I use". With this tool you can test the compatibility of your code.
CSS tricks delivers tipps for CSS/SCSS (e.g. centering, flex-box, grid etc.).
Further help
The Angular documentation is very helpful. ng --help or the Angular CLI documentation can help with the CLI
Docker-Hub
This frontend is online on docker-hub (https://hub.docker.com/r/useto/cryptic-frontend/).