Skip to content
This repository has been archived by the owner on Feb 6, 2024. It is now read-only.

Docker Image #1130

Open
2 of 9 tasks
vialcollet opened this issue Apr 9, 2021 · 24 comments
Open
2 of 9 tasks

Docker Image #1130

vialcollet opened this issue Apr 9, 2021 · 24 comments
Labels
enhancement New feature or request

Comments

@vialcollet
Copy link

vialcollet commented Apr 9, 2021

Affected part of DeckDeckGo

  • Studio (online editor)
  • Remote control
  • Poll
  • Site
  • Documentation
  • Demo
  • Starter kit
  • Web Components
  • Templates

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.

@peterpeterparker
Copy link
Contributor

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.

@peterpeterparker peterpeterparker added the question Further information is requested label Apr 9, 2021
@vialcollet
Copy link
Author

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.

@peterpeterparker
Copy link
Contributor

peterpeterparker commented Apr 9, 2021

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?

@vialcollet
Copy link
Author

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.

@peterpeterparker
Copy link
Contributor

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?

@vialcollet
Copy link
Author

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.

@vialcollet
Copy link
Author

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.

@peterpeterparker
Copy link
Contributor

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.

@vialcollet
Copy link
Author

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

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

@peterpeterparker
Copy link
Contributor

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.

@vialcollet
Copy link
Author

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

@peterpeterparker
Copy link
Contributor

Yes it is separate. It works in AWS.

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

@vialcollet
Copy link
Author

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?

@peterpeterparker peterpeterparker added enhancement New feature or request and removed question Further information is requested labels Apr 9, 2021
@peterpeterparker
Copy link
Contributor

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.

@peterpeterparker
Copy link
Contributor

peterpeterparker commented Jul 6, 2021

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.

@peterpeterparker
Copy link
Contributor

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 🤟

@bmcgonag
Copy link

bmcgonag commented Dec 8, 2021

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.

@peterpeterparker
Copy link
Contributor

peterpeterparker commented Dec 9, 2021

@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

@hoainambk
Copy link

@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.

@peterpeterparker
Copy link
Contributor

peterpeterparker commented Jul 11, 2022

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

[email protected] prestart
npm run i18n

[email protected] i18n
node ./scripts/i18n.types.js

i18n type declarations generated.

[email protected] 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/

@hoainambk
Copy link

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

[email protected] prestart
npm run i18n

[email protected] i18n
node ./scripts/i18n.types.js

i18n type declarations generated.

[email protected] 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.

[email protected] prestart
npm run i18n

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

[email protected] i18n
node ./scripts/i18n.types.js

i18n type declarations generated.

[email protected] 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/`

@peterpeterparker
Copy link
Contributor

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

@hoainambk
Copy link

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

@peterpeterparker
Copy link
Contributor

any progress on Docker image?

none, not in my personal plan. pr welcome.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants