<%#
 Copyright 2013-2024 the original author or authors from the JHipster project.

 This file is part of the JHipster project, see https://www.jhipster.tech/
 for more information.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-%>
<%#
 This is a fragment file, it will be merged into to root template if available.
 EJS fragments will process % delimiter tags in template and & delimiter tags in the merge process.
-%>
<&_
 // Register sections and max allowed fragments, 0 for unlimited.
 fragments.registerSections({
   customCliSection: 1,
 });
_&>
<%_
let clientPackageMngrName = 'Npm';
let clientPackageMngrWrapper = useNpmWrapper ? './npmw' : clientPackageManager;
let clientPackageMngrAddGlobal = 'install -g';
let clientPackageMngrAdd = 'install --save --save-exact';
let clientPackageMngrAddDev = 'install --save-dev --save-exact';
-%>
<&_ if (fragment.developmentSection) { -&>
<%_ if (useNpmWrapper) { _%>
The build system will install automatically the recommended version of Node and <%= clientPackageManager %>.

We provide a wrapper to launch <%= clientPackageManager %>.
<%_ } else { _%>
<%_ if (true) { _%>
在构建此项目之前，您必须在计算机上安装并配置以下依赖项：
<%_ } else { _%>
Before you can build this project, you must install and configure the following dependencies on your machine:
<%_ } _%>

<%_ if (true) { _%>
1. [Node.js](https://nodejs.org/): 我们使用 Node 来运行开发 Web 服务器并构建项目。
根据您的系统，您可以从源代码安装 Node，也可以将 Node 安装为预打包的捆绑包。
<%_ } else { _%>
1. [Node.js](https://nodejs.org/): Node is used to run a development web server and build the project.
   Depending on your system, you can install Node either from source or as a pre-packaged bundle.
<%_ } _%>

  <%_ if (true) { _%>
安装 Node 后，您应该能够运行以下命令来安装开发工具。
  <%_ } else { _%>
After installing Node, you should be able to run the following command to install development tools.
  <%_ } _%>
<%_ } _%>
<%_ if (true) { _%>
仅当 [package.json](package.json) 中的依赖项发生更改时，您才需要再次运行此命令。
<%_ } else { _%>
You will only need to run this command when dependencies change in [package.json](package.json).
<%_ } _%>
```
<%= clientPackageMngrWrapper %> install
```
<%_ if (true) { _%>
我们使用 <%= clientPackageManager %> 脚本和 [Vite][] 作为我们的构建系统。
<%_ } else { _%>
We use <%= clientPackageManager %> scripts and <&- fragments.customCliSection(' ') &>[Webpack][] as our build system.
<%_ } _%>

  <%_ if (cacheProviderRedis || cacheProviderHazelcast || cacheProviderMemcached) { _%>
If you are using <%= cacheProvider %> as a cache, you will have to launch a cache server.
To start your cache server, run:

```
docker compose -f src/main/docker/<%= cacheProviderHazelcast?'hazelcast-management-center':cacheProvider %>.yml up -d
```

    <%_ if (cacheProviderRedis) { _%>

The cache can also be turned off by adding to the application yaml:

```yaml
spring:
    cache:
        type: none
```

See [here](https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-caching.html#boot-features-caching-provider-none) for details.

**WARNING**: If you're using the second level Hibernate cache and disabling the Spring cache, you have to disable the second level Hibernate cache as well since they are using
the same CacheManager.
    <%_ } _%>
  <%_ } _%>

<%_ if (true) { _%>
在两个单独的终端中运行以下命令，以创建更好的开发体验，其中当硬盘上的文件发生更改时您的浏览器自动刷新。
<%_ } else { _%>
Run the following commands in two separate terminals to create a blissful development experience where your browser
auto-refreshes when files change on your hard drive.
<%_ } _%>

```
  <%_ if (buildToolMaven) { _%>
./mvnw
  <%_ } _%>
  <%_ if (buildToolGradle) { _%>
./gradlew -x webapp
  <%_ } _%>
<%= clientPackageMngrWrapper %> start
```

<%_ if (true) { _%>
<%= clientPackageMngrName %> 还用于管理此应用程序中使用的 CSS 和 JavaScript 依赖项。 您可以通过以下方式升级依赖项
在 [package.json](package.json) 中指定较新版本。 您还可以运行`<%= clientPackageManager %> update`和`<%= clientPackageManager %> install`来管理依赖项。
在任何命令上添加`help`标志以查看如何使用它。 例如，`pnpm help update`。
<%_ } else { _%>
<%= clientPackageMngrName %> is also used to manage CSS and JavaScript dependencies used in this application. You can upgrade dependencies by
specifying a newer version in [package.json](package.json). You can also run `<%= clientPackageMngrWrapper %> update` and `<%= clientPackageMngrWrapper %> install` to manage dependencies.
Add the `help` flag on any command to see how you can use it. For example, `<%= clientPackageMngrWrapper %> help update`.
<%_ } _%>

<%_ if (true) { _%>
`<%= clientPackageMngrWrapper %> run` 命令将列出可用于该项目运行的所有脚本。
<%_ } else { _%>
The `<%= clientPackageMngrWrapper %> run` command will list all the scripts available to run for this project.
<%_ } _%>
<%_ if (false) { _%>

### <% if (true) { %>PWA支持<% } else { %>PWA Support<% } %>

<%_ if (true) { _%>
BegCode 附带 PWA（渐进式 Web 应用程序）支持，并且默认情况下处于关闭状态。 PWA 的主要组件之一是 Service Worker。
<%_ } else { _%>
BegCode ships with PWA (Progressive Web App) support, and it's turned off by default. One of the main components of a PWA is a service worker.
<%_ } _%>

  <%_ if (!clientFrameworkAngular) { _%>
    <%_ if (true) { _%>
默认情况下，Service Worker 初始化代码被注释掉。 要启用它，请在`front/src/index.html`中取消注释以下代码：
    <%_ } else { _%>
The service worker initialization code is commented out by default. To enable it, uncomment the following code in `<%= clientSrcDir %>index.html`:
    <%_ } _%>
```html
<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker
        .register('./service-worker.js')
        .then(function() { console.log('Service Worker Registered'); });
    }
</script>
```

Note: [Workbox](https://developers.google.com/web/tools/workbox/) powers JHipster's service worker. It dynamically generates the `service-worker.js` file.
  <%_ } _%>
  <%_ if (clientFrameworkAngular) { _%>
The service worker initialization code is disabled by default. To enable it, uncomment the following code in `<%= clientSrcDir %>app/app.config.ts`:

```typescript
ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),
```
<%_ } _%>
<%_ } _%>
<%_ if (false) { _%>

### <% if (true) { %>依赖管理<% } else { %>Managing dependencies<% } %>

<%_ if (true) { _%>
例如，要将 [Leaflet][] 库添加为应用程序的运行时依赖项，您可以运行以下命令：
<%_ } else { _%>
For example, to add [Leaflet][] library as a runtime dependency of your application, you would run following command:
<%_ } _%>

```
<%= clientPackageMngrWrapper %> <%= clientPackageMngrAdd %> leaflet
```

To benefit from TypeScript type definitions from [DefinitelyTyped][] repository in development, you would run following command:

```
<%= clientPackageMngrWrapper %> <%= clientPackageMngrAddDev %> @types/leaflet
```

Then you would import the JS and CSS files specified in library's installation instructions so that [Webpack][] knows about them:
  <%_ if (clientFrameworkAngular) { _%>
Edit [<%= clientSrcDir %>app/app.config.ts](<%= clientSrcDir %>app/app.config.ts) file:

```
import 'leaflet/dist/leaflet.js';
```

Edit [<%= clientSrcDir %>content/scss/vendor.scss](<%= clientSrcDir %>content/scss/vendor.scss) file:

```
@import 'leaflet/dist/leaflet.css';
```

  <%_ } _%>
<%_ if (true) { _%>
注意：Leaflet 还需要做一些其他事情，我们在此不做详细介绍。

有关如何使用 JHipster 进行开发的更多说明，请查看[Using JHipster in development][]
<%_ } else { _%>
Note: There are still a few other things remaining to do for Leaflet that we won't detail here.

For further instructions on how to develop with JHipster, have a look at [Using JHipster in development][].
<%_ } _%>
<%_ } _%>

<%_ if (microfrontend && false) { -%>
  <%_ if (true) { _%>
### 开发微前端
  <%_ } else { _%>
### Developing Microfrontend
  <%_ } _%>

Microservices doesn't contain every required backend feature to allow microfrontends to run alone.
You must start a pre-built gateway version or from source.

Start gateway from source:

```
cd gateway
<%= clientPackageMngrWrapper %> run docker:db:up # start database if necessary
<%= clientPackageMngrWrapper %> run docker:others:up # start service discovery and authentication service if necessary
<%= clientPackageMngrWrapper %> run app:start # alias for ./(mvnw|gradlew)
```

Microfrontend's `build-watch` script is configured to watch and compile microfrontend's sources and synchronizes with gateway's frontend.
Start it using:

```
cd microfrontend
<%= clientPackageMngrWrapper %> run docker:db:up # start database if necessary
<%= clientPackageMngrWrapper %> run build-watch
```

It's possible to run microfrontend's frontend standalone using:

```
cd microfrontend
<%= clientPackageMngrWrapper %> run docker:db:up # start database if necessary
<%= clientPackageMngrWrapper %> watch # alias for `npm start` and `npm run backend:start` in parallel
```

<%_ } -%>

<&_ } -&>
<&_ if (fragment.testingSection) { -&>
### Client tests

Unit tests are run by [Jest][]. They're located in [<%= clientTestDir %>](<%= clientTestDir %>) and can be run with:

```
<%= clientPackageMngrWrapper %> test
```

  <%_ if (cypressTests) { _%>
UI end-to-end tests are powered by [Cypress][]. They're located in [<%= clientTestDir %>cypress](<%= clientTestDir %>cypress)
and can be run by starting Spring Boot in one terminal (`<% if (buildToolMaven) { %>./mvnw spring-boot:run<% } else { %>./gradlew bootRun<% } %>`) and running the tests (`<%= clientPackageMngrWrapper %> run e2e`) in a second one.

#### Lighthouse audits

You can execute automated [Lighthouse audits](https://developers.google.com/web/tools/lighthouse/) with [cypress-audit](https://github.com/mfrachet/cypress-audit) by running `<%= clientPackageMngrWrapper %> run e2e:cypress:audits`.
You should only run the audits when your application is packaged with the production profile.
The lighthouse report is created in <% if (buildToolMaven) { %>`target/cypress/lhreport.html`<% } else { %>`build/cypress/lhreport.html`<% } %>
  <%_ } _%>
<&_ } -&>
<&_ if (fragment.referenceSection) { -&>
[Webpack]: https://webpack.github.io/
[BrowserSync]: https://www.browsersync.io/
[Jest]: https://facebook.github.io/jest/
  <%_ if (cypressTests) { _%>
[Cypress]: https://www.cypress.io/
  <%_ } -%>
[Leaflet]: https://leafletjs.com/
[DefinitelyTyped]: https://definitelytyped.org/
<&_ } -&>
<&- fragments.render() -&>
