MikeBild / sveltekit-adapter-aws

A SvelteKit adapter for AWS using the AWS-CDK
MIT License
135 stars 31 forks source link

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

Open rlyders opened 1 year ago

rlyders commented 1 year ago

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:
  create-svelte@2.0.0-next.184
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 commented 1 year ago

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: https://github.com/MikeBild/sveltekit-adapter-aws/issues/4#issuecomment-1229178911

Thanks again for your help.

MikeBild commented 1 year ago

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 commented 1 year ago

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

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

rlyders commented 1 year ago

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 commented 1 year ago

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
> my-sveltekit-project@0.0.1 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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Hi @dennistruemper,

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

nbaillie commented 1 year ago

Hi i also am seeing bellow when i run:

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

nothing much else happens