Getting started

Welcome to DevLaunchPad!

It's time to bootstrap your webapp so you can start adding your core features. Let's get your idea in front of users as fast as possible.

In this guide you will:

• Run your webapp locally
• Customise your webapp
• Deploy your webapp

Let's get started.

1. Running a local server

Clone the repo.

git clone https://github.com/tkgregory/devlaunchpad.git

Remove Git history.

cd devlaunchpad && rm -rf .git

Initialise new Git repository and commit.

git init && git add . && git commit -am "Initial commit."

Install npm dependencies.

npm install

Run the server.

npm run dev

Awesome! Your webapp is running on http://localhost:3000.

Right now, it's customised to the DevLaunchPadDemo app. Time to make it your own.

2. Customise your webapp

Customisation happens in two places:

1. deployment-params.yml - properties that effect UI and deployment.
2. nuxt.config.js - properties that effect only UI.

Since deployment-params.yml is currently configured for the DevLaunchpad demo site, replace its contents with the following.

EmailEnabled: false
ForwardingEmailAddress: 'john.doe@nowhere.example'
GitHubRepositoryName: 'tkgregory/devlaunchpad'
HostedZoneId: ''
PaymentsEnabled: true
RootDomain: ''
ServiceName: 'devlaunchpad-demo'
SignInEnabled: false
SiteName: 'DevLaunchPadDemo'
WaitListEnabled: false

Now let's start by simply setting your site name.

Site name

In deployment-params.yml update the SiteName YML property.

SiteName: 'MyAwesomeWebapp'

This one change automatically updates the header, footer, and page title.

Theme

Choose a theme to showcase your webapp.

In nuxt.config.js, update data-theme to light, dark, or coffee.

{ "data-theme": "light" }

Your webapp's styling automatically changes based on the chosen theme.

The full list of 30+ themes is available on the DaisyUI website.

When you pick a new one, first add it to the themes list in tailwind.config.js, then set data-theme as described above.

daisyui: {
    themes: ["light", "dark", "coffee", "cyberpunk"],
}

Discover more customisation options in Features and Landing page.

3. Deploy your webapp

DevLaunchPad is setup to deploy to AWS.

AWS is the cloud provider which hosts your webapp and makes it available to the world.

Just create an AWS account and run the commands described below.

AWS account

If you don't already have an AWS account, follow this guide to create one.

Once setup, configure credentials so DevLaunchPad can deploy to your AWS account.

1. Sign in to your AWS account.
2. Select your username in the top-right corner, then select Security credentials.
3. Generate a new access key.
4. Create the following file, adding your own access key and secret key.

[default]
aws_access_key_id = YOUR_ACCESS_KEY
aws_secret_access_key = YOUR_SECRET_KEY

AWS region

AWS hosts your infrastructure in various regions around the world.

For simplicity, use the us-east-1 region.

Even if your users are not based in the US, DevLaunchPad ensures your webapp loads fast using AWS's global content distribution network (CDN).

DevLaunchPad deploys to us-east-1 by default.

Deployment environments

DevLaunchPad creates two separate environments for your webapp.

1. dev - the development environment where you can test changes before releasing to production.
2. prod - the production environment available to your users.

By default, any commands you run interact with the dev environment. Safety first.

Setting the ServiceName

To deploy to AWS, first set this property in deployment-params.json:

ServiceName: 'myawesomewebapp'

ServiceName is used to name all resources created in AWS. For example, the above configuration creates two CloudFormation templates.

1. myawesomewebapp-dev when deploying to development.
2. myawesomewebapp-prod when deploying to production.

Using Serverless Framework

DevLaunchPad deploys to AWS using Serverless Framework.

You must sign up for a free account.

Once you're in, run these commands:

1. Install Serverless Framework globally with npm i serverless -g. This makes the sls command available from any command prompt.
2. Log in to Serverless Framework with sls login, selecting Login/Register.

Now you can use Serverless Framework to deploy your webapp.

Deploy command

That's enough setup. Time to deploy your dev environment.

npm run deploy

This will:

1. Deploy your infrastructure to AWS based on deployment-params.yml.
2. Generate a static site using Nuxt.
3. Publish the site to AWS within an S3 storage bucket.

The first deployment takes 5-10 minutes. Following deployments are quicker because the resources are already created.

Look for WebsiteURL in the console output to access your webapp on the internet.

Congratulations! You've configured and deployed your webapp's dev environment.

Next steps are to:

• Configure a custom domain (recommended).
• Enable email (optional).
• Setup payments (optional).
• Add sign in (optional).

Follow the feature docs when you're ready to move on.