Using react-ace with CDN and without webpack or similar tool

Question

I found myself on a React project that uses the Scorm API to interface with the Canvas LMS. Now I want to import the react-ace library but apparently Canvas doesn't like bundlers.

I know someone had similar issues for example with React Router, but I don't understand the logic behind the solution.

I import the cdn with <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.22.0/ace.js"></script>.

I'm sifting through the node_modules but things like

const Editor = Ace;

don't work.

Any ideas?

Mark · Answer 1 · 2023-06-07T22:43:56.820

So I'll make an attempt to assist as I use routers in Angular/Vue and it can get a little tricky hosting a single page app on a host thats using say NGINX, Apache, or other.

Commonly your router wants to take a path and then add /page1, /page2 or something like that to the path. But the server looks at that like a server request. And SCORM and the Server probably won't like that. Instead when we setup serverless or nginx style hosts we'd be pushing these back to the index.html.

# where the root here
 root /usr/share/nginx/html;
# what file to server as index
 index index.html;

 location / {
     # First attempt to serve request as file, then
     # as directory, then fall back to redirecting to index.html
     try_files $uri $uri/ $uri.html /index.html;
 }

or

# Cloudformation/S3 settings 
DefaultRootObject: index.html
  CustomErrorResponses:
    - ErrorCachingMinTTL: 0
      ErrorCode: 403
      ResponseCode: 200
      ResponsePagePath: /index.html
    - ErrorCachingMinTTL: 0
      ErrorCode: 404
      ResponseCode: 200
      ResponsePagePath: /index.html

You won't have control over the LMS (Canvas) so this puts more pressure on how to configure a react route without its native /path. I accomplished this using more like a HashRouter via https://reactrouter.com/en/main/router-components/hash-router

I've used jQuery in the past to load pages/templates this way so it doesn't trigger a redirect on the server. It's an unfortunate thing as all these frameworks modernize and older LMS's are outside of our control. They didn't think of this.

Older style approach with jQuery here where I used a #!p_0 hash after so it didn't send the request to the server. But still loads the page dynamically. http://content.cybercussion.com/scobot/Player/index.html#!p_0

Outside of that I think you have a npm install react-ace vs using the CDN one which is probably a native JS setup.

Using react-ace with CDN and without webpack or similar tool

1 Answers1