Making AWS Amplify work with Rollup

[swyxio]

---

source: devto devToUrl: "https://dev.to/swyx/making-aws-amplify-work-with-rollup-2d9m" devToReactions: 43 devToReadingTime: 1 devToPublishedAt: "2020-06-02T22:22:28.573Z" devToViewsCount: 3805 title: Making AWS Amplify work with Rollup published: true description: AWS Amplify assumes CommonJS, which Rollup is allergic to. I recently discovered that you can make it work with Rollup with a few tweaks. category: tutorial tags: Tech, AWS, Amplify, Rollup, JavaScript

AWS Amplify assumes CommonJS, which Rollup doesn't work well with (Hence all Amplify web app examples use Webpack). I recently discovered that you can make it work with Rollup with a few tweaks.

Let's take the default Svelte app, which uses Rollup:

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install

This default rollup template lacks just two things you need to use Amplify with Rollup. Install @rollup/plugin-json:

npm i -D @rollup/plugin-json

And add it to your rollup.config.js. Also set the node-resolve plugin's preferBuiltins option to false:

import resolve from "@rollup/plugin-node-resolve";
import json from "@rollup/plugin-json"; // new!

export default {
  // ...
  plugins: [
    // ...
    resolve({
      browser: true,
      preferBuiltins: false, // new!
      dedupe: ["svelte"],
    }),
    json(),                  // new!
    // ...
  ]
}

And now you are done!

This setup will work fine with Amplify. For a full demo adding a full Amplify CRUD backend to a working Svelte frontend in under 30 mins, check out my recent practice run here!

Dev.to Embed: {% youtube hCoRYc_FzK0 %}