How to work with your deployed AI SaaS platform locally for development and testing

Local Development

This guide explains how to work with your AI SaaS platform locally for development and testing. You have two main options after deployment:

Using the deployed frontend: Access your application directly through AWS Amplify
Local frontend development: Run the frontend code locally while connecting to the deployed backend

Accessing the Deployed Frontend

The simplest way to use your AI SaaS platform is to access the frontend directly through AWS Amplify.

Find Your Amplify URL

You can find your Amplify URL in several places:

In the CDK deployment outputs as AmplifyAppUrl
In the AWS Amplify Console
By using your custom domain, if configured

The URL will be in one of these formats:

https://main.xxxxxxxxxxxx.amplifyapp.com (default Amplify domain)
https://yourdomain.com (custom domain)

Access Your Application

Simply navigate to your Amplify URL in a web browser. Your application should load and connect to all backend services automatically.

The deployed frontend is automatically connected to your backend services through environment variables that were set during the CDK deployment process.

Create an Account and Test

Once you access your application:

Create a new account by signing up
Verify your email if required
Sign in to your account
Test the various features and AI services

Everything should work seamlessly since all components are deployed and connected.

For development purposes, you might want to run the frontend code locally while still connecting to the deployed backend. This allows you to make changes to the frontend code and see the results immediately.

Collect Environment Variables

To connect your local frontend to the deployed backend, you need to collect several environment variables from your deployment:

Cognito User Pool ID: Found in CDK outputs as UserPoolId
Cognito User Pool Client ID: Found in CDK outputs as UserPoolClientId
Cognito Identity Pool ID: Found in CDK outputs as IdentityPoolId
API Gateway URL: Found in CDK outputs as ApiEndpoint
Stripe Publishable Key: From your Stripe Dashboard
Google Client ID: From your Google Cloud Console

If you didn't save the CDK outputs, you can find these values in the AWS Console:

Cognito values in the Amazon Cognito Console
API Gateway URL in the API Gateway Console

Create Local Environment File

Create or update the .env.local file in the frontend directory with your collected values:

# Authentication
NEXT_PUBLIC_AUTH_DOMAIN=your-cognito-domain.auth.region.amazoncognito.com
NEXT_PUBLIC_USER_POOL_ID=your-user-pool-id
NEXT_PUBLIC_USER_POOL_CLIENT_ID=your-user-pool-client-id
NEXT_PUBLIC_IDENTITY_POOL_ID=your-identity-pool-id
 
# API
NEXT_PUBLIC_API_URL=your-api-gateway-url
 
# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key
 
# Google OAuth
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id

Replace all placeholders with the actual values from your deployment.

Install Dependencies

If you haven't already installed the frontend dependencies:

cd frontend
npm install

Start the Development Server

Run the Next.js development server:

npm run dev

The server will start, and you can access your application at http://localhost:3000.

The local frontend will connect to your deployed backend services, so all features should work just as they do in the deployed version.

Understanding the Development Workflow

When running the frontend locally:

Frontend code: Runs locally on your machine
Backend services: Still running in AWS (Lambda, API Gateway, etc.)
Authentication: Still using AWS Cognito
Data storage: Still using AWS S3 and DynamoDB
Payment processing: Still using Stripe

This setup allows you to:

Make changes to the frontend code and see the results immediately
Debug frontend issues more easily
Test new features before deploying
Customize the UI without affecting the live version

Making Frontend Changes

When you make changes to the frontend code locally:

Development: Make your changes to the source code
Testing: Test your changes locally
Deployment: When ready, deploy your changes to AWS Amplify

Deploying Frontend Changes

To manually deploy frontend changes:

Build the frontend:
cd frontend npm run build
Deploy using CDK:
cd ../infrastructure npx cdk deploy AmplifyNextJsAppStack

This will update your frontend on AWS Amplify.

cd infrastructure
npx cdk deploy LambdaFunctionStack

Replace LambdaFunctionStack with the name of the specific stack containing your Lambda function.

Test the Changes

Test your changes using the locally running frontend or the deployed frontend.

Changes to the backend require redeployment through CDK. There is no "local development" mode for the backend Lambda functions in this architecture.