Skip to content

docs: add project layout ref page #6151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
agnes512 merged 1 commit into from
Aug 26, 2020
Merged

docs: add project layout ref page #6151

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 129 additions & 0 deletions docs/site/Loopback-application-layout-reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
---
lang: en
title: 'LoopBack 4 Application Layout'
keywords: LoopBack 4.0, LoopBack 4, Node.js, TypeScript
sidebar: lb4_sidebar
permalink: /doc/en/lb4/Loopback-application-layout.html
---

A LoopBack 4 application that was created by the command
[`lb4 application`](Application-generator.md) has files and directories in the
_application root directory_. Within this directory, the standard LB4
application structure has these sub-directories:

- `src` - TypeScript source code and configuration files.
- `public` - Client side assets (JavaScript, HTML, and CSS files) for the home
page.

{% include tip.html content="By LoopBack naming conventions, artifacts such as models are grouped under their sub-directories. Also, with LoopBack artifact generators, they create class names in CamelCase and file names are in snake-case. For example, if you create a model named `MyUserModel` with the model generator, it creates the file `my-user.model.ts` under `src/models` directory. See [Naming Convention](Command-line-interface.md#naming-convention) for more information.
" %}

The following table uses files in the
[`Todo` example](https://github.com/strongloop/loopback-next/tree/master/examples/todo)
as code references.

<table style="font-size: 90%;">
<thead>
<tr>
<th width="200">File or directory</th>
<th>Description</th>
<th width="180">How to create/access</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="3" style="text-align: center; background-color: #bfbfbf;">Top-level application directory</th>
</tr>
<tr>
<td><a href="https://github.com/strongloop/loopback-next/blob/master/examples/todo/package.json"><code>package.json</code></a></td>
<td>
Standard npm package specification. Use it to set up package dependencies, among other things. This file must be in the application root directory. See <a href="https://docs.npmjs.com/files/package.json"><code>npm-package.json</code> for information</a>.
</td>
<td>N/A</td>
</tr>
<tr>
<td><code>README.md</code></td>
<td>Stub file for internal documentation.</td>
<td>N/A</td>
</tr>
<tr>
<td><a href="https://github.com/strongloop/loopback-next/blob/master/examples/todo/tsconfig.json"><code>tsconfig.json</code></a></td>
<td>
A file specifies the root files and the compiler options required to compile the project. See <a href="https://www.typescriptlang.org/docs/handbook/tsconfig-json.html"><code>tsconfig.json</code> for information</a>.
</td>
<td>N/A</td>
</tr>
<tr>
<td><code>dist/</code></td>
<td>Contains transpiled JavaScript code generated by <code>npm run build</code>. Notice that <code>npm run build</code> does incremental build. A full build can be achieved using <code>npm run clean && npm run build</code>.</td>
<td><code>npm run build</code></td>
</tr>
<tr>
<th colspan="3" style="text-align: center; background-color: #bfbfbf;">/src directory - Node application files</th>
</tr>
<tr>
<td><a href="https://github.com/strongloop/loopback-next/tree/master/examples/todo/src/controllers"><code>controllers/</code></a></td>
<td>A sub-directory for all controller files. See <a href="Controller.html">Controller</a>.</td>
<td><a href="https://loopback.io/doc/en/lb4/Controller-generator.html"><code>lb4 controller</code></a></td>
</tr>
<tr>
<td><a href="https://github.com/strongloop/loopback-next/tree/master/examples/todo/src/datasources"><code>datasources/</code></a></td>
<td>A sub-directory for all dataSource files. See <a href="DataSource.html">DataSource</a>.</td>
<td><a href="https://loopback.io/doc/en/lb4/DataSource-generator.html"><code>lb4 datasource</code></a></td>
</tr>
<tr>
<td><a href="https://github.com/strongloop/loopback-next/tree/master/examples/todo/src/models"><code>models/</code></a></td>
<td>A sub-directory for all model files. See <a href="Model.html">Model</a>.</td>
<td><a href="https://loopback.io/doc/en/lb4/Model-generator.html"><code>lb4 model</code></a></td>
</tr>
<tr>
<td><a href="https://github.com/strongloop/loopback-next/tree/master/examples/todo/src/repositories"><code>repositories/</code></a></td>
<td>A sub-directory for all repository files. See <a href="Repository.html">Repository</a>.</td>
<td><a href="https://loopback.io/doc/en/lb4/Repository-generator.html"><code>lb4 repository</code></a></td>
</tr>
<tr>
<td><a href="https://github.com/strongloop/loopback-next/tree/master/examples/todo/src/__tests__"><code>__test__/</code></a></td>
<td>A directory for all tests.</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><a href="https://github.com/strongloop/loopback-next/blob/master/examples/todo/src/application.ts"><code>application.ts</code></a></td>
<td>Main application program file. A central registry file for inversion of control and dependency injection. See <a href="Application.html">Application</a>.</td>
<td>N/A</td>
</tr>
<tr>
<td><a href="https://github.com/strongloop/loopback-next/blob/master/examples/todo/src/index.ts"><code>index.ts</code></a></td>
<td>A script that initializes and runs the application.</td>
<td>N/A</td>
</tr>
<tr>
<td><a href="https://github.com/strongloop/loopback-next/blob/master/examples/todo/src/migrate.ts"><code>migrate.ts</code></a></td>
<td>A script to run database migration. See <a href="Database-migrations.html">Database Migrations</a>.</td>
<td><code>npm run build && npm run migrate</code></td>
</tr>
<tr>
<td><a href="https://github.com/strongloop/loopback-next/blob/master/examples/todo/src/openapi-spec.ts"><code>openapi-spec.ts</code></a></td>
<td>A script that exports the OpenAPI spec from the application.</td>
<td><code>npm run build && npm run openapi-spec</code></td>
</tr>
<tr>
<td><a href="https://github.com/strongloop/loopback-next/blob/master/examples/todo/src/sequence.ts"><code>sequence.ts</code></a></td>
<td>A file where to define a series of steps to control how a specific type of `Server`
responds to incoming requests. See <a href="Sequence.html">Sequence</a>.</td>
<td>N/A</td>
</tr>
<tr>
<th colspan="3" style="text-align: center; background-color: #bfbfbf;">/public directory - Client application files</th>
</tr>
<tr>
<td><a href="https://github.com/strongloop/loopback-next/blob/master/examples/todo/public/index.html"><code>index.html</code></a></td>
<td>An example LoopBack front page.</td>
<td>N/A</td>
</tr>
<tr>
<td>Others</td>
<td>Add your HTML, CSS, client JavaScript files.</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
4 changes: 4 additions & 0 deletions docs/site/sidebars/lb4_sidebar.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -604,6 +604,10 @@ children:
output: 'web, pdf'
children:

- title: 'LoopBack 4 Application Layout'
url: Loopback-application-layout.html
output: 'web, pdf'

- title: 'Examples'
url: Examples.html
output: 'web, pdf'
Expand Down