LTI 1.3 and React/Vue/??

[ColinMurtaugh]

Hi --

We've developed a number of LTI tools over the years using Python/Django on the server and Bootstrap and plain JS on the client. Now we have a need to build some more complex user interfaces, and we're exploring doing more front-end development using a framework like React or Vue. 

I'm interested in hearing any experiences, advice, warnings, successes and horror stories that you have using modern front-end frameworks to develop LTI tools for Canvas. I'm particularly interested in patterns for handling LTI 1.3 launches and authentication/authorization. 

At this point we're focusing on React/NextJS and Vue, but open to hearing about others as well. 

Thanks!

--Colin

[matthew_buckett]

We've been reasonably happy with React as a front end technology for building Canvas tools and enhancements. We went with React because of the Instructure UI support (https://instructure.design/) which allows interfaces to easily match Instructure's style and behaviour. It's reasonably easy to have the tool follow the Canvas local theme and also pickup the users high contrast setting and display appropriately. 

We have extracted out the handling of LTI launches into a backend service which is used by all our tools. This service handles the LTI launch flow and allows a static frontend to retrieve a token that contains all the claims from the launch. We re-sign the token ourselves which allows us to add additional claims in.

We originally built our frontend usings create-react-app (https://create-react-app.dev/) which provided most of the scaffolding but are in the process of switching to vitejs (https://vitejs.dev/) as it's better supported and seems to have more of a future.

We're hoping to open sources the some more of the core parts of our stack in the near future.