Welcome to the Admin Tool repository 👋
👉 You can view a Github Pages demo HERE 👈
Since all the data is mocked, you can enter any email + any password in order to log into the application
Example login details:
- 📧 Email: user@example.com
- 🙈 Password: 123456
- This is a demo Angular application.
- All API requests are mocked.
- All API responses are faked using faker library
After you have cloned this repo, you need to install all npm dependencies. In this repo, we use yarn as our npm client. It is an improved version of npm. If you don't have yarn follow this guide https://yarnpkg.com/lang/en/docs/install.
Now that you have yarn, run the following command:
$ yarn installThis is optional, but it is useful to the angular CLI installed globally. You can install it the following way:
$ yarn global add @angular/cliGiven you have the angular CLI setup globally, you can run the next command to launch a dev server that watches your changes.
$ yarn startPrimarily used by backend developers.
$ yarn start:localWe currently have ESLint setup. It's a useful tool to highlight potential errors in your code. You can run it manually this way:
$ yarn lintOur branch convention is to start with the ticket number, then append task and then your branch name, like this:
<ticket-number>/task/awesome-feature
EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
To use EditorConfig with Visual Studio Code, you will need to install a (EditorConfig for VS Code)[https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig].
JetBrains WebStorm comes bundled with native support for EditorConfig. Everything should work.
See official (Editor Integration)[https://editorconfig.org/#download] document.
Prettier is an opinionated code formatter.
To use Prettier with Visual Studio Code, you will need to install a (Prettier - Code formatter)[https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode].
See the (WebStorm setup guide)[https://prettier.io/docs/en/webstorm.html].
See official (Editor Integration)[https://prettier.io/docs/en/editors.html] document.
ESLint is a tool for identifying and reporting patterns found in ECMAScript/JavaScript code to make code more consistent and avoid bugs. In many ways, it is similar to JSLint and JSHint with a few exceptions:
To use ESLint with Visual Studio Code, you will need to install a (ESLint)[https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint].
To use ESLint with JetBrains WebStorm, you will need to install a (ESLint)[https://plugins.jetbrains.com/plugin/7494-eslint].
See official (Editor Integration)[https://eslint.org/docs/user-guide/integrations] document.
A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
To use stylelint with Visual Studio Code, you will need to install a (stylelint)[https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint].
Version 2016.3 onwards has built-in support for stylelint. You can find more details (here)[https://blog.jetbrains.com/webstorm/2016/09/webstorm-2016-3-eap-163-4830-stylelint-usages-for-default-exports-and-more/].
See official (Editor Integration)[https://stylelint.io/user-guide/integrations/editor] document.
Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
- Developer Ready: A comprehensive JavaScript testing solution. Works out of the box for most JavaScript projects.
- Instant Feedback: Fast, interactive watch mode only runs test files related to changed files.
- Snapshot Testing: Capture snapshots of large objects to simplify testing and to analyze how they change over time.
To use Jest with Visual Studio Code, you will need to install a (Jest)[https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest].
JetBrains WebStorm comes bundled with native support for run Jest tests and see the results right in the IDE. Everything should work.
Project recommended extensions are defined here .vscode/extensions.json. VS Code prompts a user to install the recommended extensions when a project is opened for the first time.
And to enable format on save with EditorConfig and Prettier, please include the following settings in VS Code:
"editor.formatOnSave": true,
To enable Auto-Fix on save for ESLint and Stylelint, please include the following settings in VS Code:
"editor.codeActionsOnSave": {
"source.fixAll": true
},
To open your user and workspace settings, use the following VS Code menu command:
- On Windows/Linux - File > Preferences > Settings
- On macOS - Code > Preferences > Settings
To configure project structure, right-click srcfolder in the Project tool window, select Mark Directory as from the context menu, and then select Resource Root category.
And double-check if the following settings are enabled:
- Languages and Frameworks > JavaScript > Code Quality Tools > ESLint - Automatic ESLint configuration and Run eslint --fix on save
- Languages and Frameworks > JavaScript > Prettier - Run for files:
{**/*,*}.{ts,scss,html,json,md}and On save - Languages and Frameworks > Style Sheets > Stylelint - Enable
To open project Settings Preferences dialog, use the following WebStorm menu command:
- On Windows/Linux - File > Settings
- On macOS - WebStorm > Preferences
The index.ts itself is a file that re-exports selected exports of other inner files. In this way, we'll rollup exports from several modules (features, sections, groups, etc.) into a single, convenient place.
To reduce long or multiple imports, please always use index.ts to export all inner children used in parent.
The browser doesn't trust our certificate by default, since we generate certificate manually. We have to make sure the browser trusts our certificate, so we need to install it on our local machine.
Please ensure that you have disabled the following experimental flag in Chrome: Allow invalid certificates for resources loaded from localhost.
URL: chrome://flags/#allow-insecure-localhost
If you're using any other browser, please double-check similar settings.
Important to say that Chrome had deprecated support for commonName matching in certificates, in effect, requiring a subjectAltName since January 2017. You can found more details.
- Double click on the certificate server.crt
- Select your desired keychain (login should suffice)
- Add the certificate
- Open Keychain Access if it isn't already open
- Select the keychain you chose earlier
- You should see the certificate localhost in the list
- Double click on the certificate
- Expand Trust
- Select the option Always Trust in When using this certificate
- Close the certificate window
- Double click on the certificate server.crt
- Click on the button Install Certificate ...
- Please select whether you want to store it on user level or machine level
- Click Next
- Select Place all certificates in the following store
- Click Browse
- Select Trusted Root Certification Authorities
- Click Ok
- Click Next
- Click Finish
- If you get a prompt, click Yes
- Copy server.crt to dir
/usr/local/share/ca-certificates/ - Use command:
sudo cp ssl/server.crt /usr/local/share/ca-certificates/localhost.crt - Update the CA store:
sudo update-ca-certificates
After these steps, the new CA is known by system utilities like curl and get (you can confirm this step with the command: curl https://localhost:4201). Unfortunately, this does not affect most web browsers like Google Chrome or Mozilla Firefox in the Linux environment.
- Convert server.crt to
localhost.pem - Use command:
openssl x509 -in server.crt -out localhost.pem - Copy
localhost.pemto dir/etc/pki/ca-trust/source/anchors/ - Use command:
sudo cp localhost.pem /etc/pki/ca-trust/source/anchors/ - Update the CA store:
sudo update-ca-trust
After these steps, the new CA is known by system utilities like curl and get (you can confirm this step with the command: curl https://localhost:4201). Unfortunately, this does not affect most web browsers like Google Chrome or Mozilla Firefox in the Linux environment.
Depending on the operating system, Chrome uses the system-wide certificates (macOS, Windows) or certificates of its own scope (Linux).
In case it uses its own certificates, you can add a root certificate to Chrome by executing the following steps.
In Chrome settings (chrome://settings)[chrome://settings], search for certificates and click on Manage Certificates.
Here you can import the localhost.pem file at the Trusted Root Certification Authorities tab.
Under the Authorities tab, click Import to start the certificate installation process.
After these steps, the localhost certificate is known by the system. And you should be able to run project from local with HTTPS.
If you still see Your connection is not private message in Chrome (or a similar statement in other browsers), please double-check your local documentation how you can install and trust server.crt self-signed certificate in your specific system (the system that is not listed above).
We included a unit test generator for components, directives, services, pipes, and functions, which will generate way more than half of your unit test.
Usage example: $ yarn test:generate src/app/my.component.ts
This will generate a unit test here: src/app/my.component.spec.ts
Additional notes:
- we're using
*.spec.tsinstead of*.test.tsas a file extension for unit tests - please use Jasmine/Mocha API (syntax):
describe(),it(), etc. in unit tests - please remove
// tslint:disable - in some cases you will need to add
StoreModule.forRoot({}) asyncis deprecated, please usewaitForAsync()TestBed.getis deprecated, please useTestBed.inject. This new method has the same behavior but is type-safe
To see generated examples, please take a look at the examples directory: https://github.com/allenhwkim/ngentest/tree/master/examples
Development Tools
Documentation