[v2] Development: UI

Frontend development

The serilog-ui frontend is located inside the Serilog.Ui.Web package.

Under the assets/ folder you can find all the relative files.

The serilog-ui frontend is written in Typescript and built through ParcelJS.

Prerequisites

Requirement: Node.js > 16

Please run npm i to install all dependencies!

Grunt tasks

There are two Grunt tasks you can use to build the frontend project:

• build: it cleans wwwroot/dist/ and creates a production-ready build. This build can be used to either:
  • test the frontend development with the SampleWebApp
  • create a new production build, by committing the entire wwwroot/dist folder changes
• dev: it cleans wwwroot/dev/ and starts a dev server to https://127.0.0.1/serilog-ui/
  please notice that the development build uses msw to swap any serilog-ui fetch with a mocked version.
  You can check details by reading assets/script/mocks/fetchMock.ts.

Expand to read additional instructions

Open solution with Visual Studio, to enable easier integration
right click on src/Serilog.Ui.Web/Grunfile.js => open "Task Runner Explorer"
In the Task Explorer, double click on the Alias Tasks dev
You'll see the task starting Parcel task and staying in watch mode, with an output similar to:

Server running at https://127.0.0.1:1234
Building...
Bundling...
Packaging & Optimizing...
√ Built in 2.84s

When developing the assets (without the Serilog Middleware), no VS start is needed; Parcel starts a dev server with all you need for the assets part.
All fetches are mocked with MSW to serve fake data (saved in mocks/samples.ts); this helps an user develop the assets without having to worry about creating actual data.
You can open either https://localhost:1234 or https://127.0.0.1:1234 to work.

Known issues

please notice that you'll need to accept Parcel https self-signed certificate, otherwise msw service-worker won't be able to connect.

Parcel related issue

How to do it - example

If you see an https error (untrusted certificate) while developing with Parcel

for Chrome:

• click on Not Secure (next to the URL) => click Certificate is not valid => click Details => Copy To File => export the cert as DER Encoded Binary X.509 .cer

• go to: chrome://settings/security => click Manage Certificates => go to Trusted Root Certification Authorities tab => import the .cer file previously exported

• restart Chrome

• you should be able to run the dev environment on both localhost and 127.0.0.1 (to check if it's working fine, open the console: you'll find a red message: "[MSW] Mocking enabled.")