Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

npm run build runs, but > Using adapter-awscdk step has no output/error and completes in 3ms #8

Open
rlyders opened this issue Oct 16, 2022 · 9 comments

Comments

@rlyders
Copy link

rlyders commented Oct 16, 2022

Hi @MikeBild, thanks for the step-by-step instructions given in the documentation.

Any tips on why the > Using adapter-awscdk step of npm run build doesn't produce any results? I don't find anything uploaded, no output, no errors and it only takes 3ms to complete. NOTE: adding the --debug parameter to npm run build does not result in any additional output in the logs.

QUESTION: Is the FQDN in svelte.config.js (excerpt shown below) supposed to be populated with value of BucketDomainName in CloudFormation > Stacks > CDKToolkit > Outputs > BucketDomainName? I don't see any FQDN noted for the CloudFormation stack.

FYI: I don't see anything specifically labeled as the "FDQN" or "Full qualified domain name of CloudFront deployment" as noted in the example configuration file linked here: https://github.com/MikeBild/sveltekit-adapter-aws#configuration.

PS: By "CloudFront deployment" in the description of the FQDN in the example configuration linked above, did you mean "CloudFormation"? I don't see anything created under CloudFront for this account after running cdk bootstrap or npm run build.

excerpt from svelte.config.js

	kit: {
		adapter: adapter({
			autoDeploy: true,
                        stackName: 'CDKToolkit',
			FQDN: 'cdk-hnb659fds-assets-251495667565-us-east-1.s3.us-east-1.amazonaws.com'
		  }),
		  }

When I follow the instructions given above and then run npm run build everything appears to build properly, but nothing gets uploaded to AWS CloudFront.

My steps...

# install AWS CDK
npm install -g aws-cdk
cdk --version
2.46.0 (build 5a0595e)

# create new SvelteKit project
npm create svelte@latest my-sveltekit-project

# BEGIN output
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

create-svelte version 2.0.0-next.184

Welcome to SvelteKit!

This is release candidate software; expect bugs and missing features.

Problems? Open an issue on https://github.com/sveltejs/kit/issues if none exists already.

√ Which Svelte app template? » Skeleton project
√ Add type checking with TypeScript? » Yes, using TypeScript syntax
√ Add ESLint for code linting? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
√ Add Playwright for browser testing? ... No / Yes

Your project is ready!
✔ Typescript
  Inside Svelte components, use <script lang="ts">
✔ ESLint
  https://github.com/sveltejs/eslint-plugin-svelte3
npm WARN config init.author.name Use `--init-author-name` instead.
npm WARN config init.author.email Use `--init-author-email` instead.
npm WARN config init.author.url Use `--init-author-url` instead.

added 278 packages, and audited 297 packages in 1m

45 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
# END output

cd my-sveltekit-project/
npm install --save-dev sveltekit-adapter-aws
code .
# Use VS Code to update svelte.config.js with contents shown further below
cdk bootstrap aws://25********65/us-east-1
npm run build
echo $AWS_PROFILE
npm run build

Below are the full contents of my svelte.config.js:

import { adapter } from 'sveltekit-adapter-aws';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter({
			autoDeploy: true,
                        stackName: 'CDKToolkit',
			FQDN: 'cdk-hnb659fds-assets-251495667565-us-east-1.s3.us-east-1.amazonaws.com'
		  }),
		  }
};
export default config;

When I check the AWS CloudFormation stack named "CDKToolkit" (created by the cdk bootstrap command) in the AWS console nothing is shown in the corresponding S3 bucket.

Any help is greatly appreciated. Thanks!

@rlyders rlyders changed the title 'npm run build runs, but > Using adapter-awscdk` step has no output/error and completes in 3ms npm run build runs, but > Using adapter-awscdk step has no output/error and completes in 3ms Oct 16, 2022
@rlyders
Copy link
Author

rlyders commented Oct 16, 2022

Hi Mike,
RE: https://github.com/MikeBild/sveltekit-adapter-aws-basic-example#sveltekit-adapter-aws-basic-example

In the above-linked example, I see the following steps...

  1. Setup your AWS Account using the AWS-CLI or AWS-Vault
  2. Clone the repo and install dependencies (git clone, cd ... yarn build)
  3. Setup and deploy to AWS svelte.config.js (? is this out of order?)

Question: Shouldn't the updates to svelte.config.js be done before yarn build? If not, are there additional commands that need to be run in order to actually deploy the app to the AWS CloudFormation stack?

UPDATE: The following comment in issue#4 appears to correct the above order of steps: #4 (comment)

Thanks again for your help.

@MikeBild
Copy link
Owner

Hi @rlyders,

sorry for confusing you. Yes, you should update your svelte.config.js before running yarn build. A basic config should contain

svelte.config.js

mport { adapter } from 'sveltekit-adapter-aws';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter({
			autoDeploy: true,
		}),
	}
};
export default config;

The setting autoDeploy: true expresses an automatic cdk deploy after a successful local Sveltekit build. The setting stackName: 'CDKToolkit' expresses the stack name visible in CloudFormation that should be used. The setting FQDN: 'myhostname.mydomainname.com should only be used if your domain is hosted by Route53. This option creates a host alias to the CloudFront distribution and an attached SSL certificate for this entry.

I hope that clarifies the different options a little bit.

Regards Mike

@dennistruemper
Copy link

Hi @rlyders , I just had the same problem. I am using Windows (10) right now. While I ran into this problem I tried to remember the OS @MikeBild was using at the workshop. I think it wasn't windows.
So I opened a WSL console, navigated to the directory. Finally there I ran

  • npm ci
  • npm run build
    And now it took a lot longer. Empty ZIP file #9 comes by and a deployment starts.

So it seems to be somethin not working on Windows, if you (@rlyders) are also using Windows.
Have a nice weekend,
Dennis

@rlyders
Copy link
Author

rlyders commented Oct 21, 2022

Thanks for your help, @MikeBild, and @dennistruemper! I'll check this out in the next few days and let you know if this helps to resolve my issue. Have a great weekend!

@rlyders
Copy link
Author

rlyders commented Oct 21, 2022

Hi @MikeBild and @dennistruemper . Thanks again for your feedback. Following your advice, I updated my svelte.config.js and re-ran the npm clean-install and build.

Unfortunately, I get the same results: No output, nothing deployed, and no errors. :-)

What is most surprising is that there are no errors to work off even when I've enabled debug logging.

PS: You guessed correctly that I am running on Windows 10. I should have mentioned that up front! I've tried this in my gitbash terminal and in the PowerShell terminal (shown below) with the same results.

svelte.config.js:

import { adapter } from 'sveltekit-adapter-aws';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter({
			autoDeploy: true,
			stackName: 'CDKToolkit',
		  }),
		  }
};
export default config;

Powershell session:

PS C:\projects\svelte\sveltekit\1.0\aws\my-sveltekit-project> npm ci
npm WARN config init.author.name Use `--init-author-name` instead.
npm WARN config init.author.email Use `--init-author-email` instead.
npm WARN config init.author.url Use `--init-author-url` instead.
npm WARN config init.author.name Use `--init-author-name` instead.
npm WARN config init.author.email Use `--init-author-email` instead.
npm WARN config init.author.url Use `--init-author-url` instead.

added 278 packages, and audited 297 packages in 3m

45 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
PS C:\projects\svelte\sveltekit\1.0\aws\my-sveltekit-project> npm run build
npm WARN config init.author.name Use `--init-author-name` instead.
npm WARN config init.author.email Use `--init-author-email` instead.
npm WARN config init.author.url Use `--init-author-url` instead.
npm WARN config init.author.name Use `--init-author-name` instead.
npm WARN config init.author.email Use `--init-author-email` instead.
npm WARN config init.author.url Use `--init-author-url` instead.
[..................] - : timing config:load:flatten Completed in 7ms
> [email protected] build
> vite build

vite v3.1.8 building for production...:load:flatten Completed in 7ms
✓ 36 modules transformed.
vite v3.1.8 building SSR bundle for production...en Completed in 7ms
✓ 44 modules transformed.timing config:load:flatten Completed in 7ms
Generated an empty chunk: "hooks"onfig:load:flatten Completed in 7ms
.svelte-kit/output/server/vite-manifest.json                   1.11 KiB
.svelte-kit/output/server/index.js                             70.41 KiB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js    1.50 KiB
.svelte-kit/output/server/entries/pages/_page.svelte.js        0.31 KiB
.svelte-kit/output/server/chunks/index.js                      3.15 KiB
.svelte-kit/output/server/chunks/hooks.js                      0.00 KiB
[..................] | : timing config:load:flatten Completed in 7ms
Run npm run preview to preview your production build locally.
.svelte-kit/output/client/vite-manifest.json                                         2.21 KiB
.svelte-kit/output/client/_app/immutable/components/layout.svelte-1b855eca.js        0.53 KiB / gzip: 0.35 KiB
.svelte-kit/output/client/_app/immutable/components/error.svelte-8ea4b0ab.js         2.07 KiB / gzip: 0.95 KiB
.svelte-kit/output/client/_app/immutable/components/pages/_page.svelte-625806fa.js   0.81 KiB / gzip: 0.47 KiB
.svelte-kit/output/client/_app/immutable/chunks/singletons-aec165cb.js               1.81 KiB / gzip: 0.99 KiB
.svelte-kit/output/client/_app/immutable/chunks/0-dfe96011.js                        0.09 KiB / gzip: 0.09 KiB
.svelte-kit/output/client/_app/immutable/start-0bbcbec0.js                           24.48 KiB / gzip: 9.61 KiB
.svelte-kit/output/client/_app/immutable/chunks/1-1acd5dbb.js                        0.09 KiB / gzip: 0.09 KiB
.svelte-kit/output/client/_app/immutable/chunks/index-edd250b0.js                    6.69 KiB / gzip: 2.72 KiB
.svelte-kit/output/client/_app/immutable/chunks/2-ec7d8105.js                        0.09 KiB / gzip: 0.10 KiB
[..................] | : timing config:load:flatten Completed in 7ms
> Using adapter-awscdk
  ✔ done...........] | : timing config:load:flatten Completed in 7ms

@dennistruemper
Copy link

dennistruemper commented Oct 21, 2022

Hi @rlyders, powershell and 'git bash' are still using Windows stuff. I did not search for the reason this adapter isn't working on Windows. So using Linux or Mac is the only option right now. WSL (Windows Subsystem for Linux) is an easy way to use Linux in Windows.

At least this is what got me to the next step

@dennistruemper
Copy link

So I poked it a bit and found out what where the problem is. On Windows this line throws an error, because the npx cdk ... command is not finished at that time. The file inside cdk.out directory can not be found.

So i used node console on windows and linux (WSL) with this command: require('child_process').spawnSync('npx', ['cdk','-h']).stdout.toString()

On Linux it gets executed on Windows I get an error: Uncaught TypeError: Cannot read properties of null (reading 'toString')

To get this command executed on both systems I had to add the shell: true parameter like this:
require('child_process').spawnSync('npx', ['cdk','-h'],{shell:true}).stdout.toString()

So I made a change to the code and tried again, this time I get a cdk output on Windows :-) but also an error: "C:\Program" colud not be found. This is clear to see. There are some " missing somewhere. It should be "C:\Program Files..." but I can not find where this comes from. There is no direct call of any of the "Program Files" paths

Enough for today.

@MikeBild
Copy link
Owner

Hi @dennistruemper,

thank you for figuring out this. 👍 I'll try to fix that ASAP.

@nbaillie
Copy link

Hi i also am seeing bellow when i run:

Using adapter-awscdk
✔ done
✨ Done in 7.40s.

nothing much else happens

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants