Utilizing CDK to transfer files to S3 storage bucket

I've been trying to upload a file to an S3 bucket created using CDK, but I keep encountering the same error even when using AWS's example code.

Here is the stack:

export class TestStack extends cdk.Stack {
    public readonly response: string;

    constructor(scope: cdk.App, id: string, props?: cdk.StackProps) {
        super(scope, id, props);

        const websiteBucket = new s3.Bucket(this, 'WebsiteBucket', {
            websiteIndexDocument: 'index.html',
            publicReadAccess: true,
        });
        new s3deploy.BucketDeployment(this, 'DeployWebsite', {
            sources: [s3deploy.Source.asset('./website-dist')],
            destinationBucket: websiteBucket,
            destinationKeyPrefix: 'web/static' // optional prefix in destination bucket
        });

    }
}

Here is the main bin as requested:

const app = new cdk.App();

new TestStack(app, "TestStack", {
  env: {
    account: '123456789',
    region: 'us-east-1',
  }
});

The destinationBucket throws the following error in Visual Studio Code and when running npm build:

Property 'env' is missing in type 'Bucket' but required in type 'IBucket'.

As far as I can tell, the env corresponds to the resource environment described here: https://docs.aws.amazon.com/cdk/api/latest/docs/@aws-cdk_core.ResourceEnvironment.html

I'm struggling to figure out how to provide this to the bucket object as it doesn't seem to be among the available input props described here: https://docs.aws.amazon.com/cdk/api/latest/docs/@aws-cdk_aws-s3.Bucket.html

Any assistance would be highly appreciated.

Answer №1

Make sure to include the env parameter in the Bucket Stack props.

Here is a code snippet to illustrate:

You should place this code snippet within the bin folder when declaring stacks.


const myEnv = {
    account: '123456789',
    region: 'us-east-1',
};

const App = new cdk.App();

new S3Stack(App, 'S3Stack',{env: myEnv}); 

Answer №2

To maximize efficiency, it is recommended to set up your environment for the CLI as outlined in the CLI guide

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experiencing an excessive number of redirections on the AWS API gateway due to the frontend application

In our current setup, we have a React application running in Kubernetes (k8s) and exposed through an Istio Virtual Service. Since we are operating within a VPN, all our application endpoints use HTTP by default. However, there was a specific requirement to ...

Aurelia's navigation feature adds "?id=5" to the URL instead of "/5"

I have set up my Aurelia Router in app.ts using the configureRouter function like this: configureRouter(config, router: Router) { config.map([ { route: ['users', 'users/:userId?'], na ...

The CORS policy has blocked access to the image located at [Img Link] from the [domain] origin

My situation involves two domains: domain.com for hosting my VueJs application and api.domain.com for hosting my Django API. Both applications are hosted on an AWS (EC2 ubuntu instance). Despite adding add_header 'Access-Control-Allow-Origin' &a ...

What is the best way to dynamically determine the base path for my templates in Angular 2?

Is it possible to dynamically define the base path of two versions of each template in order to use one or the other through configuration? How can I declare TEMPLATES_PATH so that it can be implemented as shown below: component.ts @Component({ temp ...

What is preventing me from running UNIT Tests in VSCode when I have both 2 windows and 2 different projects open simultaneously?

I have taken on a new project that involves working with existing unit tests. While I recently completed a course on Angular testing, I am still struggling to make the tests run smoothly. To aid in my task, I created a project filled with basic examples f ...

Steps to Validate a Form: To allow the submit button to be enabled only when all input fields are filled out; if any field is left empty,

Is it possible to enable the send offer button only after both input boxes are filled? I'm sharing my code base with you for reference. Please review the code and make necessary modifications on stackblitz 1. example-dialog.component.html <form ...

Sorting the material table based on the column IDs, which usually correspond to the column names, may not align with the properties of the data

.ts this.displayedColumns = [ { key: 'id', header: '#' }, { key: 'fullname', header: 'Full name' }, { key: 'email', header: 'email' }, { key: 'roleName', header: ...

Creating formGroups dynamically within an ngFor loop inside an accordion

I am facing a challenge with an accordion feature that generates a specified number of sections x based on user input. Here is an example: After creating the sections, I need to load employee information into each section separately. However, when I load ...

What is the process for extracting TypeScript types from GraphQL query and mutation fields in order to get args?

I am experiencing difficulties with utilizing TypeScript and GraphQL. I am struggling to ensure that everything is properly typed. How can I achieve typed args and parent properties in Root query and mutation fields? For instance: Server: export interfa ...

What is the best way to create a nullable object field in typescript?

Below is a function that is currently working fine: export const optionsFunc: Function = (token: string) => { const options = { headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}`, } ...

Angular version 6 and its routing functionality

Hey there, I need some help with setting up routers in my Angular app. Here is the code from my files: import {NgModule} from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const APP_ROUTES: Routes = [ {pa ...

Implementing validation logic on button click using TypeScript

I'm struggling to get my validation to work for empty fields using the method below. Can anyone provide some guidance or suggestions? Thanks. Here is my template: <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="nobottommargin ad ...

Introducing Vee Validate 3.x and the ValidationFlags data type definition

I'm currently struggling to locate and utilize the ValidationFlags type within Vee-Validate 3. Despite my efforts, I am encountering difficulties in importing it. I am aware that this type is present in the source code located here. However, when I a ...

Using react-confetti to create numerous confetti effects simultaneously on a single webpage

I'm looking to showcase multiple confetti effects using the react-confetti library on a single page. However, every attempt to do so in my component seems to only display the confetti effect on the last element, rather than all of them. The canvas fo ...

What is the best way to specify a type for an object that may or may not contain a certain property?

I encountered a runtime TypeError that I believe should have been caught during compile time with TypeScript. Here is the code snippet: type MyData = Record<string, Record<string, string>>; function retrieveData(): MyData { return { ...

The 'input' element does not recognize the property 'formControl', causing a binding issue in Angular Material Autocomplete with Angular 12

Recently, I upgraded my Angular app from version 11 to 12 along with all the dependencies, including Angular Material. However, after running 'ng serve', I encountered the following error: Error: src/app/components/chips/chips.component.html:19:1 ...

Trigger parent Component property change from Child Component in Angular2 (akin to $emit in AngularJS)

As I delve into teaching myself Angular2, I've encountered a practical issue that would have been easy to solve with AngularJS. Currently, I'm scouring examples to find a solution with Angular2. Within my top-level component named App, there&apos ...

Utilizing a nested interface in Typescript allows for creating more complex and

My current interface is structured like this: export interface Foo { data?: Foo; bar?: boolean; } Depending on the scenario, data is used as foo.data.bar or foo.bar. However, when implementing the above interface, I encounter the error message: Prope ...

Unveiling the Mystery of Angular: Why are constructor parameters without access specifiers hidden from view outside the

When I explicitly set an access specifier for a constructor parameter, it becomes visible outside the constructor. For example: constructor(private employeResourceService:EmployeeResourceService ){ //code} ngOnInit(){ this.employeResourceService=unde ...

What steps are involved in launching an outdated Angular project?

Tasked with reviving an old Angular client in my company, I found myself grappling with outdated files and missing configurations. The lack of package.json, package-lock.json, and angular.json added to the confusion, while the presence of node modules in t ...