https://github.com/softchef/cdk-vue
https://github.com/softchef/cdk-vue
Last synced: 12 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/softchef/cdk-vue
- Owner: SoftChef
- License: apache-2.0
- Created: 2021-03-03T02:15:06.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2022-08-09T00:28:54.000Z (almost 4 years ago)
- Last Synced: 2024-10-02T17:07:14.816Z (over 1 year ago)
- Language: TypeScript
- Size: 4.86 MB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AWS CDK with VueJs
[](https://badge.fury.io/js/%40softchef%2Fcdk-vue)
AWS CDK with VueJs package will auto deploy website with VueJs to S3 bucket and CloudFront distribution.
VueJs will build on local environment or docker container, it's based with Vue-CLI project. Then use S3-Deployment to upload to specify S3 bucket.
If you have many resource arguments will pass to frontend, the config property will generate config.js to specify S3 bucket. It's a VueJs extendsion and archive config in Vue.$config operation.
## Installation
```
npm install @softchef/cdk-vue
// or
yarn add @softchef/cdk-vue
```
## Example
```
import { VueDeployment } from '@softchef/cdk-vue'
// In your stack
// Basic deployment
const website = new VueDeployment(this, 'Website', {
source: `${CLIENTS_PATH}`,
config: {
apiId: articleApi.restApiId, // RestApi
userPoolId: userPool.userPoolId, // UserPool
foo: {
bar: {
value: 123 // Customize config
}
}
}
})
```
## VueDeployment Properties
```
{
source: string;
// Use target bucket or create new bucket(if not specify)
bucket?: s3.Bucket;
// Specify S3 bucket name, if not specify will random generate
bucketName?: string;
// S3 bucket prefix, ex: "/website"
websiteDirectoryPrefix?: string;
// CloudFront distribution defaultRootObject, default is "index.html"
indexHtml?: string;
// CloudFront will enable/disable Ipv6 options
enableIpv6?: boolean;
// Pass env variables to Vue-CLI bundling, you can get its in process.env(frontend)
environment?: { [ key: string ]: string };
// Pass bundling arguments to Vue-CLI
bundlingArguments?: string;
// Force run Vue-CLI build in local
runsLocally?: boolean;
// Force use docker to bundling
forceDockerBundling?: boolean;
// Specify the "config.js" in your web bucket key, default is "/config.js"
configJsKey?: string;
// Config object will upload to web bucket(config.js)
config?: { [key: string]: any };
}
```
## VueJs Example
```
// In public/index.html
// In main.js or app.js
Vue.use(window.CloudDeploymentConfig)
// In *.vue
export default {
mounted () {
this.$config.get('apiId')
this.$config.get('foo.bar.value') // use "." to get value recursively
}
}
```