AWS Amplify vs Netlify comparison for hosting static websites
Tags: aws, netlify, webdev, singlepageapp
Published: 2024-03-31 11:55:40

# Before we get into 
 When you're working on a software development project, you might need a simple demo webpage or demo app to demonstrate your technology or do a POC.  Static web pages that are organized as a simple Single Page App (SPA) are useful at this time. There are many web development frameworks that help you implement SPA.(Next.js, Gatsby, Hugo, Nuxt, Jekyll, etc...) You can create a demo app with SPA and host it on the web as a simple static web page to ensure accessibility.  There are many services that support various frameworks that can be used for this (Netlify, StackBlitx, AWS Amplify, etc...). There are also services (including frameworks) such as Streamlit and Gradio that allow you to create a SPA-based demo web with Python and host it on the web.  These services specialize in rapid web app development for machine learning models for services (I'll cover them in another article when I get a chance). 

# Configuring the demo app with Next.js
Next.js is an open source framework for developing React-based web applications. It offers a wide range of features such as server-side rendering (SSR), static site generation (SSG), automatic code splitting, image optimization, and more to enable fast and user-friendly web app development.

## Key features of Next.js:
- Server-side rendering: Render HTML, CSS, and JavaScript on the server before sending the page to the client to speed up page loading.
- Static site generation: Deploy your web app as a static site by generating HTML, CSS, and JavaScript as static files during the build phase.
- Automatic code splitting: Load only the code you need to speed up page loading.
- Image optimization: Automatically optimize images to improve the performance of your web app.
- SEO-friendly: Server-side rendering makes it easy for search engine crawlers to index your pages.
- Multiple routing options: Along with default routing, we support file-based routing, dynamic routing, catchall routing, and more.
- API routing: Easily create and manage server-side APIs.
- Community support: We have an active community and a wealth of documentation and tutorials.

Next.js is right for you if you:
You want to develop fast, user-friendly web apps.
- To create SEO-optimized web apps
- To develop React-based web apps
- Framework that offers a wide range of features
- Next.js is a powerful framework that is easy to learn, easy to use, and offers a wide range of features that can greatly simplify web app development.


## Learn more about Next.js:
- Official documentation: https://nextjs.org/docs/
- Tutorials: https://nextjs.org/learn/
- Community: https://discord.gg/nextjs
<br>

## Hume AI's demo app
Hume AI is a company that provides an API that recognizes human emotions from text, voice, and vision using AI technology.   They have a demo app based on Next.js that can service their API, so I tested it using it. In this article, I will build and run this web app locally and finally deploy it to Netlify and AWS Amplify.

- App Code Repository : https://github.com/HumeAI/hume-api-examples

You can try it out here: https://www.hume.ai
### Requirements
- [Node](https://nodejs.org/)

### Download Demo app code 
```bash
git clone https://github.com/HumeAI/hume-api-examples
cd hume-api-examples
```

### Development

```bash
npm install
npm run dev
```

### Build
```bash
npm build
```

Development mode will start serving on `localhost:3001`.


# The choice for hosting static websites
 Two popular options that web developers often utilize to host static websites or single page apps (SPAs) are Netlify and AWS Amplify. Both platforms support automatic builds and hosting in Git repositories, making static site deployment very easy. In this article, we'll compare the pros and cons of each based on real-world examples of NextJS app deployments.
We've deployed Hume AI's Example demo app written in Next.js to **Netlify** and **AWS Amplify** respectively.
- Netlify: https://6575c5e5fc89902adec12a2c--delicate-dodol-3779df.netlify.app
- Amplify: https://dev.d1c4gaqa0opsnq.mynextapp.com/

## Netlify
Netlify brands itself as an "All-in-one platform for automating modern web projects." It offers continuous deployment from Git, serverless functions, a global CDN, domain management, SSL/TLS certificates, and more.
### Deploy and Hosting
The simplest way to host with Netlify is to upload the output files built with 'Deploy manually' by dragging and dropping or browsing to upload, and you can easily connect to the automatically generated URL to host your web app.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nrdvzd1aksvbt5qh5akp.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rggxwak1tapwnklfmmsx.png)

After it finishes running, you'll have a URL hosted by Netlify.
Netify url : https://6575c5e5fc89902adec12a2c--delicate-dodol-3779df.netlify.app <br>
#### Pros:
	1.Excellent developer experience with instant cache invalidation and atomic deploys
	2. Simple HTTPS setup with free Let's Encrypt SSL/TLS certificates
	3. Form handling without needing a backend
	4. Serverless functions with generous free tier
	5. Plugin ecosystem for extending builds
	6. GitHub integration with deploy previews
#### Cons:
	1. Paid plans required for features like split testing, analytics, etc.
	2. Limited control over CDN caching and behavior

## AWS Amplify
AWS Amplify is a service that provides an all-in-one solution to build and deploy full-stack serverless web apps, including hosting for single page apps and static sites. It layers on top of other AWS services.
### Deploy and Hosting
#### Requirements
	- [Node](https://nodejs.org/)
	- AWS Account
#### Install Amplify CLI
```bash
npm install -g @aws-amplify/cli
```
#### Configure the Amplify CLI
```bash
amplify configure
```
#### Adding Amplify hosting
```bash
$ amplify init

? Enter a name for the project: mynextapp
? Enter a name for the environment: dev
? Choose your default editor: Visual Studio Code (or your preferred editor)
? Choose the type of app that youre building: javascript
? What javascript framework are you using: react
? Source Directory Path: src
? Distribution Directory Path: out
? Build Command: npm run-script build
? Start Command: npm run-script start
? Do you want to use an AWS profile? Y
? Please choose the profile you want to use: <your profile>
```
#### Add hosting with the Amplify add command:
```bash
amplify add hosting
```
#### Deploy the app with the Amplify publish command:
You can integrate Amplify's Framework via Amplify configuration in the Source Code folder without accessing the Web UI, and run it from build to deployment in a single step using the 'amplify publish' command in the CLI environment. 
```bash
amplify publish

✔ Successfully pulled backend environment dev from the cloud.

    Current Environment: dev

┌──────────┬────────────────┬───────────┬───────────────────┐
│ Category │ Resource name  │ Operation │ Provider plugin   │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting │ Create    │ awscloudformation │
└──────────┴────────────────┴───────────┴───────────────────┘

? Are you sure you want to continue? Yes
```

After it finishes running, you'll have a URL hosted by AWS Amplify.
like 'Amplify url : https://dev.d1c4gaqa0opsnq.mynextapp.com/'

#### Pros:
	1. Tightly integrated with the AWS ecosystem
	2. Custom CDN behaviors and cache policies
	3. Feature branches and pull request previews
	4. CI/CD capabilities beyond just hosting
	5. Built-in monitoring and logging
#### Cons:
	1. More complex configuration than Netlify
	2. No free tier, pay-per-use pricing
	3. SSL certificates require provisioning
	

# Conclusion
Both **Netlify and AWS Amplify offer powerful solutions for hosting static web pages with unique features and considerations**. **Netlify is ideal for small to medium-sized projects with simple deployment requirements due to its **simplicity and ease of use**.  On the other hand, **AWS Amplif**y offers **advanced customization options and seamless integration with the broader AWS ecosystem**, making it ideal for larger projects that require scalability and flexibility.  Ultimately, the choice between Netlify and AWS Amplify depends on your project requirements, budget, and familiarity with the respective platforms.

 In the end, the best platform for you depends on your specific needs and skill level. Both Netlify and AWS Amplify offer free trials, so we recommend trying both to see which platform is best for you.


### Additional Information
### Allow insecure connection on web browser setting
#### Setting up for insecure content <br>
For Mixed content problem caused by insecure(without ssl) connection with another app manager
- Chrome : Settings > Privacy and security > Site settings > Additional content settings > Insecure content 
- Add the sites : 
    - [*.]netlify.app
    - [*.]amplifyapp.com

# References
- https://www.netlify.com/jamstack/
- https://docs.netlify.com/get-started/
- https://docs.amplify.aws/javascript/deploy-and-host/frameworks/deploy-nextjs-app/
- https://github.com/HumeAI/hume-api-examples
- https://www.damirscorner.com/blog/posts/20210528-AllowingInsecureWebsocketConnections.html