How I Released A Next JS App to the Google Play Store (with AWS Amplify)

A Website I created for a Hackathon is now in Review for the Google Play Store.

PublishedApril 13, 2021

•5 min read•View as Markdown

How I Released A Next JS App to the Google Play Store (with AWS Amplify)

Jarrod Watts

A software engineer turned developer relations engineer in the web3 space, from Australia 🇦🇺.

Comments (1)

Join the discussion

Satish Kumar Jaiswal5y ago

A nice article.

I recently faced a weird issue relevant to this and raised in stack overflow along with a support ticket to AWS. Do you think you can give some opinion on this. StackOverflowPost

Jarrod Watts5y ago

Hey Satish, thanks mate - I took a quick look at your post. Is there any specific reason you want to use AWS Amplify for hosting the project?

I had a number of problems deploying to Amplify, in the end I swapped to using Vercel for the deployment instead.

It's very odd that it works locally and not on AWS Amplify though, sounds pretty frustrating...

One thing I did notice is that you're configuring images in your next.config.js file, which AWS Amplify does not currently support. AWS Amplify only supports Next.JS deployments on versions 9.x.x so that does not include images which were introduced in version 10... So that may be a potential reason.

If that doesn't help I'd recommend tweeting at AWS Amplify or joining their discord to try and get some further support.

Hope you can resolve it!

Satish Kumar Jaiswal5y ago

Jarrod Watts

Thanks mate for the reply. I even removed the image code and simply followed:

yarn create next-app --typescript

Configure Amplify and AWS

Use CI CD option to deploy to AWS via Amplify and link repository for the frontend app (ALL WORKS)

Configure next.config.js for PWA support using NextJS plugin called next-pwa Deploy again (BUILD FAILS)

Satish Kumar Jaiswal5y ago

Jarrod Watts

Using Amplify just wanted more control rather using third party. In next.config.js, when reference to const withPWA = require(next-pwa) is removed, the issue is gone but loosing pwa support.

Amplify frustration is; it shows as 'internal error' within its logs and hence tough to identify the cause with insufficient documentation on Amplify pwa.

I even used 'next' version 10 that's as per docs is supported (limited).

Satish Kumar Jaiswal5y ago

Jarrod Watts Finally, It's 9.x.x that worked but still would wait AWS response because that means NextJS latest version vs AWS supported will lag behind to use features like Image component from the latest NextJS version.

More from this blog

What is dev rel? (my perspective)

“What does dev rel do?” I see this question get asked surprisingly often. Recently, I was given the opportunity to build a developer relations program from scratch and reflect on my 3 years of experience in this role to create a strategy. I decided t...

Sep 25, 202410 min read868

Understanding the Commit Reveal Scheme (with Solidity examples)

Ever wanted to store a piece of information on-chain but keep it a secret until later? In this quick post, we'll explore the commit-reveal scheme and provide an example of how you can implement it within a smart contract using Solidity. What is the C...

Jun 30, 20244 min read1.7K

Understanding the Commit Reveal Scheme (with Solidity examples)

Get Started with Coinbase Smart Wallet

In this tutorial, I'll walk you through the process of setting up Coinbase Smart Wallet inside a front-end application. By the end of the tutorial, we'll build a simple Next.js application where users can: Connect to your application via Coinbase Sm...

Jun 7, 20247 min read829

The Ultimate Guide to Sequencers in L2 Blockchains

As part of Ethereum's rollup-centric roadmap, rollups are taking away the heavy lifting from Ethereum and scaling its throughput by orders of magnitude, reflected in the $20B+ TVL stored in L2 chains today. But, with great power, comes great respons...

Jan 19, 20247 min read7.0K

The Ultimate Guide to Sequencers in L2 Blockchains

Create A Blockchain Indexer with Chain Indexer Framework

This guide will show you how to build your own indexer for an EVM-compatible blockchain such as Ethereum, Polygon Proof of Stake, and more! By the end, you'll have a Docker container running Kafka that captures all blockchain events that you specify,...

Dec 5, 20237 min read1.4K

Create A Blockchain Indexer with Chain Indexer Framework

Jarrod Watts' Blog

34 posts

I'm a software engineer turned developer relations engineer currently focussed on web3. I write a combination of opinion pieces of trends in the space and detailed tutorials to create real apps!

For those who prefer to feed their craving for programming content via video, I've re-created this article on YouTube as well, check it out if you are interested!

(please excuse the clickbait...)

https://www.youtube.com/watch?v=nmcC06SseVc

What Is The App?

You can check out the website version of the app here: https://aybow.com

On February 9th this year, Hashnode and AWS Amplify announced they were hosting a Hackathon.

My submission was a fitness-based web application where you could create custom workout routines with a drag and drop user-interface.

You can find that article here (it's a very long read...)

Although I didn't place in the hackathon, I have continued working on the web application over the past month, and have made a lot of progress since:

Added Social Sign Up & Sign In.
Added "Start Day" functionality, to save the user's weight on each exercise.
Redesigned the entire onboarding flow.
Added Recommended Routines on the homepage.
Made the web app a PWA (Progressive Web App) and a TWA (Trusted Web Activity.
Submitted the app to the Google Play Store.
Fixed a tonne of bugs! 🐞

What Is The Tech Stack?

The Backend

AWS Amplify

AWS Amplify is managing our entire back-end serverlessly (that is totally a word). It is orchestrating everything. From the image storage, to the user authentication, to the raw data. Here's exactly what it's managing:

DynamoDB: In my DynamoDB, I've got three main tables:

Users Table (Rows are created via a Lambda Function on a Sign Up Trigger)
Saved Weights Table (Where exercises are stored when users save their weights after working out)
Routines Table (Where all of the recommended and user-made workout routines are stored)

GraphQL & AppSync: I'm using AWS AppSync as a way of querying and mutating all of the data sources that I have stored in DynamoDB. AWS Amplify auto-generates all of the possible things I could ever need to do on my GraphQL API, as well as types for each of the queries, mutations, and subscriptions that it generates.

AWS Cognito: I'm using Cognito for the Authentication and Authorization of my application. Every time someone signs up to the site, either with email and password or with social media, (Facebook & Google) they have an account and a row in the database created for them using AWS Lambda.

S3: AWS S3 is where I'm storing my images for the routines.

The Front End

Next JS, React, Typescript

The dream team!

React works amazingly well with AWS Amplify, and all of the support that Next JS provides on top of React (server-side rendering, the pages folder 🤣) are incredible.

I only recently adopted Typescript into my "go-to" frameworks when it comes to web development, but I don't think there is any turning back now, if you haven't given it a try yet I would 100% recommend doing so!

TypeScript has provided me so much more confidence when deploying my app to the public that there aren't any pesky bugs that could happen, plus the autofill alone when working with objects is enough to get me on board!

How I made it into an App

Converting the website into an application was a two-step process.

Converting the web-app to a PWA (Progressive Web App).
Creating a TWA (Trusted Web Activity) from the PWA.

PWAs are web apps that use emerging web browser APIs and features along with traditional native app-like features, such as offline support.

TWAs are a new way to open web-app content, such as a PWA from an Android app, using protocol based on Custom Tabs.

To create a PWA out of your Next JS website, I first took a look at the example that Vercel has on their GitHub examples:

https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app

Taking note of the added PWA features, such as:

next.config.js file
manifest.json file
/public/icons folder
the <meta> tags in _app.js

And copying them all over to my codebase.

Under the hood, the example linked above is using next-pwa, which is a library specifically made for creating PWAs out of Next JS websites; that can be found here:

https://github.com/shadowwalker/next-pwa

Next-PWA under the hood of the hood is using Workbox; A a set of libraries made by Google, that help build the service worker(s) required for a Progressive Web App to be production ready.

To make sure my website was really a PWA, I used the Lighthouse tool in Google Chrome Dev Tools. Anything that wasn't approved by the Lighthouse Audit, I fixed until my website was PWA approved.

pwa lighthouse.JPG

But alas, in order to submit an application to the Google Play Store, you need to have an APK, which a PWA still doesn't have.

There are a few videos out there about how to set up APK's manually using Android Studio, but I stumbled across a GitHub repository called Bubblewrap, made by the Google Chrome team.

https://github.com/GoogleChromeLabs/bubblewrap

I used the Bubblewrap CLI and followed along with this guide to convert my PWA to a Trusted Web Activity.

One small update from that video above if you are following along: You need to generate your assetlinks.json using the bublewrap fingerprint generateAssetLinks [Your SHA256 fingerprint from the Google Play Store here]

That was it! Bubblewrap CLI created a signed APK that I could upload along with all of my assets to list my app on the Google Play Store.

Conclusion

My App "Aybow Fitness" is currently in review for the Google Play Store, once it goes live, you'll be able to view it via this link.

Thanks for reading!

Command Palette

Comments (1)

More from this blog

What Is The App?

What Is The Tech Stack?

The Backend

AWS Amplify

The Front End

Next JS, React, Typescript

How I made it into an App

Conclusion