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
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
Download Demo app code
git clone https://github.com/HumeAI/hume-api-examples
cd hume-api-examples
Development
npm install
npm run dev
Build
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.
After it finishes running, you'll have a URL hosted by Netlify.
Netify url : https://6575c5e5fc89902adec12a2c--delicate-dodol-3779df.netlify.app
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
npm install -g @aws-amplify/cli
Configure the Amplify CLI
amplify configure
Adding Amplify hosting
$ 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:
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.
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
- Custom CDN behaviors and cache policies
- Feature branches and pull request previews
- CI/CD capabilities beyond just hosting
- Built-in monitoring and logging
Cons:
1. More complex configuration than Netlify
No free tier, pay-per-use pricing
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 Amplify 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
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
Top comments (0)