search

deckgo / deckdeckgo

The web open source editor for presentations
https://deckdeckgo.com
1.64k stars 180 forks source link

Docker Image #1130

Open vialcollet opened 3 years ago

vialcollet commented 3 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:

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 commented 3 years ago

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.

vialcollet commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

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

peterpeterparker commented 3 years ago

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 commented 3 years ago

Yes this is exactly what I mean.

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

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 commented 3 years ago

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 commented 3 years ago

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:

vialcollet commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

peterpeterparker commented 3 years ago

Yes it is separate. It works in AWS.

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

vialcollet commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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/

hoainambk commented 2 years ago

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/`

peterpeterparker commented 2 years ago

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 commented 2 years ago

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

peterpeterparker commented 2 years ago

any progress on Docker image?

none, not in my personal plan. pr welcome.