File structure

The created application will have the following file structure:

As you can see, the root folder is quite busy with a few folders but a lot of configuration files. The most interesting among them is:

• src: This is the source folder which holds the main application source and the test source files.
• webpack: This folder holds all the Webpack client-side build configurations for development, production, and testing.
• gradle: This folder has Gradle wrapper and additional Gradle build scripts which will be used by the main Gradle build file (JHipster provides a similar wrapper if Maven is chosen as well).
• build.gradle: This is our Gradle build file which specifies our applications build lifecycle. It also has the server side dependencies specified. The build uses properties defined in the gradle.properties file alongside it. You can also find an executable named gradlew (gradlew.bat for Windows), which lets you use Gradle without having to install it.
• .yo-rc.json: This is the configuration file for JHipster. This file stores the options we selected during app creation, and it is used for app regeneration and upgrades.
• package.json: This is the NPM configuration file which specifies all your client-side dependencies, client-side build dependencies, and tasks. 
• tsconfig.json: This is the configuration for Typescript. There is also tsconfig-aot.json for Angular AOT (Ahead-of-Time) compilation.
• tslint.json: This is the lint configuration for Typescript.

Install and configure Typescript and the Tslint plugin for your IDE or editor to make the most out of Typescript.

Now, let's take a look at the source folder. It has a main folder and a test folder, which holds the main app source code and tests the source code accordingly. The folder structure is as follows:

• main:
  • docker: Holds the Dockerfile for the application and Docker configurations for the selected options
  • java: Holds the main Java source code for the application
  • resources: Holds Spring Boot configuration files, Liquibase changelogs, and static resources like server-side i18n files and email templates used by the application
  • webapp: Holds the Angular application source code and the client side static content like images, stylesheets, i18n files, and so on
• test:
  • java: Holds the unit and integration test source for the server side
  • javascript: Holds the Karma unit test specs and Protractor end-to-end specs for the client side application
  • resources: Holds Spring configuration files and static resources like server-side i18n files and email templates used by the application for test