How to build a DW SPA

In this guide we will demonstrate how you can build a Dynamicweb SPA consuming data from our web api to create a product catalog. This works from Dynamicweb 9.10 and forward.

The application is built as a React App in Typescript  We use NSwag Studio to automatically create a binding between the webapi and the javascript application. You can use whatever flavor of programming language and framework to create a similar app. This is just for demo purposes, which is why there is almost zero styling.

1. Install Git
2. Install node.js
3. From inside VS Code install npm commands

Here is a resource for setting up the prequisites: https://code.visualstudio.com/docs/nodejs/nodejs-tutorial

1. Open VS Code
2. New folder – create and select folder to place project in
3. Open Terminal and clone the react-project:  
   1. “git clone https://github.com/dynamicweb/WebAPI_SPA.git ”
   2. Alternatively use this zip
4. In terminal run "cd WebAPI_SPA"
5. In terminal run ‘npm install’
6. Go get coffee
7. Open package.json and point proxy to the dw solution which will provide you with data
8. In terminal run ‘npm start’

Config.ts contains a configuration of the website, repository and query you want to use to retrieve data.

The example code expects the following of your solution:

• The query referenced must have a LanguageId parameter and an expression using it
• The solution must have at least the following currencies:
  • DKK
  • EUR

If you use a Rapido release (at writing 3.4) as a base and add the Search.query file in the downloaded App to your Products repository (Files\System\Repositories\Products), then the above should work.

When we add more endpoints to our webapi it might be needed to update the file called /api/DWGenerated.ts using NSwag Studio – otherwise the new endpoints won't be available in the models.

1. Open NSwag Studio
2. Open the provided configuration (TypescriptGenerationSettings.nswag)
3. Adjust the url under “specification url”
4. Click generate and navigate to “Typescript client”
5. Paste all the generated code into DWGenerated.ts

This updates the app to use your current webapi.

Access your solution URL and add /dwapi/docs. Here you can find an overview of the current endpoints, their schemas and try them out before you use them in your app.

Consider how you would add a Vat Country dropdown to the App and try to implement it.

1. In terminal write ‘npm run build’

This generates a SPA design inside the project folder called ‘build’. You can copy this folder to any Templates folder on a DW solution and use the SPA design in the same way you would do with another distributed design (like Rapido)