Official Cryptic Frontend

This is the official Cryptic frontend (available on Docker Hub). It has been created with the Angular framework using TypeScript, HTML and SASS.

Set up a development environment

NodeJS and NPM are required to compile and start the application. Refer to https://nodejs.org/de/ for download/installation instructions. To get help, run ng --help or check the Angular documentation / Angular CLI documentation.

Microsoft Visual Studio Code is the recommended editor. It provides a built-in debugger (see debugging) and integrates a git client.
WebStorm (paid or student license)

If you use VSCode:

Press Ctrl+Shift+P / CMD+Shift+P.
Type Task: Run Task to enter task mode.
Run install to install all required dependencies. On Linux/Mac OSX you must type in your password.
Execute the task run, which starts an development server listening on http://localhost:4200.

If you use the CLI:

Open the repository in the terminal.
Run npm install. Brew a fresh coffee, because this process can take some time.
Run ng serve or npm start to start a development server listening on http://localhost:4200.

If you use WebStorm:

Click File -> New -> Project from Version Control (Welcome Screen: Get from VSC)
Paste the GitHub repository url.
Press Shift twice. Run npm install.
Click the green play button in the top right to start the Angular CLI Server.

Note: Create a new component with the command ng generate component component-name (short: ng g c component-name).

Tasks

VSCode allows to create tasks, which 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). Learn more in this task tutorial.

Tasks:

build: compiles and builds the whole project. The result will be stored in dist/.
test: test your code with Karma.

Build & Test

ng build: compiles and builds the whole project. The result will be stored in dist/. For production mode use the --prod argument.
ng test: tests your code with Karma.
ng e2e: runs end-to-end tests with Protractor.

Check browser compatibility

To check browser-compatibility, use Can I use. You should test your code at minimum with one WebKit browser (Chrome, Chromium, Safari, or Opera) and one non-WebKit browser (Firefox or Microsoft Edge).

Note: CSS tricks delivers tips for CSS/SCSS (e.g. centering, flex-box, grid etc.).

Debugging