Html Architect Development

docs developer
1

This post will help you set up development environment for the new Html Architect. That is environment for developing the Architect itself not for using the Architect to model projects. The Html Architect is work in progress with very little functionality at this point.

Prerequisites

Operating system

The Architect has dotner8.0 backend and react frontend so it is multiplatform. The development can be done on Windows, Mac or Linux (linux was never actually tested but it should work).

Nodejs

you will need nodejs verion 20 or higher. After you install it run this command to aslo install the yarn package manager

npm install --global yarn

dotnet Sdk

download and install dotnet SDK 8.0.

IDE

You will need a C# and javascript IDE/Editor. Jetbtrains Rider works fine for both and you can now use it for free as long as you do non comertial work. The best way to install it is with the Toolbox. Any other IDE like Visual Studio or VS code will work too.

SQL

The next thing you will need is a MSSQL database. If you are on Mac or Linux you can run it in Docker.

1. Clone the origam repository

Architect is in the origam repository together with all other applications

git clone https://github.com/origam/origam.git

Then switch to the branch architect-html.

2. Modify the config files

OrigamSettings.config

This file can be found here on Windows:
C:\Users\jindr\AppData\Roaming\ORIGAM\1.0\OrigamSettings.config

and here on Mac:
/Users/jindrichsusen/Library/Application Support/ORIGAM/1.0/OrigamSettings.config

There is no way to select a model in the Atchitect so far. The model called Demo is read every time from the configuration. Here is an example of the OrigamSettings.config file

<?xml version="1.0" encoding="UTF-8"?>
<OrigamSettings>
  <xmlSerializerSection type="Origam.OrigamSettingsCollection, Origam, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null">
    <ArrayOfOrigamSettings xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
      <OrigamSettings>
        <SchemaConnectionString />
        <ModelSourceControlLocation>C:\Repos\origam\model-tests\model</ModelSourceControlLocation>
        <DataConnectionString>Data Source=.;Initial Catalog=origam-demo;Integrated Security=True;User ID=;Password=;Pooling=True</DataConnectionString>
        <SchemaDataService>Origam.DA.Service.MsSqlDataService, Origam.DA.Service</SchemaDataService>
        <DataDataService>Origam.DA.Service.MsSqlDataService, Origam.DA.Service</DataDataService>
        <SecurityDomain />
        <ReportConnectionString />
        <PrintItServiceUrl />
        <SQLReportServiceUrl />
        <SQLReportServiceAccount />
        <SQLReportServicePassword />
        <SQLReportServiceTimeout>60000</SQLReportServiceTimeout>
        <GUIExcelExportFormat>XLS</GUIExcelExportFormat>
        <DefaultSchemaExtensionId>80812c67-2d83-477c-98fe-b44cb8027f21</DefaultSchemaExtensionId>
        <ExtraSchemaExtensionId>00000000-0000-0000-0000-000000000000</ExtraSchemaExtensionId>
        <TitleText>Demo</TitleText>
        <Slogan />
        <Name>Demo</Name>
        <LocalizationFolder>C:\Repos\origam\model-tests\l10n</LocalizationFolder>
        <LocalizationIncludedDocumentationElements>USER_SHORT_HELP, USER_LONG_HELP,</LocalizationIncludedDocumentationElements>
        <TranslationBuilderLanguages>de-CH</TranslationBuilderLanguages>
        <HelpUrl>https://www.merriam-webster.com/dictionary/help</HelpUrl>
        <DataServiceSelectTimeout>120</DataServiceSelectTimeout>
        <AuthorizationProvider>Origam.Security.OrigamDatabaseAuthorizationProvider, Origam.Security</AuthorizationProvider>
        <ProfileProvider>Origam.Security.OrigamProfileProvider, Origam.Security</ProfileProvider>
        <PathToRuntimeModelConfig>RuntimeModelConfiguration.json</PathToRuntimeModelConfig>
        <ExternalWorkQueueCheckPeriod>180</ExternalWorkQueueCheckPeriod>
        <ModelProvider>Origam.OrigamEngine.FilePersistenceBuilder, Origam.OrigamEngine</ModelProvider>
        <CheckFileHashesAfterModelLoad>true</CheckFileHashesAfterModelLoad>
      </OrigamSettings>
    </ArrayOfOrigamSettings>
  </xmlSerializerSection>
</OrigamSettings>

This assumes that the origam repository was cloned to C:\Repos\origam so make sure to adjust the paths if you have cloned it somewhere else. Also change the DataConnectionString.

appsettings.json

The file should be here
C:\Repos\origam\backend\Origam.Architect.Server\appsettings.json

This is what you should put inside

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "SpaConfig": {
    "SourcePath": "C:\\Repos\\origam\\architect-html"
  }
}

log4net.config

The file should be here
C:\Repos\origam\backend\Origam.Architect.Server\log4net.config

And this should be inside

<?xml version="1.0" encoding="utf-8" ?>
<log4net>
  <appender name="DebugAppender" type="log4net.Appender.DebugAppender" >
    <layout type="log4net.Layout.PatternLayout">
      <conversionPattern value="%date [%thread] %-5level %logger - %message%newline" />
    </layout>
  </appender>
  <appender name="FileAppender" type="log4net.Appender.RollingFileAppender">
    <file value="./logs/OrigamArchitect.log" />
    <appendToFile value="true" />
    <rollingStyle value="Size" />
    <maxSizeRollBackups value="5" />
    <maximumFileSize value="10MB" />
    <staticLogFileName value="true" />
    <layout type="log4net.Layout.PatternLayout">
      <conversionPattern value="%date [%thread] %level %logger - %message%newline" />
    </layout>
  </appender>
  <root>
    <level value="ERROR"/>
    <appender-ref ref="FileAppender" />
  </root>
</log4net>

3. Build the react frontend

navigate to the architect-html directory and run this to install the dependencies

yarn install

then run this to create a production build

yarn build

or you can start a development server with this command

yarn dev

4. Run the C# backend

Open the Origam solution in Rider. You can find it here
C:\Repos\origam\backend\Origam.sln

Switch the solution configuration to Debug Architect Server and run configuration to Origam.Architect.Server. This is what you should see on your toolbar:

image

Then just press the Run or Debug button and the Origam.Architect.Server project should start along with a new browser window with the frontend application.

1 Like