Skip to content

Commit 50a6046

Browse files
authored
Merge pull request #10053 from ahmed-negm/development
Improve Model SDK tutorial
2 parents 6e56e90 + 050111e commit 50a6046

2 files changed

Lines changed: 47 additions & 53 deletions

File tree

content/en/docs/apidocs-mxsdk/mxsdk/sdk-howtos/creating-your-first-script.md

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -45,15 +45,15 @@ After setting up all the prerequisites, you can start writing a first script tha
4545
main().catch(console.error);
4646
```
4747

48-
Don't forget to [set up your personal access token](/apidocs-mxsdk/mxsdk/set-up-your-pat/) before executing the script.
48+
Do not forget to [set up your personal access token](/apidocs-mxsdk/mxsdk/set-up-your-pat/) before executing the script.
4949

5050
{{% alert color="warning" %}}
5151
Working copy creation is a resource-intensive process. Consider reusing previously-created ones by invoking `app.getOnlineWorkingCopy(workingCopyId)`. All working copies are automatically deleted after 24 hours.
5252
{{% /alert %}}
5353

5454
### Code Explanation
5555

56-
Here are some explanations about the script:
56+
Here are some explanations about the script.
5757

5858
```ts
5959
const client = new MendixPlatformClient();
@@ -92,24 +92,20 @@ Once you are done with the model changes, you can flush the changes to make sure
9292

9393
## Compiling and Running the Script
9494

95-
1. Compile the script with the TypeScript compiler into JavaScript using the following command:
95+
1. Add the following section to `package.json`:
9696

97-
```bash
98-
$ tsc
97+
```json
98+
"scripts": {
99+
"start": "tsc && node script.js"
100+
}
99101
```
100102

101-
A file named `script.js` should appear (or, if you named the original TypeScript file for example, `app.ts`, then it would be named `app.js`.
102-
103-
The TypeScript compiler will execute in a single run to compile all files configured in *tsconfig.json*. While developing your script, it can be practical to have the compiler immediately run once you make changes to your code. Use the `--watch` flag for `tsc` to monitor the files configured in the *tsconfig.json* file for changes and immediately run the compiler when you save the file:
104-
105-
```bash
106-
$ tsc --watch
107-
```
103+
This command first compiles your TypeScript code into JavaScript using the TypeScript compiler. After the compilation, a file named `script.js` is generated. The script will then be executed using Node.js.
108104

109-
2. Run the script with `node` to see the results:
105+
2. Run the script to see the results:
110106

111107
```text
112-
$ node script.js
108+
$ npm run start
113109
Creating new app 'NewApp-1637595970665'...
114110
Successfully created app with id '64760e41-9507-42d3-99da-3950454dd40a'
115111
Creating temporary working copy for branch 'main'...
@@ -118,7 +114,7 @@ Once you are done with the model changes, you can flush the changes to make sure
118114
Successfully committed the working copy with id 'c70b078e-a323-42a7-b95d-7407a0e611d3' to branch 'main'
119115
```
120116

121-
Note that the steps for app creation and committing to the Team Server can take some time, so please be patient.
117+
The steps for app creation and committing to the Team Server can take some time. Please be patient.
122118

123119
## Next Step
124120

content/en/docs/apidocs-mxsdk/mxsdk/sdk-howtos/setting-up-your-development-environment.md

Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -19,45 +19,32 @@ Set up a new `node` project and install the dependencies using the following ste
1919
$ mkdir my-app-generator
2020
$ cd my-app-generator
2121
$ npm init --yes
22-
$ npm install -g typescript
2322
$ npm install mendixmodelsdk mendixplatformsdk --save
24-
$ tsc --init --target es2020
23+
$ npm install typescript@~4.6.2 @types/node@^22 --save-dev
2524
```
2625

26+
You can now proceed directly to step 6 in the [Setting Up a Working Directory for Your Script](#setting-working-directory) section to configure TypeScript.
27+
2728
## Setting Up Your Development Tools {#setting}
2829

2930
To set up your development tools, follow these steps:
3031

31-
1. Install the latest LTS version of [Node.js](https://nodejs.org/). If you need to download it, you can find it on [this page](https://nodejs.org/en/download/releases/).
32+
1. Download and install the latest LTS version of [Node.js](https://nodejs.org/en/download).
3233

3334
2. Open a terminal (on Windows, [Command Prompt](https://docs.microsoft.com/en-us/windows-server/administration/windows-commands/windows-commands)) and run the following command:
3435

3536
```bash
3637
$ node --version
37-
v18.20.8
38-
```
39-
40-
For Debian-based Linux distributions such as Ubuntu, please refer to [NodeSource Node.js Binary Distributions](https://github.com/nodesource/distributions#user-content-installation-instructions) to properly set up your apt-get sources.
41-
42-
In the rest of the how-tos, in blocks such as the above, lines starting with a `$` represent commands to type into a terminal. Sometimes a line follows without a $, represents output of the command.
43-
44-
3. Install [Visual Studio Code](https://code.visualstudio.com/) (not to be confused with Visual Studio), a text editor/IDE with good support for [TypeScript](https://www.typescriptlang.org/). Make sure you have a recent version (v1.11.0+); check the version you are using through Help > About when you have Code opened.
45-
4. Install TypeScript 4.6.2 or higher with [`npm`](https://www.npmjs.com/) (or [`yarn`](https://yarnpkg.com/)), Node.js's package manager:
46-
47-
```bash
48-
$ npm install -g typescript
38+
v22.15.0
4939
```
5040

51-
5. Use the following command to check the TypeScript compiler version on your PATH:
41+
For Debian-based Linux distributions such as Ubuntu, refer to [NodeSource Node.js Binary Distributions](https://github.com/nodesource/distributions#user-content-installation-instructions) to properly set up your apt-get sources.
5242

53-
```bash
54-
$ tsc --version
55-
Version 4.6.2 (or higher)
56-
```
43+
In the rest of the how-tos, in code blocks such as the above, lines starting with a `$` represent the commands you should type into a terminal. Lines without `$` immediately following a command represent the output produced by that command.
5744

58-
If the version number is much lower, it could be that you also have an outdated TypeScript SDK on your system, left over from a previous installation. You can either uninstall the old TypeScript SDK, or bypass it by removing the old TypeScript SDK from your system's PATH environment variable.
45+
3. Install [Visual Studio Code](https://code.visualstudio.com/) (VS Code: not to be confused with Visual Studio), a text editor/IDE with good support for [TypeScript](https://www.typescriptlang.org/). Make sure you have a recent version (v1.11.0+). Check the version you are using through **Help > About** when you have VS Code opened.
5946

60-
## Setting Up a Working Directory for Your Script
47+
## Setting Up a Working Directory for Your Script {#setting-working-directory}
6148

6249
To set up a working directory for your script, follow these steps:
6350

@@ -71,50 +58,61 @@ To set up a working directory for your script, follow these steps:
7158

7259
Visual Studio Code, other than Visual Studio, works with directories instead of project files.
7360

74-
2. Start **Visual Studio Code** and open the directory you just created. You can open a new instance of Code from the command line with the directory you want to open as first argument. For example, if your current working directory in your terminal is the directory in which all your project files live, use the following command to open Code:
61+
2. Start Visual Studio Code and open the directory you just created. You can open a new instance of VS Code from the command line with the directory you want to open as first argument. For example, if your current working directory in your terminal is the directory in which all your project files live, use the following command to open VS Code:
7562

7663
```bash
7764
$ code .
7865
```
7966

80-
3. Add `mendixmodelsdk`, and `mendixplatformsdk` as dependencies.
67+
3. Add `mendixmodelsdk` and `mendixplatformsdk` as dependencies.
8168
Dependencies are stored in the `node_modules` directory (which will be automatically created by `npm` if necessary). Open the *package.json* you just created. Add a [`dependencies` block](https://docs.npmjs.com/files/package.json#dependencies) that looks like this:
8269

8370
```json
8471
"dependencies": {
85-
"mendixmodelsdk": "^4.56.0",
86-
"mendixplatformsdk": "^5.0.0"
72+
"mendixmodelsdk": "^4.102.0",
73+
"mendixplatformsdk": "^5.2.0"
8774
}
8875
```
8976

90-
When a new major version of the Mendix SDK is released (as in, 1.0.0 to 2.0.0) and you run `npm update` in your project folder, the `^` in front of the version number makes sure that the installed version of the SDK will not be upgraded automatically. Only minor and patch releases (as in, 1.1.1) of the SDK will be automatically upgraded; otherwise, your script could inadvertently be broken. You may, of course, edit the dependency by hand yourself.
77+
When a new major version of the Mendix SDK is released (as in, 1.0.0 to 2.0.0) and you run `npm update` in your project folder, the `^` in front of the version number makes sure that the installed version of the SDK is not upgraded automatically. Only minor and patch releases (as in, 1.1.1) of the SDK will be automatically upgraded; otherwise, your script could inadvertently be broken. You may, of course, edit the dependency yourself.
78+
79+
4. Add `typescript` and `@types/node` as dev dependencies.
80+
Packages like TypeScript, testing libraries, linters, and type definitions (@types/...) are not required for your app to run in production—they are only needed while writing and testing code.
81+
82+
```json
83+
"devDependencies": {
84+
"typescript": "~4.6.2",
85+
"@types/node": "^22.0.3"
86+
}
87+
```
9188

92-
4. Save your changes and then execute the following to install the dependencies:
89+
5. Save your changes and then run the following command to install the dependencies:
9390

9491
```bash
9592
$ npm install
9693
```
9794

9895
If you are using version control, make sure to ignore the `node_modules` directory, otherwise you end up committing dependencies.
9996

100-
5. In Code, create a [tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) file next to your *package.json*. The *tsconfig.json* file is used by the TypeScript compiler to compile your code in the proper manner to a JS file. Create it with the following contents.
97+
6. In VS Code, create a [tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) file in the same directory of *package.json*. The *tsconfig.json* file is used by the TypeScript compiler to compile your code in a proper manner to a JavaScript file. Add the following contents to the *tsconfig.json* file:
10198

10299
```json
103100
{
104-
"compilerOptions" : {
105-
"module" : "commonjs",
106-
"target" : "es2020",
107-
"strict": true
108-
},
109-
"files" : [
110-
"script.ts"
111-
]
101+
"compilerOptions": {
102+
"target": "es2020",
103+
"module": "commonjs",
104+
"esModuleInterop": true,
105+
"forceConsistentCasingInFileNames": true,
106+
"strict": true,
107+
"skipLibCheck": true
108+
},
109+
"files": ["script.ts"]
112110
}
113111
```
114112

115113
The compiler options should be left as-is. The `files` directive is an array of strings with path names of all TypeScript files that make up your Node.js script or app. You can change it so that the compiler uses the right files.
116114

117-
Create new files in your app directory with Visual Studio Code by hovering over the name of the working directory in the left-side pane. When the **New file** icon appears, click it to create a new file. For more information on basic editing with VSC, see [Basic Editing](https://code.visualstudio.com/Docs/editor/codebasics).
115+
Create new files in your app directory with VS Code by hovering over the name of the working directory in the left-side pane. When the **New file** icon appears, click it to create a new file. For more information on basic editing with VS Code, see [Basic Editing](https://code.visualstudio.com/Docs/editor/codebasics).
118116

119117
## Next Step
120118

0 commit comments

Comments
 (0)