End-to-end SaaS Template using AWS Amplify, Apollo Client, Chakra, and NextJS.
đš DynamoDB
đš AppSync (GraphQL)
đš Cognito
đ¸ React / NextJS
đ¸ Amplify
đ¸ Apollo Client
đ¸ Chakra
âĒī¸ Pulumi
âĒī¸ GitHub Actions
You will need to setup the AWS CLI on your local system, if you haven't already.
You will need to setup the Pulumi CLI and configure it with AWS.
We need NodeJS, so you need to setup NodeJS on your local system.
We need Amplify to set up the Front End, so you need to setup the Amplify CLI on your local system.
This repository is a monorepo, but you can split out the front-end and back-end folders into separate repositories.
Go to the back-end folder:
cd back-end
Install the dependencies:
npm install
Use Pulumi to setup the stack in the cloud:
pulumi up
This command will set up a stack consisting of 18 resources in AWS.
They boil down to:
When the pulumi up
command has finished running, you will get an output that looks similar to this.
Note down this output:
Outputs:
appSyncID : "<APPSYNC-ID>"
dynamoID : "<TABLE-NAME>"
graphQLEndpoint : {
GRAPHQL : "https://<GRAPHQL-ENDPOINT>/graphql"
REALTIME: "wss://<REALTIME-ENDPOINT>/graphql"
}
identityPoolID : "<IDENTITY-POOL-ID>"
userpoolClientID: "<USERPOOL-CLIENT-ID>"
userpoolID : "<USERPOOL-ID>"
If Pulumi complains about missing region, use the command:
pulumi config set aws:region eu-west-1
If you want to use another region than eu-west-1
, go to the file back-end/resources/variables/
and change the region here as well.
export const variables = {
region: 'eu-west-1' as const, // <-- change this to your region
dynamoDBTables: {} as Record<string, Output<string>>,
};
Go to the front-end folder:
cd front-end
Install the dependencies:
npm install
Use Amplify to link the front-end to the back-end:
amplify init
This will setup an Amplify project in the cloud for the front-end.
A file called src/aws-exports.js
will be created. You can safely deleted this file.
(In fact, you can delete the src
folder entirely).
Go to the file front-end/deployment/config/config-development.ts
.
Now, use the Pulumi output from before, to setup the environment:
const configDevelopment = {
...
/**
* Add the details from the Pulumi output here, after running 'pulumi up'
*/
USER_POOL_CLIENT_ID: '<USERPOOL-CLIENT-ID>',
USER_POOL_ID: '<USERPOOL-ID>',
IDENTITY_POOL_ID: '<IDENTITY-POOL-ID>',
GRAPHQL_ENDPOINT: 'https://<GRAPHQL-ENDPOINT>/graphql',
};
Next, run the command:
amplify codegen add -apiId <APPSYNC-ID>
Finally, setup hosting for the front-end:
amplify hosting add
Sign into AWS and link your GitHub repository to Amplify Console.
When the environment has been set up, go to the Environment variables page from the left menu, and click Manage variables.
Add a new variable called NEXT_PUBLIC_CLOUD_ENV
with the value dev
.
Amplify will create a hosted URL for you.
Go to the file front-end/deployment/config/config-development.ts
again, and add the URL here:
/**
* Add your hosted dev URL here
*/
const HOSTED_URL = '<ADD-YOUR-HOSTED-URL-HERE>';
Finally, run:
amplify push
amplify publish
Let Amplify do it's thing đ
Start the app by running npm run dev
.
The app will start locally on http://localhost:3000.
Create a new user by going to the /signup
page.
Sign into the app by going to the /signin
page.
Authentication should work smoothly at this point - now, start building your SaaS đ
If you want to use different environments (dev and prod), simply set up Pulumi in a different environment, and paste the output into the front-end/deployment/config/config-production.ts
.
Similarly, create an environment variable in the Amplify Console for the production environment called NEXT_PUBLIC_CLOUD_ENV
with the value prod
.
PRs are welcome!