Skip to content

Commit b8d77cb

Browse files
stb13579pwizlaConvly
authored
typescript programmatic use (#980)
* add project structure link * revise programmatic use * Add table for directories and rework explanations * Fix email documentation that prevented hot reload * update code block * Update mixed codebase example * add note * rework programmatic content * rework combined JS + TS programmatic section * a link for public directory docs * rework programmatic section * remove non-TypeScript examples * remove utils * fixed compile method * revert directories code block * remove content * edit strapi.compile text and add code example back for this afternoon * Streamline the content of programmatic sections * reword `strapi.compile()` 1st sentence * Update docs/developer-docs/latest/development/typescript.md Co-authored-by: Jean-Sébastien Herbaux <jean-sebastien.herbaux@epitech.eu> * Update docs/developer-docs/latest/development/typescript.md Co-authored-by: Jean-Sébastien Herbaux <jean-sebastien.herbaux@epitech.eu> * Update docs/developer-docs/latest/development/typescript.md Co-authored-by: Jean-Sébastien Herbaux <jean-sebastien.herbaux@epitech.eu> * Update docs/developer-docs/latest/development/typescript.md Co-authored-by: Jean-Sébastien Herbaux <jean-sebastien.herbaux@epitech.eu> * remove "install" from yarn install command * fix yarn and npm commands * add alternate text idea * add generate typings * update generate typings section * update CLI commands for TS generate typings * add schema typings callout to models documentation * clean up writing * Simplify cross-link wording * Simplify cross-link wording * Rename CLI command * Improve CLI docs: Add flags and remove TypeScript-only note * Improve rendering of CLI flags documentation * Add link to CLI docs * Fix typo + remove parenthesis Co-authored-by: Jean-Sébastien Herbaux <jean-sebastien.herbaux@epitech.eu> * Improve wording on CLI Co-authored-by: Jean-Sébastien Herbaux <jean-sebastien.herbaux@epitech.eu> Co-authored-by: Pierre Wizla <pwizla+github@gmail.com> Co-authored-by: Jean-Sébastien Herbaux <jean-sebastien.herbaux@epitech.eu> Co-authored-by: Pierre Wizla <pwizla@users.noreply.github.com>
1 parent cae479a commit b8d77cb

File tree

4 files changed

+55
-93
lines changed

4 files changed

+55
-93
lines changed

docs/developer-docs/latest/developer-resources/cli/CLI.md

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ canonicalUrl: https://docs.strapi.io/developer-docs/latest/developer-resources/c
66

77
# Command Line Interface (CLI)
88

9-
Strapi comes with a full featured Command Line Interface (CLI) which lets you scaffold and manage your project in seconds.
9+
Strapi comes with a full featured Command Line Interface (CLI) which lets you scaffold and manage your project in seconds.
1010

1111
::: note
1212
It is recommended to install Strapi locally only, which requires prefixing all of the following `strapi` commands with the package manager used for the project setup (e.g `npm run strapi help` or `yarn strapi help`) or a dedicated node package executor (e.g. `npx strapi help`).
@@ -230,7 +230,7 @@ strapi generate
230230

231231
## strapi templates:generate
232232

233-
Create a template from the current strapi project
233+
Create a template from the current Strapi project.
234234

235235
```bash
236236
strapi templates:generate <path>
@@ -241,6 +241,23 @@ strapi templates:generate <path>
241241

242242
Example: `strapi templates:generate ../strapi-template-name` will copy the required files and folders to a `template` directory inside `../strapi-template-name`
243243

244+
## strapi ts:generate-types
245+
246+
Generate [TypeScript](/developer-docs/latest/development/typescript.md) typings for the project schemas.
247+
248+
```sh
249+
strapi ts:generate-types
250+
```
251+
252+
* **strapi ts:generate-types --verbose**<br/>
253+
Generate typings with the verbose mode enabled, displaying a detailed table of the generated schemas.
254+
* **strapi ts:generate-types --silent** or **strapi ts:generate-types -s**<br/>
255+
Generate typings with the silent mode enabled, completely removing all the logs in the terminal.
256+
* **strapi ts:generate-types --out-dir &#60;path&#62;** or **strapi ts:generate-types -o &#60;path&#62;**<br/>
257+
Generate typings specifying the output directory in which the file will be created.
258+
* **strapi ts:generate-types --file &#60;filename&#62;** or **strapi ts:generate-types -f &#60;filename&#62;**<br/>
259+
Generate typings specifiying the name of the file to contain the types declarations.
260+
244261
## strapi routes:list
245262

246263
Display a list of all the available [routes](/developer-docs/latest/development/backend-customization/routes.md).

docs/developer-docs/latest/development/backend-customization/models.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ The content-types has the following models files:
3434

3535
These models files are stored in `./src/api/[api-name]/content-types/[content-type-name]/`, and any JavaScript or JSON file found in these folders will be loaded as a content-type's model (see [project structure](/developer-docs/latest/setup-deployment-guides/file-structure.md)).
3636

37+
:::note
38+
In [TypeScript](/developer-docs/latest/development/typescript.md)-enabled projects schema typings can be generated using the `ts:generate-types` command.
39+
:::
40+
3741
### Components
3842

3943
Component models can't be created with CLI tools. Use the [Content-type Builder](/user-docs/latest/content-types-builder/introduction-to-content-types-builder.md) or create them manually.

docs/developer-docs/latest/development/typescript.md

Lines changed: 31 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -67,126 +67,68 @@ To experience TypeScript-based autocomplete while developing Strapi applications
6767
3. Choose `runLifecyclesfunction` from the list.
6868
4. When the `strapi.runLifecyclesFunctions` method is added, a list of available lifecycle types (i.e. `register`, `bootstrap` and `destroy`) are returned by the code editor. Use keyboard arrows to choose one of the lifecycles and the code will autocomplete.
6969

70-
## Develop a plugin using TypeScript
71-
72-
New plugins can be generated following the [plugins development documentation](/developer-docs/latest/development/plugins-development.md). There are 2 important distinctions for TypeScript applications:
73-
74-
- After creating the plugin, run `yarn install` or `npm run install` in the plugin directory `src/admin/plugins/[my-plugin-name]` to install the dependencies for the plugin.
75-
- Run `yarn build` or `npm run build` in the plugin directory `src/admin/plugins/[my-plugin-name]` to build the admin panel including the plugin.
76-
77-
::: note
78-
It is not necessary to repeat the `yarn install` or `npm run install` command after the initial installation. The `yarn build` or `npm run build` command is necessary to implement any plugin development that affects the admin panel.
79-
:::
80-
81-
## Start Strapi programmatically
82-
83-
Instantiating Strapi programmatically in a TypeScript project requires additional configurations to load everything correctly. The primary difference for TypeScript programmatic use is that the codebase and compiled code are stored in separate directories, whereas the same directory is used to read and write in native JavaScript.
84-
85-
### Understand programatic use
86-
87-
When instantiating Strapi programmatically using the default export of `@strapi/strapi`, different parameters such as the `app` directory and the `dist` directory can be passed. The `app` directory is the project root directory and `dist` is a subdirectory of `app`. The `dist` directory represents the compiled project, with the same directory structure as the `app` directory, and the `app` directory represents the codebase (TypeScript or JavaScript). The main differences are:
70+
## Generate typings for project schemas
8871

89-
- When using the Content-type Builder to create, update, delete content types (or any other service that creates files), Strapi uses the `app` folder to write the files.
90-
- When reading what content types exist on the system Strapi reads the `dist` folder.
91-
- When the `develop` command is used only the `app` directory is watched. In TypeScript, a compilation will be triggered when a change is detected in the `app` directory and the output will be written to the `dist` directory.
72+
To generate typings for your project schemas use the [`ts:generate-types` CLI command](/developer-docs/latest/developer-resources/cli/CLI.md#strapi-ts-generate-types). The `ts:generate-types` command creates the file `schemas.d.ts`, at the project root, which stores the schema typings. The optional `--verbose` flag returns a detailed table of the generated schemas.
9273

93-
::: note
94-
The public folder is considered static and thus ignores the `app` and `dist` directories.
95-
:::
74+
To use `ts:generate-types`run the following code in a terminal at the project root:
9675

97-
The default values for the `app` and `dist` directories are transformed and assigned using one of the following options:
98-
99-
```js
100-
101-
const resolveWorkingDirectories = opts => {
102-
const cwd = process.cwd(); // Neither the appDir or distDir are passed. Both the appDir and distDir are set to process.cwd().
103-
104-
const appDir = opts.appDir ? path.resolve(cwd, opts.appDir) : cwd; // Only appDir is defined distDir matches appDir.
105-
106-
const distDir = opts.distDir ? path.resolve(cwd, opts.distDir) : appDir; // Only distDir is defined, appDir is set to process.cwd().
76+
<code-group>
77+
<code-block title="NPM">
10778

108-
return { appDir, distDir };
109-
}
79+
```sh
80+
npm run strapi ts:generate-types --verbose #optional flag
11081
11182
```
11283

113-
For example, if the compiled code is stored in a separate directory (eg: when using TypeScript) Strapi should be instantiated with a specific `distDir` value which matches the path of your build directory.
114-
115-
::: caution
116-
Do not set the `appDir` to the `build` or `dist` directory as it could cause issues when the app tries to write some files.
117-
:::
118-
119-
### Start Strapi programmatically examples
120-
121-
Start Strapi for JavaScript applications:
84+
</code-block>
12285

123-
```js
124-
const strapi = require('@strapi/strapi');
86+
<code-block title="YARN">
12587

126-
strapi();
127-
// appDir => process.cwd() | distDir => process.cwd()
88+
```sh
89+
yarn strapi ts:generate-types --verbose #optional flag
12890
12991
```
13092

131-
Start Strapi using a custom `dist` directory:
93+
</code-block>
94+
</code-group>
13295

133-
```js
134-
const strapi = require('@strapi/strapi');
96+
## Develop a plugin using TypeScript
13597

136-
strapi({ distDir: './dist' });
137-
// appDir => process.cwd() | distDir => './dist'
138-
```
98+
New plugins can be generated following the [plugins development documentation](/developer-docs/latest/development/plugins-development.md). There are 2 important distinctions for TypeScript applications:
13999

140-
Start Strapi using custom `app` and `dist` directories:
100+
- After creating the plugin, run `yarn` or `npm install` in the plugin directory `src/admin/plugins/[my-plugin-name]` to install the dependencies for the plugin.
101+
- Run `yarn build` or `npm run build` in the plugin directory `src/admin/plugins/[my-plugin-name]` to build the admin panel including the plugin.
141102

142-
```js
103+
::: note
104+
It is not necessary to repeat the `yarn` or `npm install` command after the initial installation. The `yarn build` or `npm run build` command is necessary to implement any plugin development that affects the admin panel.
105+
:::
143106

144-
const strapi = require('@strapi/strapi');
107+
## Start Strapi programmatically
145108

146-
strapi({ distDir: './dist' });
147-
// appDir => process.cwd() | distDir => './dist'
109+
To start Strapi programmatically in a TypeScript project the Strapi instance requires the compiled code location. This section describes how to set and indicate the compiled code directory.
148110

149-
```
111+
### Use the `strapi()` factory
150112

151-
Start Strapi using a custom `app` directory:
113+
Strapi can be run programmatically by using the `strapi()` factory. Since the code of TypeScript projects is compiled in a specific directory, the parameter `distDir` should be passed to the factory to indicate where the compiled code should be read:
152114

153115
```js
116+
// path: ./src/plugins/<plugin-name>/server/index.js
154117
155118
const strapi = require('@strapi/strapi');
156119
157-
strapi({ appDir: './app' });
158-
// appDir => './app' | distDir => './app'
159-
120+
const app = await strapi({ distDir: './dist' });
160121
```
161122

162-
### Use both JavaScript and TypeScript codebases when starting Strapi programmatically
123+
### Use the `strapi.compile()` function
163124

164-
Adding the package `@strapi/typescript-utils` allows for both JavaScript and TypeScript codebases to be used programatically. A common use is for creating command line interface tools or developing a plugin. Examples of how to incorporate both code bases:
125+
The `strapi.compile()` function should be mostly used for developing tools that need to start a Strapi instance and detect whether the project includes TypeScript code. `strapi.compile()` automatically detects the project language. If the project code contains any TypeScript code, `strapi.compile()` compiles the code and returns a context with specific values for the directories that Strapi requires:
165126

166127
```js
167-
const tsUtils = require('@strapi/typescript-utils');
168-
const strapi = require('@strapi/strapi');
169-
170-
const appDir = process.cwd();
171-
172-
// Automatically detect if this is a Typescript project:
173-
const isTSProject = await tsUtils.isUsingTypeScript(appDir);
174128

175-
// Resolve the directory containing the compilation output:
176-
const outDir = await tsUtils.resolveOutDir(appDir);
177-
178-
if (isTSProject) {
179-
// If inside a Typescript project, compile the TypeScript code in the appDir:
180-
await tsUtils.compile(appDir, {
181-
watch: false,
182-
configOptions: { options: { incremental: true } },
183-
});
184-
}
185-
186-
// If inside a Typescript project, use a custom dist directory, otherwise set it to appDir value:
187-
const distDir = isTSProject ? outDir : appDir;
129+
const strapi = require('@strapi/strapi');
188130

189-
// Start the app by providing the app and dist directories:
190-
const app = await strapi({ appDir, distDir }).load();
131+
const appContext = await strapi.compile();
132+
const app = await strapi(appContext);
191133

192134
```

docs/developer-docs/latest/plugins/email.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ When using community providers, pass the full package name to the `provider` key
107107
Here is an example of a configuration made for the provider [@strapi/provider-email-sendgrid](https://www.npmjs.com/package/@strapi/provider-email-sendgrid).
108108

109109
**Path —** ``.
110+
110111
<code-group>
111112

112113
<code-block title="JAVASCRIPT">
@@ -162,8 +163,6 @@ export default = ({ env }) => ({
162163

163164
</code-group>
164165

165-
166-
167166
::: tip
168167
If you're using a different provider depending on your environment, you can specify the correct configuration in `./config/env/${yourEnvironment}/plugins.js`. More info here: [Environments](/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.md)
169168
:::

0 commit comments

Comments
 (0)