stevedunn / pacman-typescript

Prerequisites

Before beginning the production deployment, ensure that the following prerequisites are met:

  • Node.js installed (version 12.x or later)
  • npm (Node Package Manager)
  • Access to a web server or a cloud hosting provider (e.g., AWS, Heroku, Vercel)
  • Basic understanding of TypeScript, JavaScript, CSS, and HTML

Build Process

Step 1: Clone the Repository

Start by cloning the repository to your local machine.

git clone https://github.com/stevedunn/pacman-typescript.git
cd pacman-typescript

Step 2: Install Dependencies

Install the necessary dependencies required to build the project using npm.

npm install

Step 3: Build the Project

Compile the TypeScript files and prepare the project for deployment. The project typically includes a build script defined in package.json.

npm run build

This command compiles the TypeScript files located in the src directory and outputs them into the dist directory (or wherever specified in the build configuration).

Step 4: Testing the Build (Optional)

Before deploying to production, it is advisable to test the generated build locally. You can serve the static files from the dist folder using a local server.

npm install -g serve
serve dist

Visit http://localhost:5000 (or the specified port) in a web browser to check that your application runs as expected.

Deployment

Step 5: Choose a Hosting Method

You can deploy your application using various methods. Below are some typical options:

  1. Static Web Hosting (e.g., GitHub Pages, Netlify, Vercel)
  2. Cloud Hosting (e.g., AWS S3 + CloudFront, Azure Blob Storage)
  3. Traditional Web Server (e.g., Apache, Nginx)

Example: Deploying to GitHub Pages

In this example, you can deploy the built application to GitHub Pages:

Step 5.1: Configure GitHub Pages

Make sure your repository is pushed to GitHub. Then, you can utilize the gh-pages package to deploy.

Install the gh-pages package:

npm install gh-pages --save-dev

Step 5.2: Update package.json

Add a deploy script in your package.json:

"scripts": {
  "deploy": "gh-pages -d dist"
}

Step 5.3: Deploy

Run the deploy script to push your dist directory to the gh-pages branch:

npm run deploy

Example: Deploying to AWS S3

Alternatively, for deployment to AWS S3:

Step 5.1: Configure AWS CLI

Ensure the AWS CLI is installed and configured with appropriate permissions to access S3.

aws configure

Step 5.2: Create S3 Bucket

Create a new S3 bucket (ensure the name is unique):

aws s3 mb s3://your-bucket-name

Step 5.3: Deploy Files

Upload the files from the dist folder to the S3 bucket:

aws s3 sync dist/ s3://your-bucket-name/ --acl public-read

Step 5.4: Set Bucket Policy

Set permissions on the bucket to allow public read access. Create a JSON file named policy.json:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

Then apply the policy:

aws s3api put-bucket-policy --bucket your-bucket-name --policy file://policy.json

Conclusion

The production deployment of the stevedunn/pacman-typescript project involves building the project, selecting an appropriate hosting solution, and following the necessary steps to deploy to your chosen platform. The outlined procedures provide the foundational lay-down for deploying this TypeScript application effectively.

(Source: stevedunn/pacman-typescript repository)