We get occasional inquiries about how to host your Forio Epicenter simulations on your own web server. Here’s a short set of instructions.
Hosting Simulations Built with Flow.Js
If you are building your simulation with Flow.Js or Epicenter.Js, you can find a guide to hosting your simulations in our documentation in the article How to Host an Epicenter Project on your own Server.
Hosting Simulations Built with Interface Builder
If you’ve built your simulation with the interface builder, the process is slightly more complex, since interface builder is intended to create a complete web application. The following items below are guidelines and may need to be adjusted for your specific simulation.
Easiest Approach - Embed the Simulation in an Iframe
The easiest way to embed a Forio simulation is to use an iframe. This will display your web page with the simulation embedded inside of it. The benefits of this approach are:
- All files are hosted on Forio Epicenter.
- Users will not see the Forio URL, and
- The simulation will work seamlessly without modification.
- It will be easier to make changes to your simulation, since updates (in Epicenter) will immediately appear on your website.
To embed a simulation in an iframe, include this HTML in your web page.
(In the example below, I am using a sample simulation – which may not actually exist – with the account name “dansmith” and the simulation name “supplychainsim”.
<iframe src = "https://forio.com/app/dansmith/supplychainsim" width = "800" height = "600"></iframe>
Hosting an Interface Builder Simulation on Your Server
Alternately, you can host all the web files on your server directly. The benefits of this approach are:
- You will have control of all the files for your simulation
- You may have content you wish to keep internal to your organization, e.g. within a corporate firewall
Important notes
- You will need to modify your simulation to make it send web service calls to Forio epicenter
- The model for the simulation will still be hosted by Forio Epicenter,
- Your simulation (hosted on your server) will still make web service calls to Forio Epicenter (hosted at api.forio.com).
- If you change your simulation web files with Forio Epicenter, you will have to recopy the files to your server.
Here are the steps:
(1) Change relative src references to point to forio.com.
Interface builder references a number of scripts and CSS files that are hosted on forio.com. You will need to edit “index.html” to point to the Forio server.
Specifically, change any script tag that starts with a slash to have “https://forio.com” before it.
For example, in index.html, look for lines like this (there may be others)
<script src="/tools/js-libs/2.11.0/epicenter.min.js"></script>
<script src="/tools/js-libs/flow/1.0.1/flow.min.js"></script>
<link id="f-theme" rel="stylesheet" href="/epicenter/builder/project-files-v1/styles/bold.min.css">
and change them to a form like this. (do not copy the specific lines below, instead insert https://forio.com before the slash in the lines from your file).
<script src="https://forio.com/tools/js-libs/2.11.0/epicenter.min.js"></script>
<script src="https://forio.com/tools/js-libs/flow/1.0.1/flow.min.js"></script>
<link id="f-theme" rel="stylesheet" href="https://forio.com/epicenter/builder/project-files-v1/styles/bold.min.css">
(2) Tell the interface builder to use api.forio.com for all web service calls.
You can customize the hostname used for the Forio web service calls. In order to change this, look for a block of code in index.html that looks like this:
<script>
//Flow.js will be auto-configured for this project, but you can use the code-block below to override or add any specific changes you want
//See https://forio.com/epicenter/docs/public/data_binding_flow_js/#using_in_project for possible options
window.FLOW_CONFIG = {
channel: {
}
};
</script>
Replace that block with the following code. Change the variables accountName and projectName to be the account (short) name and project (short) name for your sim. Note that these should be lowercase (no space), and should be exact same names that appear in the sim URL.
<script>
var accountName = "dansmith";
var projectName = "supplychainsim";
window.FLOW_CONFIG = {
channel: {
defaults: {
account: accountName,
project: projectName,
server: {
host: 'api.forio.com',
},
},
runManager: {
run: {
account: accountName,
project: projectName,
server: {
host: 'api.forio.com',
}
},
}
}
};
</script>
(3) Test the sim.
You should be able to see the sim run in the same manner as on Forio.com. There should be no new errors. You might it helpful to open up the “dev tools” in your browser and look at the network tab. Click “XHR” to see all web service calls and confirm they are going to “api.forio.com” and not to your server.
Questions or problems? Post a question in the forum and we’ll do our best to help!