Zendesk Support App: 403 errors for JavaScript files when installed only

5 Comments

  • Joseph May

    Hi Tyler-

    Thanks for writing in  - I'd like to ask you to please submit a ticket about this. There's some details missing that will be better discussed in a different medium. As these assets are working locally and not when uploaded to our servers, having our Support team dig a little deeper is the next best step. Please be sure to include the app when creating a ticket. It looks like you may be using webpack, so inclusion of the source directory (minus the node_modules folder) is preferred.

    Regards,

    Joey

    0
  • CX Company

    The same is happening to me.

    I thought that it could be related to the relative path and the way that you are loading our files.

    I tried to change the files to be served directly under the "build/assets" directory but this also didn't work.

    Requests are failing with a message similar to this one

    403

    <Error>
    <Code>AccessDenied</Code>
    <Message>Access Denied</Message>
    <RequestId>XXXXXXXXXXX</RequestId>
    <HostId>
    XXXXXXXXXXXXXXXXXXXXXXXXX
    </HostId>
    </Error>
     
    This happens for both this kind of URLS
     
    In any case running the files with ZAT SERVER works perfectly and never yields this kind of error
     
    Has there been any update on this topic? It's really strange to see that the ZAT SERVER operation works, and serves the files perfectly, and then when you upload the app to the store and expect it to work just the way it did it returns 403's to load any of the files that you have as dependencies to make your app work
    0
  • CX Company

    I found a workaround for the app to work.

    If you are like me using webpack and you are having apart of the index.html file other files that may include .js or .css dependencies what you can use is the plugin for webpack HtmlWebpackInlineSourcePlugin which will add to the index.html file all of the code that those .js or .css have.

    There is a downside though, if you have a very large amount of dependencies there is a small change that you run over the 2Mb of file size, which would bite you again in the future...

    Kind regards

    0
  • Tyler Landis

    Yeah so I meant to update this with my findings. I did have a chat with one of the Zendesk Support Devs who pointed me in the right direction.

    First of all, you cannot reference anything that is outside of the assets folder within your index.html (or whatever your root html file is). Here's the steps that I had to make this work.

    Configuration

    Add your "assets" and "translations" folders that are created from the 'zat new' command under your "src" folder (or whatever your app root folder is). Also, add your manifest.json here as well.
    You'll need to make sure you reference these folders and files in your angular-cli.json/angular.json so they are included in your build. I also put my index.html file inside of the "assets" folder and referenced it in my angular-cli.json:
    "apps": [
    {
    "root": "src",
    "outDir": "dist",
    "assets": [
    "assets",
    "translations",
    "favicon.ico",
    "manifest.json"
    ],
    "index": "assets/index.html",

    ...
    }

    You'll need to remove the base-url tag in your index.html if you have one. This can be problematic for angular builds so you'll need to set it programatically for routing to work properly. In your root module, you'll need something like:
    providers: [
    { provide: APP_BASE_HREF, useValue: '/' }
    ]

    Building your Angular Project

    When you get around to performing a build, you'll need to take some actions to ensure the output files are not referencing anything outside of the "assets" folder:

    You'll need to change the relative urls to the js and css files so that they are not referencing the parent directory in your output index.html file. This can be achieved through the angular-cli using the 'deploy-url' argument. For example, my build command looks like:
    ng build --deploy-url=''

    Now, changing the deploy-url does not change where the static assets are actually located. The angular-cli allows you change what folder the root html file is output to, but the static files are always relative to it's location in a parent directory. So the final step for me was to create a gulp task to move the static files to an 'assets' folder

    Gulp Task

    var gulp = require('gulp');
    var del = require('del');

    var source = "./dist/**.{js,map,css,txt}";

    gulp.task('move-files', function () {

    var destination = './dist/assets';

    console.log("Moving js/sourcemap files in assets folder for Zendesk integration...");

    gulp.src(source)
    .pipe(gulp.dest(destination))
    .on('end', function () {

    console.log("Deleting old build directory files...");
    del([source]);
    });
    });


    gulp.task('default', ['move-files'], function () {

    console.log("Done Gulp Tasks");
    });

     

    To Build

    ng build --deploy-url=''; gulp

    This will first build your project and output to the output folder (dist for me) with the static files inside of the dist folder. The gulp task just moves the static files to the assets folder so that the relative urls that we set using the 'deploy-url' argument matches the location of the static files

     

    I hope this is helpful to others who would like to use Angular and specifically the angular-cli to create Zendesk support apps.

    0
  • Joseph May

    Thanks for sharing, Tyler!

    0

Please sign in to leave a comment.

Powered by Zendesk