Deploy Svelte app on AWS Amplify

ยท

2 min read

Today I finished my sample svelte app development. Svelte apps are easy to deploy on Netlify. I work in clouds so I was curious how can I deploy the svelte app on leading cloud providers. I picked up my battle with AWS Amplify.

Challenge: Deploy svelte app on AWS amplify

Pre-requisite: Svelte app checked-in Github.

Let's make sure everything works well in local

> git clone {repo_url}
> npm install
> npm run dev
> svelte-app@1.0.0 dev /Users/<user>/svelte_tutorial
> rollup -c -w
rollup v2.61.0
bundles src/main.js โ†’ public/build/bundle.js...
LiveReload enabled
created public/build/bundle.js in 308ms
[2021-12-13 17:17:35] waiting for changes...

> svelte-app@1.0.0 start /Users/<user>/svelte_tutorial
> sirv public --no-clear "--dev"
Your application is ready~! ๐Ÿš€

  - Local:      http://localhost:5000 <--- yuppie time to go to the browser

Okay! all good, let's login to AWS console and search for Amplify and follow the steps

Step 1: Host an app > Click Github. github-selection.png

Step 2: Select sample app git repo, amplify will read the files and recognize the build and show you the amplify.yml. saved-setting.png

Step 3: Edit amplify.yml to change baseDirectory setting to public dir as svelte build the production-ready build under the public directory. edit-screen.png

Step 4: Click the "Save and Deploy" button. save-all-setting.png

Step 5: Successful deployment screen. deployed.png

Verify app loading on the browser. Enter the name of your favorite planet and get logged on earth :).

Screen Shot 2021-12-13 at 5.37.40 PM.png

In summary, Svelte apps are quick to develop and AWS Amplify gives you quick steps to deploy the application.

Happy Deploying!

Read more about
What is Svelte
What is AWS Amplify

ย