Skip to main content

Running WebViewer Locally

Local Webviewer Server with Local Utopia

Preface

This guide is assuming you already have previewerX building and running. If you leave the Web Server Url and 'Connecting to local Utopia and Webviewer' checkbox unchecked, PreviewerX will run client side only and will only preview PDF files properly. This is fine for most use cases, but if you need to work with annotations, redactions, or any page manipulation functions you'll need the Webviewer Server running.

Instructions

  1. If you don't have it already, download and install Docker Desktop
  2. Download the docker-compose.yml file, preferably somewhere you can find it
  3. Open a command prompt in that folder and run: docker-compose up -d --force-recreate
    1.  This will take a few seconds to spin up the first time, you can test if it's up by going to http://localhost:8090/demo?s
  4. Navigate to the Utopia project (The main project, not the base repo) from the repo base
    1. Find the .vs/Utopia/config/applicationhost.config file and open in an editor like notepad++
    2. Find the <sites> section and the <site name="Utopia"> section inside of it
    3. Add the additional binding
      <binding protocol="https" bindingInformation="*:44334:host.docker.internal" />
      the full Utopia Site section should look similar to this:
            <site name="Utopia" id="2">
        <application path="/" applicationPool="Utopia AppPool">
          <virtualDirectory path="/" physicalPath="C:\src\Utopia\Utopia\Utopia" />
        </application>
        <bindings>
          <binding protocol="http" bindingInformation="*:57584:localhost" />
          <binding protocol="https" bindingInformation="*:44334:localhost" />
          <binding protocol="https" bindingInformation="*:44334:host.docker.internal" />
        </bindings>
      </site>


  5. You may need to restart Visual Studio if it was already running
  6. If you're testing in the PreviewerX Demo project, enter the following values into the form on the side:
    Base Url - https://localhost:44334 
    Web Server Url - http://localhost:8090 
    Check the box for 'Connecting to local Utopia and Webviewer' 

Congrats! Everything should be working locally now!

Technical Details

To add technical details in case there's any issues later on.. under the hood we were having issues running locally be the webviewer running in docker couldn't make a call out to Localhost on the host machine, so it was impossible to load the file. Fortunately, docker desktop adds a host.docker.internal dns entry under the hood that allows docker containers to reach the host machine. I'll be honest, I'm not sure if it's mapped to the loopback on the host somehow, or if it's the local IP. I assume the local IP. To get everything running locally, we're simply overriding the base URL of the loadDocument call to use the host.docker.internal address. However, that means we also need to add that as a viable binding in IISExpress, so we modify the binding in the applicationhost.config file. I'm looking to see if there's a way to just add this by default to Utopia, but for now, hopefully this isn't too painful.

Back to top