Skip to content

Boilerplate for a serverless static website project - deployed to AWS using CloudFront and AWS.

Notifications You must be signed in to change notification settings

goldstack/static-website-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Generated with Goldstack

Static Website Boilerplate

Develop a static website using HTML and CSS. Test the website locally. Deploy to AWS using CloudFront and S3.

This boilerplate has been automatically generated using the template:

Static Website

Feel free to fork this repository and modify it for your needs, or use the Goldstack project builder to generate a boilerplate specifically configured for your project.

Getting Started

Thank you for using this boilerplate. For any questions or feedback, please be welcome to raise an issue on GitHub 🤗 .

1. Fork and clone the repository

Fork this repository and then clone the fork your local machine.

2. Install required local dependencies

A few dependencies need to be available in your development system. Please verify they are present or install them.

  • Node v20+
  • Yarn v1.22.5+
  • Docker v20+

Open a terminal and run the following commands:

node -v
yarn -v
docker --version

This should produce the following output:

Confirming versions in the console

If you need to install or update any of the dependencies, please see the following guides:

3. Initialise project and install NPM Dependencies

Run yarn in your project directory to install and download all dependencies.

The installation process should take around 3-10 minutes depending on the dependencies that need to be downloaded.

Installing project dependencies

You can confirm everything was installed correctly by running yarn -v. This should show a yarn version of 3.0.0+.

Confirming Yarn Version after install

4. Build modules

Make sure that the project compiles correctly by running yarn build your project directory:

Building your project

Note that this command also ensures that all TypeScript project references are configured correctly.

5. Configure VSCode

In order to setup VSCode, open the project in VSCode.

VSCode may prompt you to ask if you trust the authors of the workspace. Respond with Yes.

VSCode Prompt trust authors

You may also be asked if you want to install recommended extensions for this workspace. We recommend to do so since the template will be optimised to work with the suggested extensions.

VSCode Prompt install extensions

If you want to install the necessary extensions manually, here are links to the extensions required:

6. Initialise TypeScript

Locate a .ts or .tsx file in the workspace and open it. When asked whether to use the workspace TypeScript version, click Allow.

VSCode Locate TypeScript

In the status bar on the bottom right-hand corner of the VSCode editor you should now see TypeScript.

TypeScript status icon in VSCode

7. Local Development

Go to the folder packages/static-website-aws and run yarn watch. This will start a local development server.

VSCode Locate TypeScript

To make changes to the web page, edit the files in the folder packages\static-website-aws\web.

Edit webpage included in template

8. Deploy to AWS

If you want to deploy your project to AWS, you will need to make some changes to the configuration files included in this project.

Specifically, the goldstack.json in the packages/static-website-aws folder.

{
  "$schema": "./schemas/package.schema.json",
  "name": "static-website-1",
  "template": "static-website-aws",
  "templateVersion": "0.1.0",
  "configuration": {},
  "deployments": [
    {
      "name": "prod",
      "awsUser": "goldstack-dev",
      "awsRegion": "us-west-2",
      "configuration": {
        "hostedZoneDomain": "dev.goldstack.party",
        "websiteDomain": "staticwebsite1-1651273869629.tests.dev.goldstack.party",
        "websiteDomainRedirect": "www.staticwebsite1-1651273869629.tests.dev.goldstack.party",
        "defaultCacheDuration": 10
      },
      "tfStateKey": "static-website-1-prod-0397e051cd046f2d46e7.tfstate"
    }
  ]
}

The key properties you will need to update are:

  • deployments[0].configuration.hostedZoneDomain
  • deployments[0].configuration.websiteDomain

Also you need to delete deployments[0].tfStateKey.

For more information on these configuration options, see Goldstack Documentation / Static Website AWS Template / Configure.

You will also need to ensure that you have a valid AWS user configure to deploy to AWS. For this, create a file in /config/infra/config.json (relative to project root).

{
  "users": [
    {
      "name": "goldstack-dev",
      "type": "apiKey",
      "config": {
        "awsAccessKeyId": "...",
        "awsSecretAccessKey": "...",
        "awsDefaultRegion": "us-west-2"
      }
    },
    {
      "name": "goldstack-prod",
      "type": "apiKey",
      "config": {
        "awsAccessKeyId": "...",
        "awsSecretAccessKey": "",
        "awsDefaultRegion": "us-west-2"
      }
    }
  ]
}

For more information on configuring your local AWS users, please see Goldstack Documentation / AWS Configuration.

Once your AWS user is configured you can run yarn infra up prod in the /packages/static-website-aws folder. For more information on the infrastructure commands for this project, see Goldstack Documentation / Static Website Template / Infrastructure.

9. Contribute to Goldstack

Have questions or ideas or want to contribute to the project? Please head over to github.com/goldstack/goldstack.

About

Boilerplate for a serverless static website project - deployed to AWS using CloudFront and AWS.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published