Skip to content

Commit

Permalink
Add eslint and prettier configs
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexandrLi committed Jul 5, 2022
1 parent 6260f76 commit 87523cf
Show file tree
Hide file tree
Showing 18 changed files with 1,312 additions and 145 deletions.
3 changes: 3 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules
vite.config.ts
serverless.yml
24 changes: 24 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
{
"root": true,
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:prettier/recommended",
"prettier"
],
"plugins": ["@typescript-eslint", "react", "prettier"],
"env": {
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
86 changes: 40 additions & 46 deletions .serverless_plugins/serverless-single-page-app-plugin.js
Original file line number Diff line number Diff line change
@@ -1,43 +1,36 @@
'use strict';
"use strict";

const spawnSync = require('child_process').spawnSync;
const spawnSync = require("child_process").spawnSync;

class ServerlessPlugin {
constructor(serverless, options) {
this.serverless = serverless;
this.options = options;
this.commands = {
syncToS3: {
usage: 'Deploys the `app` directory to your bucket',
lifecycleEvents: [
'sync',
],
usage: "Deploys the `app` directory to your bucket",
lifecycleEvents: ["sync"],
},
domainInfo: {
usage: 'Fetches and prints out the deployed CloudFront domain names',
lifecycleEvents: [
'domainInfo',
],
usage: "Fetches and prints out the deployed CloudFront domain names",
lifecycleEvents: ["domainInfo"],
},
invalidateCloudFrontCache: {
usage: 'Invalidates CloudFront cache',
lifecycleEvents: [
'invalidateCache',
],
usage: "Invalidates CloudFront cache",
lifecycleEvents: ["invalidateCache"],
},
};

this.hooks = {
'syncToS3:sync': this.syncDirectory.bind(this),
'domainInfo:domainInfo': this.domainInfo.bind(this),
'invalidateCloudFrontCache:invalidateCache': this.invalidateCache.bind(
this,
),
"syncToS3:sync": this.syncDirectory.bind(this),
"domainInfo:domainInfo": this.domainInfo.bind(this),
"invalidateCloudFrontCache:invalidateCache":
this.invalidateCache.bind(this),
};
}

runAwsCommand(args) {
let command = 'aws';
let command = "aws";
if (this.serverless.variables.service.provider.region) {
command = `${command} --region ${this.serverless.variables.service.provider.region}`;
}
Expand All @@ -60,84 +53,85 @@ class ServerlessPlugin {
// syncs the `app` directory to the provided bucket
syncDirectory() {
const s3Bucket = this.serverless.variables.service.custom.s3Bucket;
const buildFolder = this.serverless.variables.service.custom.client.distributionFolder;
const buildFolder =
this.serverless.variables.service.custom.client.distributionFolder;
const args = [
's3',
'sync',
"s3",
"sync",
`${buildFolder}/`,
`s3://${s3Bucket}/`,
'--delete',
"--delete",
];
const { sterr } = this.runAwsCommand(args);
if (!sterr) {
this.serverless.cli.log('Successfully synced to the S3 bucket');
this.serverless.cli.log("Successfully synced to the S3 bucket");
} else {
throw new Error('Failed syncing to the S3 bucket');
throw new Error("Failed syncing to the S3 bucket");
}
}

// fetches the domain name from the CloudFront outputs and prints it out
async domainInfo() {
const provider = this.serverless.getProvider('aws');
const provider = this.serverless.getProvider("aws");
const stackName = provider.naming.getStackName(this.options.stage);
const result = await provider.request(
'CloudFormation',
'describeStacks',
"CloudFormation",
"describeStacks",
{ StackName: stackName },
this.options.stage,
this.options.region,
this.options.region
);

const outputs = result.Stacks[0].Outputs;
const output = outputs.find(
entry => entry.OutputKey === 'WebAppCloudFrontDistributionOutput',
(entry) => entry.OutputKey === "WebAppCloudFrontDistributionOutput"
);

if (output && output.OutputValue) {
this.serverless.cli.log(`Web App Domain: ${output.OutputValue}`);
return output.OutputValue;
}

this.serverless.cli.log('Web App Domain: Not Found');
const error = new Error('Could not extract Web App Domain');
this.serverless.cli.log("Web App Domain: Not Found");
const error = new Error("Could not extract Web App Domain");
throw error;
}

async invalidateCache() {
const provider = this.serverless.getProvider('aws');
const provider = this.serverless.getProvider("aws");

const domain = await this.domainInfo();

const result = await provider.request(
'CloudFront',
'listDistributions',
"CloudFront",
"listDistributions",
{},
this.options.stage,
this.options.region,
this.options.region
);

const distributions = result.DistributionList.Items;
const distribution = distributions.find(
entry => entry.DomainName === domain,
(entry) => entry.DomainName === domain
);

if (distribution) {
this.serverless.cli.log(
`Invalidating CloudFront distribution with id: ${distribution.Id}`,
`Invalidating CloudFront distribution with id: ${distribution.Id}`
);
const args = [
'cloudfront',
'create-invalidation',
'--distribution-id',
"cloudfront",
"create-invalidation",
"--distribution-id",
distribution.Id,
'--paths',
"--paths",
'"/*"',
];
const { sterr } = this.runAwsCommand(args);
if (!sterr) {
this.serverless.cli.log('Successfully invalidated CloudFront cache');
this.serverless.cli.log("Successfully invalidated CloudFront cache");
} else {
throw new Error('Failed invalidating CloudFront cache');
throw new Error("Failed invalidating CloudFront cache");
}
} else {
const message = `Could not find distribution with domain ${domain}`;
Expand All @@ -148,4 +142,4 @@ class ServerlessPlugin {
}
}

module.exports = ServerlessPlugin;
module.exports = ServerlessPlugin;
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
## Available Scripts

In the project directory, you can run:
You can use NPM instead of YARN (Up to you)
You can use NPM instead of YARN (Up to you)

### `yarn start` OR `npm run start`

Expand Down
Loading

0 comments on commit 87523cf

Please sign in to comment.