Running HTML Architect in Docker

docs
1

This guide will walk you through the process of building a docker image with the new Html Architect from source code and running it on your local machine for development and testing purposes. The Html Architect is work in progress and very few features have been implemented.

Prerequisites

  • Docker installed on your system
  • Visual Studio (for building the backend)
  • Node.js and Yarn (for building the frontend)
  • Git (for cloning the repository)

Steps

  1. Clone Repository
  2. Build Architect Server and Client Application
  3. Build the Docker Image
  4. Create Environment File
  5. Run Docker Container

1. Clone Repository

First, clone the ORIGAM repository from GitHub:

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

2. Build Architect Server and Client Application

For the backend:

  1. Open the backend solution origam\backend\Origam.sln in Visual Studio.
  2. Set the solution configuration to Release Architect Server.
  3. Build the solution.

For the frontend:

  1. Open a command prompt and navigate to origam\architect-html.
  2. Run the following commands:
yarn install
yarn build

3. Build the Docker Image

Now we’ll prepare the files and build the custom Docker image:

  1. Create the directory origam\docker\architect\bin.
  2. Copy the contents of origam\backend\Origam.Architect.Server\bin\Release\net8.0 to origam\docker\architect\bin.
  3. Delete the logs directory from origam\docker\architect\bin to avoid a conflict with Docker.
  4. Create a new directory origam\docker\architect\bin\ClientApplication.
  5. Copy the contents of origam\architect-html\dist to origam\docker\architect\bin\ClientApplication.
  6. Open a command prompt, navigate to origam\docker, and run:
docker build -t origam_architect_local:1.0 -f DockerfileArchitect.linux .

This creates a custom Docker image named origam_architect_local with version 1.0.

4. Create Environment File

Create a new file named demo.env in your working directory (C:\test\docker) with the following content:


OrigamSettings__DefaultSchemaExtensionId={main package id}
OrigamSettings__DatabaseHost={ip address of your db}
OrigamSettings__DatabasePort=1433
OrigamSettings__DatabaseUsername={your db user}
OrigamSettings__DatabasePassword={your db password}
OrigamSettings__DatabaseName={your db name}
OrigamSettings__Name=Demo
DatabaseType=mssql
TZ=Europe/Prague

Then replace the placeholders

  • {main package id}: ID of your project’s main package. I you use the test model, the id is: f17329d6-3143-420a-a2e6-30e431eea51d

  • {ip address of your db}: Your database’s IP address. For a local database, use host.docker.internal

  • {your db name}: Name of your new database (preferably your project’s name)

  • {your db user}: Your database username

  • {your db password}: Your database password

Do not change the value of the OrigamSettings__Name variable. It must be Demo for now. This limi9tation will be removed once the model selection is implemented in the Architect.

Additional configuration

  • Create a new database with the name you specified in {your db name}
  • Adjust the time zone if needed by changing TZ=Europe/Prague

5. Run Docker Container

Now you can run the Docker image with this command (adjust paths as necessary):

docker run --env-file "C:\test\docker\architect\architect_Linux.env" ^
    -it --name localArchitect ^
    -v  {path to the model}:/home/origam/projectData/model ^
    -p 8081:8081 ^
    origam_architect_local:1.0

Replace the placeholders

  • {path to the model}: Path to the model directory of your project. If you use the test model and you cloned it here for example: C:\Repos\origam the the model path would be C:\Repos\origam\model-tests\model

This command does the following:

  • Uses the environment file we created
  • Names the container "localArchitect "
  • Maps port 8081 from the container to your host machine
  • Creates and starts a new Docker container with that image

Accessing the Application

After running the Docker command, wait for the container to start up. Once it’s ready, you can access the custom ORIGAM application by opening http://localhost:8081 in your web browser.

Troubleshooting

  • If you encounter build errors, ensure all prerequisites are correctly installed and your development environment is properly set up.
  • Double-check all file paths when copying files and running Docker commands.