Session Attributes #

GraffitiSuite allows you to offload the associated JavaScript, CSS, and Font files required for the suite to function properly. This is accomplished by first uploading the scripts directory to the server of your choice, then creating and uploading the HTACCESS file (see “HTACCESS for File Hosting” note, Apache HTACCESS now included in scripts directories by default), and finally adding the attributes to the Session object as follows:

Name	Type	Default Value	Description
GraffitiSuite.CDN.Address	String	“”	Root address of your remote scripts directory, without protocol. Example: //yourhosting.com/graffitisuite/rXX/scripts
GraffitiSuite.CDN.Debug	Boolean	False	Determines whether debug sessions will use the CDN address for loading GraffitiSuite’s resources.
GraffitiSuite.CDN.Deployed	Boolean	False	Determines whether your application will use the CDN address for loading GraffitiSuite’s resources when not being debugged.

If not GraffitiSuite.CDN.Address value is provided, GraffitiSuite will always server files directly from the Xojo web application instance. Address should be provided without the protocol so that it works for HTTP or HTTPS.

If GraffitiSuite.CDN.Debug is set to False and running your project in debug mode, the resources from the scripts folder will be served by your application. When set to True and running your application in Debug, resources will be loaded from the URL supplied by your GraffitiSuite.CDN.Address attribute.

If GraffitiSuite.CDN.Deployed is set to False and your project is compiled, the resources from the scripts folder will be served by your application. When set to True and your project is compiled, resources will be loaded from the URL supplied by your GraffitiSuite.CDN,Address attribute.

You will typically want to place the scripts directory inside another version-specific directory so that you don’t break other applications and cause users to receive new files after they’ve been updated. In the examples from the table above, you would change rXX to the GraffitiSuite release number as an example, IE:

//yourhosting.com/graffitisuite/r54/scripts

Do not use the GraffitiSuite CDN values that ship in the demo. These will break from time-to-time and without warning!

File Hosting Setup #

In order to serve the JavaScript, CSS, and Font files from an alternate location, your remote server must be configured properly. The contents below ensure that your files will not be blocked by Cross-Origin policies.

Apache #

HTACCESS files for Apache are now included by default. If you receive 500 Internal Server Errors, see below or Common Hosting Errors for more information.

Options All -Indexes

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
	Header set Access-Control-Allow-Origin "*"
	Header set Access-Control-Allow-Headers "origin"
	Header set Access-Control-Allow-Methods "GET"
  </FilesMatch>
</IfModule>

<IfModule mod_expires.c>
  # Fonts
  AddType application/vnd.ms-fontobject .eot 
  AddType application/x-font-ttf .ttf
  AddType application/x-font-opentype .otf
  AddType application/x-font-woff .woff
  AddType image/svg+xml .svg
  
  # Turn it on
  ExpiresActive On

  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Fonts
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
  ExpiresByType application/x-font-ttf "access plus 1 year"
  ExpiresByType application/x-font-opentype "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

Some users have reported needing the following section in addition to the code above in your .htaccess file:

<Directory /path/to/scripts>
    AllowOverride FileInfo Options Indexes
</Directory>

NGINX #

By default nginx has no default mime types for fonts, and an incorrect mime type for .eot files. Go to folder with configs and find where mime types are defined. Usually, that’s in the mimes.types file.

Search for .eot and add the strings below:

application/x-font-ttf           ttc ttf;
application/x-font-otf           otf;
application/font-woff            woff;
application/font-woff2           woff2;
application/vnd.ms-fontobject    eot;

For CORS headers, add something like this to your vhost config:

location ~* \.(eot|otf|ttf|woff|woff2)$ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Header "origin";
    add_header Access-Control-Allow-Methods "GET";
}

IIS #

Add the following MIME type declarations via IIS Manager (HTTP Headers tab of website properties):

.eot application/vnd.ms-fontobject
.ttf application/octet-stream
.svg image/svg+xml
.woff application/x-woff

If you do not have access to the IIS Manager, you can add these declarations in your Web.config file, in the <system.webServer> section.

<system.webServer>
    <staticContent>
        <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
        <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
        <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
        <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
    </staticContent>
</system.webServer>

For CORS, first, configure the OPTIONSVerbHandler to execute before .Net handlers.

In IIS console, select “Handler Mappings” (either on server level or site level; beware that on site level it will redefine all the handlers for your site and ignore any change done on server level after that; and of course on server level, this could break other sites if they need their own handling of options verb).
In Action pane, select “View ordered list…” Seek OPTIONSVerbHandler, and move it up (lots of clicks…). You can also do this in web.config by redefining all handlers under <system.webServer><handlers> (<clear> then <add …> them back, this is what does the IIS console for you) (By the way, there is no need to ask for “read” permission on this handler.)
Second, configure custom http headers for your cors needs, such as:

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS" />
            <add name="Access-Control-Allow-Headers" value="Content-Type, soapaction" />
        </customHeaders>
    </httpProtocol>
</system.webServer>