Neo React tools

The Neo react tools extension provides the following features:

Features

• Add view / component context menu item. If you right click on a folder named Views or Components, or any of its sub folders, you will be able to add a component which inherits from the applicable base class where the boilerplate code has been written for you.
• Typescript model generation. If you right click on a folder named Models or any of its sub folders or files, you will be able to generate typescript models from your server side c# models.
  • Only the models in the folder or file you click on will be updated.
• Typescript api client generation. If you right click on a folder named ApiClients or any of its sub folders or files, you will be able to generate typescript api clients from your server side c# api controllers.
  • Only the api clients in the folder or file you click on will be updated.

Requirements

@singularsystems/neo-core and @singularsystems/neo-react packages installed in your project.

Extension Settings

You can change the following settings in your settings.json file:

• "singular-neo.modelGeneration": Contains a dictionary of folder names that contain a Models or ApiClients folder. In each of these entries, you can update serverModelPath, and serverApiPath.

• "singular-neo.templating": Settings for creating views.

Typescript model generation settings

When scaffolding a typescript model for the first time, you will be prompted to select the location of your c# model project. When this is selected, the path will be saved into the workspace for the project:

"singular-neo.modelGeneration": {
    // This is the relative path from the workspace file, to the "module root".
    "src\\Domain": {
        // Relative paths from the workspace file, to relevant c# projects.
        "serverModelPath": "..\\Server\\MyProject\\MyProject.Models",
        "serverApiPath": "..\\Server\\MyProject\\MyProject.Api",
        "serverAlternatePaths": [
            "..\\Server\\MyProject\\MyProject.Contracts"
        ]
    },
}

Multi-folder workspaces

Multi-folder workspaces allow your project to share code with another project. This is useful if you have multiple apps, and have some shared or common code between them. The folder structure for this type of app would look like this:

[Client]
- [AdminApp]
  - [src]
    - [Domain]
    - [Reporting]
  - package.json
- [Common]
  - [Domain]
- admin-app.code-workspace

You can see above that there are two "Domain" folders. Both these folders refer to the same c# models projects, but using the above configuration scheme would result in 2 entries, because the 2 domain folders have different relative paths from the workspace. These types of projects require manual configuration of the modules, as shown below:

"singular-neo.modelGeneration": {
    // This is required because package.json is not in the same folder as the workspace file.
    // This entry points to the relative folder which contains package.json
    "mainPackage": "./AdminApp",
    "modules": [
        { 
            "name": "Domain",
            "path": "AdminApp\\src\\Domain",
            "alternatePaths": ["Common\\Domain"],
            // These settings are the same as in the above config example.
            "serverModelPath": "..\\Server\\MyProject\\MyProject.Models",
            "serverApiPath": "..\\Server\\MyProject\\MyProject.Api",
            "serverAlternatePaths": [
                "..\\Server\\MyProject\\MyProject.Contracts"
            ]
        }
    ]
}

The above configuration moves the config into a modules array, which allows the module to be configured with a main path, and alternate paths.