Is Amplify compatible with a vanilla javascript + HTML client-side static website?

[ajhool]

Which Category is your question related to?

Amplify core. (although I am specifically interested in Auth).

What AWS Services are you utilizing? Cognito

Provide additional details e.g. code snippets HTML + CSS + Javascript, classic website. Have found the other cognito javascript SDKs to be unmanageable and would like to upgrade to Amplify javascript (preferably via cdn rather than npm import).

Is there any reason that Amplify can't be used in a vanilla JS client-side website? Would the flow still be basically:

// pseudocode from memory
Amplify.configure({  ... existing Cognito hostedUI information, s3 buckets, etc. ... })
Auth.federatedSignIn();

[haverchuck]

@ajhool You should be able to accomplish this. These docs should point you in the right direction, and include a webpack config to help.

[ajhool]

@haverchuck Thanks. So, just to be clear, there isn't an official existing script that can be imported; the script needs to be built with webpack to target es5 (https://caniuse.com/#search=es5) or es6 (https://caniuse.com/#search=es6), first?

Would the amplify team be interested in a PR that would add a circleci step to run webpack and build the vanilla javascript with an es5 or es6 target, with the eventual goal of creating an amplify script cdn for each module? The "old" way to integrate cognito with a standard html + js app (https://github.com/aws/amazon-cognito-auth-js) appears to be no longer maintained, so there might be a user base that would benefit from a hosted vanilla script like this.

For instance, I have a client who would like to integrate Cognito with their traditional html + js website and even "small" extra steps like a webpack build can make maintenance difficult.

[haverchuck]

@ajhool I believe that webpack config is just for the demo app, not the library itself. You may be able to just download the package and point to it with a hardcoded script tag (though I haven't actually tried this). I'm raising the idea of a CDN with our team.

[ajhool]

Okay, thanks. I will try it within the next week and can report back about how it goes!

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[ajhool]

So far, importing the amplify.min.js file from the downloaded amplify node_module appears to be worlking. Would still appreciate an official CDN!

[SciTechDude]

Recently I implemented a browser based App with plain JS + HTML. I did not use amplify cli. I basically directly configured using amplify UI , connected CodeCommit repo , configured Cognito backend and Route-53. With this I was able to deploy webApp directly.
I see that amplify basically launches app on a docker container with minimal config. Only drawback is probably because there is no backend created and all of the dependancies are browser based, I could not access process.env to switch between prod and dev branch automatically. I need to change one variable manually every-time code is pushed from dev. or if dev is refreshed from dev to make sure it doesn't point to wrong portal.

[t829702]

@ajhool You should be able to accomplish this. These docs should point you in the right direction, and include a webpack config to help.

Your link https://aws-amplify.github.io/docs/js/start?platform=purejs now redirects to front page https://docs.amplify.aws/start there no longer has any purejs example, do you still have the purejs example at another place?

[bannostookaylo]

I'd be curious if there is still a "pure" js example in place... something without using webpack or any kind of bundler... I've ran across these nice write ups

• https://arcoirislabs.medium.com/aws-amplify-in-vanilla-javascript-6c4d8b3f29b0
• https://dev.to/illusivemilkman/amplify-authentication-flow-without-any-front-end-frameworks-vanilla-javascript-3hjg

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.