Self-hosting graphics

When you’re ready to publish the project, change the homepage prop in package.json to the URL where you’d like to host the files.

package.json

{
  // ...
  "homepage": "https://your-site.com/this-project/"
}

Then run the build script in your terminal:

npm run build

The files you’ll need to host on your server will be built in the dist directory of the project. They’ll look something like this:

• Directorydist

  • Directorycdn

    • … JS, CSS, images, etc.
  • Directoryembeds Embeddable pages and graphics

    • Directoryen

      • Directorypage

        • index.html Embeddable page without Reuters branding
  • index.html Page with Reuters branding

You’re now ready to upload the project to your server. Be sure to upload all the files in the dist directory to the location on your server you specified in homepage in package.json.

Note

For full-page graphics projects, without directly changing the source code, the outermost index.html in the dist/ directory will include Reuters branding. The embeds/en/page/index.html will be the same page without Reuters branding.

Self-hosting embeddable graphics

After building the project and uploading it to your servers, you can add embeddable graphics to your pages using an embed code and the URL to the embeddable graphic hosted on your servers.

• Directorydist

  • Directoryembeds

    • Directoryen

      • Directorymap

        • index.html Embeddable graphic

<script>
  var pymParent = new pym.Parent(
    'my-graphic',
    'https://your-site.com/this-project/embeds/en/map/',
    {}
  );
</script>
<div id="my-graphic'"></div>

Be sure to also include the pym.js dependency script at most once on each page where you will embed graphics.

<script
  type="text/javascript"
  src="https://graphics.thomsonreuters.com/cdn/pym.v1.min.js"
></script>

You can also self-host the above pym.js script on your own servers, if you’d prefer.