Closed EsmailELBoBDev2 closed 2 years ago
Hey, I just got mostly setup on a new laptop since my old one was dying the past week. This is a good idea, I will be working on how to implement it since Docker would need the Node adapter and Beatbump uses the Cloudflare Workers adapter by default.
I been thinking over how to do it the past week and I decided that I would need to create some sort of prebuild “staging”, and potentially find a way to programmatically configure the environment it’ll be deployed to so I can reliably create working docker containers as well as typical adapter builds.
I’ll be sure to keep updating with any progress
npm init svelte@next sveltekit-docker cd sveltekit-docker npm install @sveltejs/adapter-node@next --save-dev vi svelte.config.js # replace adapter-auto with adapter-node vi Dockerfile # add content docker build --no-cache -t sveltekit-docker:latest
FROM node:16-alpine
WORKDIR /app
COPY . .
RUN npm ci
RUN npm audit fix
RUN npm run build
FROM node:16-alpine
WORKDIR /app
COPY --from=0 /app/package*.json ./
RUN npm ci --production --ignore-scripts
RUN npm audit fix
COPY --from=0 /app/build ./
EXPOSE 3000 CMD ["node", "./index.js"]
docker run -it --rm --name sveltekit-docker -p 3000:3000 sveltekit-docker:latest
docker run -d --name sveltekit-docker -p 3000:3000 sveltekit-docker:latest
Appreciate this! I’ve been slowly working on this, but have been busy, so your comments are helpful. I’ll hopefully be able to get this up and running soon!
docker-compose...?
FROM node:18.1.0-alpine3.15 AS builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
COPY . .
RUN npm run build && npm prune --production
FROM node:18.1.0-alpine3.15
USER node:node
WORKDIR /app
COPY --from=builder --chown=node:node /app/build ./build
COPY --from=builder --chown=node:node /app/node_modules ./node_modules
COPY --chown=node:node package.json .
ENV PORT 5000
EXPOSE 5000
CMD ["node","build"]
This aint docker-compose
I have been lied to
docker build -t beatbump .
Sending build context to Docker daemon 2.048kB
Step 1/15 : FROM node:18.1.0-alpine3.15 AS builder
18.1.0-alpine3.15: Pulling from library/node
df9b9388f04a: Already exists
75d830d4694c: Pull complete
8f5e371a64cc: Pull complete
0c741fedcc2f: Pull complete
Digest: sha256:f4d6916c5625853e81994b5cb53ad3eb27e5fec9451c579d298fee0c508fe621
Status: Downloaded newer image for node:18.1.0-alpine3.15
---> d94913fe64df
Step 2/15 : WORKDIR /app
---> Running in 1f7947c7e250
Removing intermediate container 1f7947c7e250
---> f8a84956a4ed
Step 3/15 : COPY package.json package-lock.json ./
COPY failed: file not found in build context or excluded by .dockerignore: stat package.json: file does not exist
Apologies for the delays, I promise I haven’t been ignoring this. I recently reinstalled Windows and am now setup enough, so I will setup Docker and play around with it to get an official implementation working
I recently reinstalled Windows
Hope at least it's windows 10 AME (less bloat-y)
About docker, I'm no expert at docker so I could not play with Dockerfile so either gimme docker compose image or tell me how to deal with that docker file so I can test it
Okay so this is my first time using Docker. I don’t currently have it implemented in this repo but you can find a repo with what I’ve figured out so far here: https://github.com/snuffyDev/Beatbump-Docker
As for the docker image itself, I will reply when a usable image is uploaded to DockerHub. Currently the one uploaded works but doesn’t close the Node server that hosts Beatbump when you stop the container
I believe it should be fixed now, so here's the DockerHub link: https://hub.docker.com/repository/docker/snuffydev/beatbump
docker run --publish 80:3000 docker.io/snuffydev/beatbump:latest
or create a docker-compose.yml
file with this for its contents:
services:
app:
image: docker.io/snuffydev/beatbump:latest
ports:
- "443:3000"
then run it with docker compose -f "docker-compose.yml" up -d --build
i believe
I'll work on actually adding this to this repo though, and probably end up using GitHub actions to automate the dockerization process
you sure its public? each time I go to https://hub.docker.com/repository/docker/snuffydev/beatbump I get to login page
Yeah it's public, you can pull the image though by using docker pull snuffydev/beatbump:latest
in your terminal.
Worse comes to worse if you want a URL, you can try this link https://hub.docker.com/r/snuffydev/beatbump
oh. well time to try!
Search function do not work: https://beatbump.esmailelbob.xyz/search/bad%2520habits?filter=EgWKAQIIAWoKEAMQBBAKEAkQBQ%3D%3D
app_1 | 2022-05-18T18:19:55.962058231Z TypeError: albumArr.at is not a function
app_1 | 2022-05-18T18:19:55.962089835Z at file:///app/build/server/entries/endpoints/api/search.json.ts.js:132:30
app_1 | 2022-05-18T18:19:55.962096530Z at Array.map (<anonymous>)
app_1 | 2022-05-18T18:19:55.962101990Z at parseSong (file:///app/build/server/entries/endpoints/api/search.json.ts.js:120:19)
app_1 | 2022-05-18T18:19:55.962106291Z at file:///app/build/server/entries/endpoints/api/search.json.ts.js:232:17
app_1 | 2022-05-18T18:19:55.962110861Z at Array.map (<anonymous>)
app_1 | 2022-05-18T18:19:55.962114847Z at parseSearchResult (file:///app/build/server/entries/endpoints/api/search.json.ts.js:212:7)
app_1 | 2022-05-18T18:19:55.962118951Z at get (file:///app/build/server/entries/endpoints/api/search.json.ts.js:97:13)
app_1 | 2022-05-18T18:19:55.962125123Z at runMicrotasks (<anonymous>)
app_1 | 2022-05-18T18:19:55.962137981Z at processTicksAndRejections (node:internal/process/task_queues:96:5)
app_1 | 2022-05-18T18:19:55.962142637Z at async render_endpoint (file:///app/build/server/index.js:155:20)
It's due to Array.prototype.at either not being there, or the data isn't the right type (array). I'll see if i can mess with the tsconfig.json and other stuff to get this fixed!
A more 'official' solution will be coming soon, but the update I'm working on right now is one of the biggest I've done. So in the meantime I'll do what I can to get this working as a 'proof-of-concept'!
Okay, Good luck and I will wait your word when it get fixed (Wanna play shape of you :p)
Try it now! It works for me, expect an 'official' Docker setup in the very near future. My apologies for the delay!
oh it works :+1:
Just to make sure, is it my bad luck or I can't play songs and it's site problem
Seems to work for me, are you hosting it "locally"? "Locally" meaning within the same general region as you when trying to access the instance? It could possibly be due to geo-restrictions. Soon I should have this big update ready-to-go and will have a fix for that problem, if it's occuring at all.
I'll try to see if there's any issues within the code, but let me know if it resolves itself, or if it's an issue where some songs will play, and others don't.
it's not locally, my server in Canada and I'm in Egypt so
I'm trying and it actually plays a song new rules
in pop's biggest hits but like it's only song plays xD
Okay it plays some songs so I guess your theory is right, geo blocking
The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested
When it is ready, could you please support arm64 also? Thanks
The requested image's platform (linux/amd64) does not match the detected host platform (linux/arm64/v8) and no specific platform was requested
When it is ready, could you please support arm64 also? Thanks
As a arm64 user i created one based on Dockerfile mentioned above, martadinata666/beatbump:latest
, hope official will released soon.
thanks @martadinata666
After massive update seems the builld method different, some enlightment please ☕
@martadinata666 insight me more please. Tell me what problems you have, I will try my best
As previous rewrite branch pretty straightforward build and copy out the js. Then after rewrite branch master update, seems building the js got changed.
This is the package.json
root@27c29387eeb3:/beatbump-src# cat package.json
{
"name": "beatbump",
"version": "0.0.1",
"scripts": {
"app:dev": "npm run dev -w @beatbump/app",
"app:deploy": "npm run deploy -w @beatbump/app"
},
"main": "",
"type": "module",
"author": "",
"license": "",
"private": true,
"workspaces": [
"packages/*",
"app"
]
}
Then assuming im just trying to run dev mode then i just execute npm run app:dev
to test it out. The svelte-kit sync
throws errors. Maybe im missing something to prepare before run. 🤔
> beatbump@0.0.1 app:dev
> npm run dev -w @beatbump/app
> @beatbump/app@2.2.0 dev
> npm run sync && vite dev --host
npm WARN ignoring workspace config at /beatbump-src/app/.npmrc
(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠦ : timing config:load:flatten Completed in 9ms
> @beatbump/app@2.2.0 sync
> svelte-kit sync
> Files and directories prefixed with __ are reserved (saw src/routes/api/__types/get_queue.json.d.ts)
at file:///beatbump-src/node_modules/@sveltejs/kit/dist/chunks/sync.js:329:11
at Array.forEach (<anonymous>)
at create_manifest_data (file:///beatbump-src/node_modules/@sveltejs/kit/dist/chunks/sync.js:273:39)
at update (file:///beatbump-src/node_modules/@sveltejs/kit/dist/chunks/sync.js:1338:24)
at Object.all (file:///beatbump-src/node_modules/@sveltejs/kit/dist/chunks/sync.js:1358:9)
at file:///beatbump-src/node_modules/@sveltejs/kit/dist/cli.js:69:9
npm ERR! Lifecycle script `sync` failed with error:
npm ERR! Error: command failed
npm ERR! in workspace: @beatbump/app@2.2.0
npm ERR! at location: /beatbump-src/app
npm ERR! Lifecycle script `dev` failed with error:
npm ERR! Error: command failed
npm ERR! in workspace: @beatbump/app@2.2.0
npm ERR! at location: /beatbump-src/app
This is not docker, right?
No, but im trying to build it into docker image. So i need to know how to build correctly.
Yeah, I'm sorry can't help :(. This is really really out of my scope, I barely can run the docker image itself But I remember you can build docker using docker build? it usually works fine and gets all needed packages
Yeah, I'm sorry can't help :(. This is really really out of my scope, I barely can run the docker image itself But I remember you can build docker using docker build? it usually works fine and gets all needed packages
Yep, if i know how to build beatbump correctly first, the last massive update push, somehow change the way building the app. Thanks for the response, appreciate it
Don’t worry, I (should at least) have a working Dockerfile and docker-compose. I’m gonna push some new code to the main site, build and push the latest Docker image, and then commit my local code to GitHub
As previous rewrite branch pretty straightforward build and copy out the js. Then after rewrite branch master update, seems building the js got changed. This is the
package.json
root@27c29387eeb3:/beatbump-src# cat package.json { "name": "beatbump", "version": "0.0.1", "scripts": { "app:dev": "npm run dev -w @beatbump/app", "app:deploy": "npm run deploy -w @beatbump/app" }, "main": "", "type": "module", "author": "", "license": "", "private": true, "workspaces": [ "packages/*", "app" ] }
Then assuming im just trying to run dev mode then i just execute
npm run app:dev
to test it out. Thesvelte-kit sync
throws errors. Maybe im missing something to prepare before run. 🤔> beatbump@0.0.1 app:dev > npm run dev -w @beatbump/app > @beatbump/app@2.2.0 dev > npm run sync && vite dev --host npm WARN ignoring workspace config at /beatbump-src/app/.npmrc (⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠦ : timing config:load:flatten Completed in 9ms > @beatbump/app@2.2.0 sync > svelte-kit sync > Files and directories prefixed with __ are reserved (saw src/routes/api/__types/get_queue.json.d.ts) at file:///beatbump-src/node_modules/@sveltejs/kit/dist/chunks/sync.js:329:11 at Array.forEach (<anonymous>) at create_manifest_data (file:///beatbump-src/node_modules/@sveltejs/kit/dist/chunks/sync.js:273:39) at update (file:///beatbump-src/node_modules/@sveltejs/kit/dist/chunks/sync.js:1338:24) at Object.all (file:///beatbump-src/node_modules/@sveltejs/kit/dist/chunks/sync.js:1358:9) at file:///beatbump-src/node_modules/@sveltejs/kit/dist/cli.js:69:9 npm ERR! Lifecycle script `sync` failed with error: npm ERR! Error: command failed npm ERR! in workspace: @beatbump/app@2.2.0 npm ERR! at location: /beatbump-src/app npm ERR! Lifecycle script `dev` failed with error: npm ERR! Error: command failed npm ERR! in workspace: @beatbump/app@2.2.0 npm ERR! at location: /beatbump-src/app
This also should hopefully be rectified in the commit I’m about to publish! I ran into the problem as well, if it happens either with the code you have locally, or with the code I’m going to commit soon, the quick fix is (I believe):
Hopefully that fixes it!
thanks for guidance, got it run, but got error when try loading page.
root@2d565e410355:/beatbump-src# npm run app:dev
> beatbump@0.0.1 app:dev
> npm run dev -w @beatbump/app
> @beatbump/app@2.2.0 dev
> npm run sync && vite dev --host
npm WARN ignoring workspace config at /beatbump-src/app/.npmrc
> @beatbump/app@2.2.0 sync
> svelte-kit sync
VITE v3.0.4 ready in 605 ms
➜ Local: http://localhost:5173/
➜ Network: http://172.23.0.2:5173/
1:24:29 PM [vite-plugin-svelte] /beatbump-src/app/src/lib/components/Carousel/CarouselItem.svelte:269:27 'CustomEvent' is not defined
1:24:29 PM [vite-plugin-svelte] /beatbump-src/app/src/lib/components/Carousel/CarouselItem.svelte:19:11 CarouselItem has unused export property 'aspectRatio'. If it is for external reference only, please consider using `export const aspectRatio`
1:24:29 PM [vite-plugin-svelte] /beatbump-src/app/src/lib/components/Icon/Icon.svelte:6:11 Icon has unused export property 'color'. If it is for external reference only, please consider using `export const color`
failed to load module for ssr: /src/lib/_db
Error: failed to load module for ssr: /src/lib/_db
at instantiateModule (file:///beatbump-src/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:50306:15)
failed to load module for ssr: /src/lib/_db
Error: failed to load module for ssr: /src/lib/_db
at instantiateModule (file:///beatbump-src/node_modules/vite/dist/node/chunks/dep-71eb12cb.js:50306:15)
failed to load module for ssr: /src/lib/_db
Error: failed to load module for ssr: /src/lib/_db
The Docker image I have locally for the rewrite works. Just ensuring things are actually functioning correctly.
@martadinata666 try it now, with the latest commit on the rewrite branch
docker-compose (still wip + documentation) https://github.com/snuffyDev/Beatbump/blob/rewrite/docker-compose.yml
docker pull snuffydev/beatbump
@martadinata666 try it now, with the latest commit on the rewrite branch
Docker related information
docker-compose (still wip + documentation) https://github.com/snuffyDev/Beatbump/blob/rewrite/docker-compose.yml
docker pull snuffydev/beatbump
lookgin the new push and the Dockerfile, seems:
npm ci
npm run bb:build
/src/hook
path
Error: ENOENT: no such file or directory, open '/src/hooks.ts'
at Object.openSync (node:fs:599:3)
at Object.readFileSync (node:fs:467:35)
at c._action (/app/scripts/build.cjs:78:19)
at c.run (/app/node_modules/@snuffydev/fast-cli/dist/index.cjs:7:79)
at b.parse (/app/node_modules/@snuffydev/fast-cli/dist/index.cjs:22:525)
at Object.<anonymous> (/app/scripts/build.cjs:98:5)
at Module._compile (node:internal/modules/cjs/loader:1120:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
at Module.load (node:internal/modules/cjs/loader:998:32)
at Module._load (node:internal/modules/cjs/loader:839:12) {
errno: -2,
syscall: 'open',
code: 'ENOENT',
path: '/src/hooks.ts'
}
then i change the build scripts to src/hook.ts
it building but in the it throw hooks_path
is not defined
> Using @sveltejs/adapter-node
✔ done
Finished build
ReferenceError: hooks_path is not defined
at c._action (/app/scripts/build.cjs:91:45)
at c.run (/app/node_modules/@snuffydev/fast-cli/dist/index.cjs:7:79)
at b.parse (/app/node_modules/@snuffydev/fast-cli/dist/index.cjs:22:525)
at Object.<anonymous> (/app/scripts/build.cjs:98:5)
at Module._compile (node:internal/modules/cjs/loader:1120:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
at Module.load (node:internal/modules/cjs/loader:998:32)
at Module._load (node:internal/modules/cjs/loader:839:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47
@martadinata666 I believe the problem should be fixed now, try using the code from the latest commit on the master
branch
package-lock.json
npm ci not working.
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . .
RUN npm run bb:build
FROM node:18-alpine3.15 as app
3. Resuilt
docker build . -t beatbump:local -f Dockerfile
Sending build context to Docker daemon 1.233MB
Step 1/19 : FROM node:18-alpine3.15
---> fb9776c2949d
Step 2/19 : WORKDIR /app
---> Using cache
---> 7e457c547404
Step 3/19 : COPY package.json ./
---> Using cache
---> ca7cac315cfb
Step 4/19 : RUN npm install
---> Using cache
---> bd37ae9e8c67
Step 5/19 : COPY . .
---> d93e0604fb48
Step 6/19 : RUN npm run bb:build
---> Running in 0ea79bbf2f19
beatbump-app@2.2.0 bb:build node ./scripts/build.cjs build
Setting up svelte.config.js with user provided config... Building Beatbump, please wait... ▲ [WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]
tsconfig.json:2:12:
2 │ "extends": "./.svelte-kit/tsconfig.json",
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
vite v3.0.9 building for production...
transforming...
3:38:26 AM [vite-plugin-svelte] /app/src/routes/library/playlists/[slug]/+page.svelte:165:11 'tick' is not defined
163: if (hasQuery) return;
164: drop(event, index);
165: await tick();
^
166: await db.updatePlaylist({
167: items: [...items],
✓ 79 modules transformed.
[vite-plugin-svelte] /app/src/routes/listen/+page.svelte:7:13 Unexpected token
file: /app/src/routes/listen/+page.svelte:7:13
5 | import list from "$lib/stores/list";
6 | import { ENV_SITE_URL } from "../../env";
7 | import type { PageData } from "./$types";
^
8 |
9 | export let data: PageData;
error during build:
ParseError: Unexpected token
at error (file:///app/node_modules/svelte/compiler.mjs:17799:19)
at Parser$1.error (file:///app/node_modules/svelte/compiler.mjs:17875:9)
at Parser$1.acorn_error (file:///app/node_modules/svelte/compiler.mjs:17869:14)
at Object.read_script [as read] (file:///app/node_modules/svelte/compiler.mjs:8765:16)
at tag (file:///app/node_modules/svelte/compiler.mjs:16781:33)
at new Parser$1 (file:///app/node_modules/svelte/compiler.mjs:17834:21)
at parse$3 (file:///app/node_modules/svelte/compiler.mjs:17966:20)
at compile (file:///app/node_modules/svelte/compiler.mjs:32349:17)
at compileSvelte2 (file:///app/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:343:20)
at async Object.transform (file:///app/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:1944:25)
Finished build
ReferenceError: hooks_path is not defined
at c._action (/app/scripts/build.cjs:91:45)
at c.run (/app/node_modules/@snuffydev/fast-cli/dist/index.cjs:7:79)
at b.parse (/app/node_modules/@snuffydev/fast-cli/dist/index.cjs:22:525)
at Object.
I have updated the repo again in hopes that the changes should work now. Try it one more time and let me know what ends up happening, hopefully it works!!
It still stuck at building part.
> beatbump-app@2.2.0 bb:build
> node ./scripts/build.cjs build
Setting up svelte.config.js with user provided config...
Building Beatbump, please wait...
▲ [WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]
tsconfig.json:2:12:
2 │ "extends": "./.svelte-kit/tsconfig.json",
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
vite v3.0.9 building for production...
transforming...
4:46:36 AM [vite-plugin-svelte] /app/src/routes/library/playlists/[slug]/+page.svelte:152:11 'tick' is not defined
150: if (hasQuery) return;
151: drop(event, index);
152: await tick();
^
153: await db.updatePlaylist({
154: items: [...items],
✓ 79 modules transformed.
[vite-plugin-svelte] /app/src/routes/listen/+page.svelte:7:13 Unexpected token
file: /app/src/routes/listen/+page.svelte:7:13
5 | import list from "$lib/stores/list";
6 | import { ENV_SITE_URL } from "../../env";
7 | import type { PageData } from "./$types";
^
8 |
9 | export let data: PageData;
error during build:
ParseError: Unexpected token
at error (file:///app/node_modules/svelte/compiler.mjs:17799:19)
at Parser$1.error (file:///app/node_modules/svelte/compiler.mjs:17875:9)
at Parser$1.acorn_error (file:///app/node_modules/svelte/compiler.mjs:17869:14)
at Object.read_script [as read] (file:///app/node_modules/svelte/compiler.mjs:8765:16)
at tag (file:///app/node_modules/svelte/compiler.mjs:16781:33)
at new Parser$1 (file:///app/node_modules/svelte/compiler.mjs:17834:21)
at parse$3 (file:///app/node_modules/svelte/compiler.mjs:17966:20)
at compile (file:///app/node_modules/svelte/compiler.mjs:32349:17)
at compileSvelte2 (file:///app/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:343:20)
at async Object.transform (file:///app/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:1944:25)
Finished build
ReferenceError: hooks_path is not defined
at c._action (/app/scripts/build.cjs:91:45)
at c.run (/app/node_modules/@snuffydev/fast-cli/dist/index.cjs:7:79)
at b.parse (/app/node_modules/@snuffydev/fast-cli/dist/index.cjs:22:525)
at Object.<anonymous> (/app/scripts/build.cjs:97:5)
at Module._compile (node:internal/modules/cjs/loader:1120:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
at Module.load (node:internal/modules/cjs/loader:998:32)
at Module._load (node:internal/modules/cjs/loader:839:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:17:47
Removing intermediate container 30d2f36d86f1
---> bdfeb66254df
Step 7/19 : FROM node:18-alpine3.15 as app
---> fb9776c2949d
Step 8/19 : WORKDIR /app
---> Using cache
---> 7e457c547404
@martadinata666 I'm going to move this to a new issue ( #94 ), I will respond in that one shortly!
Seeing as Docker/Docker-Compose support is now implemented (although not perfectly, it appears) I will close this issue.
If any further problems or concerns come up in the future, feel free to create a new issue or re-open this one if you feel the need to @EsmailELBoBDev2 !
Appreciate all of the help and support from you all!
Hi, can you build a docker-compose file for this project? It would be really awesome :)