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.
- Install Git
- Install node.js
- From inside VS Code install npm commands
Here is a resource for setting up the prequisites: https://code.visualstudio.com/docs/nodejs/nodejs-tutorial
Get example code
- Open VS Code
- New folder – create and select folder to place project in
- Open Terminal and clone the react-project:
- “git clone https://github.com/dynamicweb/WebAPI_SPA.git ”
- Alternatively use this zip
In terminal run "cd WebAPI_SPA"
- In terminal run ‘npm install’
- Go get coffee
- Open package.json and point proxy to the dw solution which will provide you with data
- In terminal run ‘npm start’
Configure example code to your solution
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:
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.
- Open NSwag Studio
- Open the provided configuration (TypescriptGenerationSettings.nswag)
- Adjust the url under “specification url”
- Click generate and navigate to “Typescript client”
- Paste all the generated code into DWGenerated.ts
This updates the app to use your current webapi.
API docs and a suggested homework task
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.
Generating a design from your SPA
- 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)