Docker Image

Question

Docker Image

vialcollet opened this issue 4 years ago · 24 comments

vialcollet commented 4 years ago

Affected part of DeckDeckGo

Feature Description

It would be create to create a dockerfile to be able to quickly start a container with all required components:

NodeJS
StartedKit
Studio

This list is probably not exhaustive as I am not yet familiar with DeckDeckGo.

Use Case

On any platform, laptop, server where docker is intalled, run a command to launch a fully fledged instance hosting all deckdeckgo components.

Answer 1 · 2021-04-09T10:46:17.000Z

Thanks for opening the issue 👍

I have almost no clue of Docker, therefore for sure it would need the help of the community here but, cool idea.

What would be the goal, to have a docker container for coding purpose or to use it to create presentations?

If coding purpose, for sure we can probably also add the remote.

If the goal is to create presentations, I am not sure how to integrate our editor. Currently (at least) it works with Firestore and our productive credential aren't public, only the development one.

Answer 2 · 2021-04-09T10:54:41.000Z

I was mostly thinking about presentations using the editor.
I am not a professional with docker but if I understand how to deploy an editor instance, I could certainly work on a dockerfile.
I didn't find in the presentation how to setup our own editor instance and the prerequisites.
If you help me with these steps then I can give it a try.
This would for sure boost the size of the community.

Answer 3 · 2021-04-09T11:01:44.000Z

Thank for the details 😃.

In that case, would the editor, studio, running inside the Docker container, be connected with Firestore or with a Docker/local DB?

I have to say it the goal is to connect if with our productive Firestore account, I don't see spontaneously the value as it easier to use the browser directly. In addition, I don't want to expose and spread our productive tokens.

But if the goal would be to use a local db running in the Docker container, that would be cool for sure. We are just not ready yet. In addition to Docker itself it would need the development of the interfaces to the other type of database too. Feasible but some more work.

Or am I missing something?

Answer 4 · 2021-04-09T11:18:41.000Z

The objective is not to connect to your production Firebase database.
Here is how I see it:

In a first step, we can connect to the user Firebase account through variables in the dockerfile. Quite easy.
In a second step (when you are ready) we can connect to a mysql database

This local db can also be included in the dockerfile. This would make it very easy and autonomous.

Answer 5 · 2021-04-09T11:41:05.000Z

I like the step by step approach 😃

Being said, even with variables in the dockerfile, as I said, I don't want to spread our productive credentials. Therefore it means that the editor in the docker file would be connected in a first step to the developer database. Would that work?

Answer 6 · 2021-04-09T11:55:05.000Z

Yes this is exactly what I mean.

The steps to deploy a self-hosted editor instance would look like so:

Create a developper project in firebase
Execute a command like:

docker run --name my-deckdeckgo \ 
  -e FIREBASE_ID='project-54654' \
  -e FIREBASE_KEY='654654654654' \
  -e URL='https://mydeckdeckgo.com' \
  -d \
  deckdeckgo-docker-image

I would add an option to have an nginx proxy in front of it to serve through ssl.

Answer 7 · 2021-04-09T12:00:55.000Z

Well proxy should be managed separately to make it more flexible:

docker run --name my-deckdeckgo \ 
  -e FIREBASE_ID='project-54654' \
  -e FIREBASE_KEY='654654654654' \
  -p 'xxxx:3333'
  -d \
  deckdeckgo-docker-image

Where xxxx is the port you want to expose on the host.

Answer 8 · 2021-04-09T12:10:27.000Z

I slowly get it 😅

That would be cool, I like the idea that anyone can kickstart it's own ddg in a docket container with his/her own Firebase account.

Two last things, I think:

So studio relies on Firestore but also use Google Functions. If would be up to the user to deploy these or how would you populate these?
In our editor, when user share their presentation, I Progressive Web Apps with their slides is created and deployed online. This will also be excluded here.

Answer 9 · 2021-04-09T12:21:15.000Z

How does it work for google fonts? They are downloaded locally or referenced?

Yes PWAs would be built locally and exposed on the host.

Answer 10 · 2021-04-09T12:23:12.000Z

Google Fonts are fetched at runtime in the browser.

PWA built locally would be excluded here too in a first step I think, that would be quite some work too to make it happens.

Answer 11 · 2021-04-09T12:24:47.000Z

How does it work on you editor instance to build PWAs? Is it separate from Editor?

Answer 12 · 2021-04-09T12:27:25.000Z

Yes it is separate. It works in AWS.

P.S.: List of services are listed on the website https://deckdeckgo.com/en/services

Answer 13 · 2021-04-09T12:32:32.000Z

Oh I see...
Well we need to start somewhere so let's exclude PWA build process and publication :)
If you give me instructions to setup an instance, I could go ahead and set it up to get familiar with the process.
Once done, I'll be able to prepare a dockerfile and publish a first image.
Would it be fine with you?

Answer 14 · 2021-04-09T12:36:19.000Z

Sounds like a plan 👍

So basically to run our editor locally, your need Node.js LTS version.

Then the repo can be clone, depenencies installed and go

git clone https://github.com/deckgo/deckdeckgo/tree/main/studio
cd deckdeckgo/studio
npm ci
npm run start

The project is exposed with a default dev Firebase configuration. If you would like to connect to another Firebase account aka be popupalted with other options, then these have to be updated in config.dev.json

I guess that would be a start.

As I said I have no clue of Docker but happy to answer any other questions.

Answer 15 · 2021-07-06T16:15:56.000Z

We are working on a proof of concept to transform the editor to an "offline first" approach (PR #1215).

If it goes to the end and is integrated, this will ease the development of this feature request.
It will then be easier to integrated the editor in a docker container as it will no need external resources anymore per default.

Answer 16 · 2021-11-13T12:31:27.000Z

Since the release of v5.0.0, the editor (studio) can now works fully offline without any external dependency. This is the default setup of the repo.

Therefore, a docker image can be created without the need of external database or Firebase.

Following our discussion earlier this year @vialcollet, it should be now cleaner to create such an image. If you are still interested to develop it, that would be for sure cool 🤟

Answer 17 · 2021-12-08T21:50:46.000Z

I'm interested in this as well. I might be able to make a docker image. How do you build the post 5.0.0 version?

Tried the commands from above

git clone https://github.com/deckgo/deckdeckgo/tree/main/studio
cd deckdeckgo/studio
npm ci
npm run start

And first line gives error.
If i clone the entire repo
git clone https://github.com/deckgo/deckdeckgo.git
Then cd deckdeckgo
npm ci works, but npm run start doesn't, as there's no "start" script in package.json.

Answer 18 · 2021-12-09T06:25:28.000Z

@bmcgonag super cool if you can try to build a docker image 👍

You should clone the entire mono repo and then go into studio.

git clone https://github.com/deckgo/deckdeckgo.git
cd deckdeckgo
cd studio
npm ci
npm run start

Let me know if it works out!

Note: it needs npm >= v7

Answer 19 · 2022-07-11T03:20:05.000Z

@bmcgonag super cool if you can try to build a docker image +1

You should clone the entire mono repo and then go into studio.
git clone https://github.com/deckgo/deckdeckgo.git
cd deckdeckgo
cd studio
npm ci
npm run start
Let me know if it works out!

Note: it needs npm >= v7

Tried the commands from above(node: v16.6, npm: v8.13), but build failed:

[ ERROR ] Node Polyfills Required For the import "https" to be bundled from https?commonjs-external, ensure the "rollup-plugin-node-polyfills" plugin is installed and added to the stencil config plugins (client). Please see the bundling docs for more information. Further information: https://stenciljs.com/docs/module-bundling

i've Installed "rollup-plugin-node-polyfills" as link(https://stenciljs.com/docs/module-bundling) but the error is the same.

Answer 20 · 2022-07-11T04:38:09.000Z

Don't no, it works for me.

Here my stacktrace:

❯ node -v
v16.14.0
❯ npm -v
7.18.1
❯ git clone https://github.com/deckgo/deckdeckgo.git
Cloning into 'deckdeckgo'...
remote: Enumerating objects: 81793, done.
remote: Counting objects: 100% (3712/3712), done.
remote: Compressing objects: 100% (1927/1927), done.
remote: Total 81793 (delta 2086), reused 2934 (delta 1636), pack-reused 78081
Receiving objects: 100% (81793/81793), 32.74 MiB | 4.17 MiB/s, done.
Resolving deltas: 100% (55562/55562), done.
❯ cd deckdeckgo
❯ cd studio/
❯ npm ci
...
added 393 packages, and audited 405 packages in 9s
...
Run npm audit for details.
❯ npm run start

deckdeckgo-studio@6.0.1 prestart
npm run i18n

deckdeckgo-studio@6.0.1 i18n
node ./scripts/i18n.types.js

i18n type declarations generated.

deckdeckgo-studio@6.0.1 start
stencil build --dev --watch --serve

[34:51.5] @stencil/core
[34:51.7] v2.9.0 🚙
[34:55.4] build, app, dev mode, started ...
[34:55.4] transpile started ...
[35:05.8] transpile finished in 10.43 s
[35:05.8] copy started ...
[35:05.8] generate lazy started ...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
[35:06.6] copy finished (1577 files) in 809 ms
[35:32.9] generate lazy finished in 27.04 s

[ WARN ] Bundling Warning PLUGIN_WARNING
@rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to
set this option to true, as the next major version will default this option to true.

[35:33.0] build finished, watching for changes... in 37.59 s

[35:33.0] http://localhost:3333/

Answer 21 · 2022-07-11T08:48:48.000Z

Don't no, it works for me.

Here my stacktrace:

❯ node -v
v16.14.0
❯ npm -v
7.18.1
❯ git clone https://github.com/deckgo/deckdeckgo.git
Cloning into 'deckdeckgo'...
remote: Enumerating objects: 81793, done.
remote: Counting objects: 100% (3712/3712), done.
remote: Compressing objects: 100% (1927/1927), done.
remote: Total 81793 (delta 2086), reused 2934 (delta 1636), pack-reused 78081
Receiving objects: 100% (81793/81793), 32.74 MiB | 4.17 MiB/s, done.
Resolving deltas: 100% (55562/55562), done.
❯ cd deckdeckgo
❯ cd studio/
❯ npm ci
...
added 393 packages, and audited 405 packages in 9s
...
Run npm audit for details.
❯ npm run start

deckdeckgo-studio@6.0.1 prestart
npm run i18n

deckdeckgo-studio@6.0.1 i18n
node ./scripts/i18n.types.js

i18n type declarations generated.

deckdeckgo-studio@6.0.1 start
stencil build --dev --watch --serve

[34:51.5] @stencil/core
[34:51.7] v2.9.0 blue_car
[34:55.4] build, app, dev mode, started ...
[34:55.4] transpile started ...
[35:05.8] transpile finished in 10.43 s
[35:05.8] copy started ...
[35:05.8] generate lazy started ...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
[35:06.6] copy finished (1577 files) in 809 ms
[35:32.9] generate lazy finished in 27.04 s
[ WARN ] Bundling Warning PLUGIN_WARNING
@rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to
set this option to true, as the next major version will default this option to true.
[35:33.0] build finished, watching for changes... in 37.59 s
[35:33.0] http://localhost:3333/

The issue resolved

i'v changed stencil.config.ts, add new item:
rollupPlugins: { after: [ nodePolyfills(), ] }

and DONE:

C:\Users\Name\deckdeckgo\studio>npm run start npm WARN config global --global, --localare deprecated. Use--location=glo
bal` instead.

deckdeckgo-studio@6.0.1 prestart
npm run i18n

npm WARN config global --global, --local are deprecated. Use --location=glo bal instead.

deckdeckgo-studio@6.0.1 i18n
node ./scripts/i18n.types.js

i18n type declarations generated.

deckdeckgo-studio@6.0.1 start
stencil build --dev --watch --serve

[32:36.3] @stencil/core
[32:36.7] v2.9.0
[32:49.1] build, app, dev mode, started ...
[32:49.4] transpile started ...
[33:19.5] transpile finished in 30.14 s
[33:19.5] copy started ...
[33:19.5] generate lazy started ...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#b
rowsers-data-updating
[33:22.6] copy finished (1577 files) in 3.12 s
[34:59.8] generate lazy finished in 100.33 s

[ WARN ] Bundling Warning PLUGIN_WARNING
@rollup/plugin-replace: 'preventAssignment' currently defaults to
false. It is recommended to set this option to true, as the next
major version will default this option to true.

[35:00.3] build finished, watching for changes... in
131.18 s

[35:00.3] http://localhost:3333/`

Answer 22 · 2022-07-11T19:57:36.000Z

cool! maybe it's the os, now i reckon that I do not face issue on mac but it might be on windows different

Answer 23 · 2022-07-14T01:42:36.000Z

Yeah, that because of Stencil. btw, any progress on Docker image?

Answer 24 · 2022-07-14T07:46:41.000Z

any progress on Docker image?

none, not in my personal plan. pr welcome.