PreviewerX Overview - Architecture, Building, Running, Deploying

Base Project Architecture

General Info

Main branch - previewerX/8.12-Main - this is our main branch because we can't use the actual Main. This is because we originally forked off of the Apryse Gihub project and we need to preserve their branches so we can more easily pull updates in the future if needed.

There's 3 main pieces to PreviewerX and depending on the work you're doing it may change which ones you'll be interacting with the most.

Demo Project - /Demo

This project is not deployed anywhere, it is simply an internal project to speed up testing so you don't have to constantly move files into Utopia/Atlantis in order to see your changes. One nice thing about this project is that you can make changes in the PreviewerX project and with a quick reload, you'll see those changes come through.

If you want to run the demo project pointed at your local files, please see Previewer Setup for Local Environment. However, if you're only making changes to the PreviewerX code and not any interactions specifically with Utopia, you can also point the URLs in the form to staging which are provided as the default values.

PreviewerX - /PreviewerX

This is the main project where we try to put the majority of our code. It provided a wrapper for the Apryse Previewer objects and it provides the interface that Utopia (and eventually Atlantis) will see when you integrate your changes into Utopia.

ApryseUI - Root folder and /src

The other 2 projects are nested into this main project folder. This project is the UI code provided from Apryse and was originally forked from their repo in Github.

This is a dense project to initially dig into and we try to avoid making changes in this area, mostly because any changes we make in here will make it harder for us to stay up to date when Apryse releases new versions and will inevitably cause merge conflicts. The main reason you might find yourself making changes in here is because the internal state of the app is not visible or modifiable outside of their React app. Most of the time, that's okay, there's an interface to hook into the internal events, and that would be the preferable method. However, we've had to add a few modals directly into the previewer itself such as watermarks where we want to block interaction behind the scenes but need to provide a modal that's still within the bounds of the previewer itself.

Build and Run this bad boy

As mentioned there's 3 separate projects inside this repo, but we've added some convenience scripts to make building and launching as easy as possible.

We've all generally been using Node version 14+ and had no issues. If you have Node 11 (from the less cool and older previewer) it will cause issues during build time. NOTE: All the following command and some more can be found in the root package.json file

Open a terminal in the root folder
npm run install-all
- This will go into each project and run npm i for you
npm run download-webviewer
- This will install the correct version of the "Core" webviewer files, these are the super secret libraries that power the UI
- You MUST do this before running the next command, the build command takes these files and puts them where the demo project needs them in order to properly run
npm run build-all
Congrats, everything should be built now! You have a couple options from here:
1. To launch the demo project and test things out use npm run demo
2. To build the standalone file that is transferred to Utopia use npm run build-standalone
  1. This will output a js file into the /PreviewerX/Standalone folder that can be copied over to the Utopia/wwwroot/scripts/previewer folder