Downloading and Running Front-end Codebase Locally
The Canvas Envision Creator is a web application with front and back ends. You should download the codebase of the front-end app to your local, on-premise, or cloud environment to:
Embed the front-end app into custom web pages.
Develop, test, and execute custom code that calls the evCreate API in the embedded front-end app.
Without the front-end codebase, the embedded web app and custom scripts will not work.
Understanding the front-end codebase
The codebase of the front-end app of the Canvas Envision Creator is shipped as a zip archive of JavaScript (JS) source files, third-party dependencies, assets, and additional helper files.
The package includes the following:
The assets folder with the application assets, WebAssembly module, and third-party dependencies.
The envision folder with the JS source files of the front-end app.
The index.html file with the HTML template for Canvas Envision Creator.
The favicon.ico file with a favicon for the index.html file.
The styles.css file with CSS styles used in the index.html file.
The run.batch file with a command to host the index.html file locally.
Technically, only the assets and envision folders are necessary because they constitute the codebase of the front-end app of the Canvas Envision Creator. Without them, the front-end app embedded in an HTML file, such as index.html, will not run and will raise an error in any environment.
The index.html file is conditionally optional. It is an out-of-the-box example of a web page with the embedded front-end app. This file provides the template for embedding the front-end app. You can customize this file or create a custom one according to the template. In any way, you should configure the front-end app embedded in the file for your Canvas Envision environment. You can also populate the file with your custom JS scripts, evCreate API functions calls, HTML elements, and CSS styles. For details, see Embedding Canvas Envision Creator and evCreate API Calls Into HTML.
All other files from the package are optional to facilitate you with the environment setup.
The run.batch file is a batch file for the Windows® operating system (OS) that executes the following command in the Command Prompt:
This command launches the npx package runner included in the npm™ package manager for the Node.js® open-source and cross-platform JS runtime environment. The npx package runner checks whether the Statikk lightweight static web server is available globally. If this server is installed globally, it runs the global version. If not, it temporarily downloads the Statikk package, runs it, and then removes it. The Statikk web server hosts the index.html file locally at http://localhost:8081.
As the run.batch file is for the Windows OS, you should run the discussed command manually on other OSs if you want to host the index.html file with Statikk. It is not the only solution, but it is the most convenient for testing and development because it uses the tools included in the dependencies required for the front-end app. You can host the web page that includes the embedded front-end app with any server applications for hosting static or dynamic web pages.
When you access the hosted index.html file in the browser, the front-end app embedded in this file is executed in the Node.js runtime environment.
The codebase packages, dependencies, and assets are managed with the npm package manager for Node.js.
Prerequisites for the local front-end codebase
The front-end app of the Canvas Envision Creator requires the following:
An operational system: Windows® 11 or newer, Ubuntu® 18.4 or newer, Debian® 11 or newer, macOS® 13 or newer.
npx 10 or newer. It has been included in npm since version 10.2.3.
A server application for hosting websites. The evCreate API package includes the run.batch file for hosting with the Statikk lightweight static web server.
Downloading the front-end codebase
To download the front-end codebase:
Log into the Canvas Envision Portal as an Admin.
Go to .
Click the Download SDK button. The Downloading dialog pops up with a running spinner.
Once the downloading is completed, the Downloading dialog disappears, and the browser displays the evCreate.zip archive on the list of downloads.
Go to the folder with the downloaded evCreate.zip archive.
Extract the package from the evCreate.zip archive to the drive where you will develop, test, and host the embedded front-end app or custom code that will call the evCreate API.
Running the embedded front-end app
To run the front end of the Canvas Envision Creator app embedded in a web page, you should host this web page. You can easily do this job with the Statikk web server launched with the run.batch file on Windows or with a command-line interface terminal on any supported OS. Alternatively, you can use any web server application of your choice.
Hosting with Statikk using run.batch
To launch hosting the Canvas Envision Creator front-end app embedded in the index.html file with the Statikk web server on Windows using the run.batch file:
Ensure the index.html file is configured for your Canvas Envision environment. For configuration details, see Embedding Canvas Envision Creator and evCreate API Calls Into HTML.
Go to the sdk-evCreate folder in the unzipped codebase package.
Launch the run.batch file. The Command Prompt window appears and starts the Statikk web server.
If you are running the index.html file for the first time, the Windows protected your PC warning message pops up.
In such a case:
In the warning message, click the More info link. The Run anyway button appears in the dialog.
Click the Run anyway button.
The warning message disappears, and the Command Prompt window appears and starts the Statikk web server.
Once Statikk hosts the index.html file, open a browser.
Go to http://localhost:8081. The browser displays the index.html web page with the embedded front-end app.
Hosting with Statikk using a command line
To launch hosting the Canvas Envision Creator front-end app embedded in the index.html file with the Statikk web server on any supported OS using a command line interface terminal:
Ensure the index.html file is configured for your Canvas Envision environment. For configuration details, see Embedding Canvas Envision Creator and evCreate API Calls Into HTML.
Launch the command line interface terminal of your choice as a superuser or administrator.
Go to the sdk-evCreate folder in the unzipped codebase package.
Run the following command:
npx statikk ./ --port 8081 --coiThe Statikk web server is started.
Once Statikk hosts the index.html file, open a browser.
Go to http://localhost:8081. The browser displays the index.html web page with the embedded front-end app.
Stopping the hosting with Statikk
To stop hosting the Canvas Envision Creator front-end app embedded in the index.html file with the Statikk web server on any supported OS:
Either:
Close the window with the command line interface terminal. In the case of the Command Prompt window on Windows, you should click the Close (X) button twice.
Terminate or kill the command line interface terminal.
Stop Statikk web server:
In the terminal, type Ctrl+C.
If the terminal asks you to confirm Statikk termination, type y and press Enter.
If necessary, close the index.html web page in the browser.
Updating the index.html file on the fly
You can update the hosted index.html file and custom script files calling the evCreate API on the fly without stopping and restarting the web server as follows:
Save the updates to the index.html file and custom script files.
Reload the index.html web page in the browser.