Extension

DevLaunchPad provides the foundation from which you can build any webapp.

After enabling relevant features and configuring your landing page, follow these suggestions to begin building your core functionality.

Extending with Vue.js & Nuxt

Your webapp is a standard Nuxt app, which uses Vue.js.

This means you can add:

• pages to /pages
• components to /components
• composables to /composables

Or use any other feature described in the Nuxt docs.

The only thing to note is DevLaunchPad uses a static site generated with nuxt generate. This produces static HTML only (no backend) to make deployment simpler.

Read on to learn how to build backend APIs in AWS Lambda.

Adding a backend API

To create a new backend API, write a Lambda function in serverless/functions/custom.

You can use TypeScript (.ts) or JavaScript (.mjs). Use any function in serverless/functions as a template.

You must also configure your API in serverless.yml, the template used by Serverless Framework to deploy your infrastructure.

In the functions section, define a new key for your API and set the handler to reference your function code. Within events, define the HTTP path and method.

functions:
 yourNewAPI:
    handler: serverless/functions/custom/your-new-api.handler
    events:
      - httpApi:
          path: /functions/your-new-api
          method: get

To call an API from the frontend, generate a URL with the API_URL environment variable. You just need to add the path suffix that comes after /functions.

const response = await fetch(`${useRuntimeConfig().public.API_URL}/your-new-api`)

Lambda dependencies

Any packages your code depends on should be added to the base Lambda layer shipped with DevLaunchPad.

Using a separate layer makes deployment faster, since the dependencies are not packaged with the function code.

Follow these command-line steps to add a dependency:

1. cd layer
2. npm i <package-name>
3. ./generate.sh

This regenerates the layers/api-lambda-layer.zip file.

Now in your function definition, reference the layer.

functions:
 yourNewAPI:
    handler: serverless/functions/custom/your-new-api.handler
    layers:
      - !Ref ApiLambdaLayer

Finally, deploy the changes to AWS with sls deploy.

Adding AWS resources

You can add custom AWS resources (e.g. an S3 bucket) to your webapp within serverless.yml.

In the resources section you can see several existing resources defined in CloudFormation syntax. Add your new resource to this list.