Self Hosting the webapp?

[Albonycal]

How to selfhost the webapp?

[steveruizok]

You can embed the component in any React app. You could self-host the webapp (in the apps/www folder) though it certain features (analytics, multiplayer) would require environment variables which are private.

[githubkoma]

ok what i've found out so far, in my setup:

1. File upload (see below)
2. Regarding Collaboration Feature:

• Example for the website that is being started with yarn start:www
• register, sign in, and obtain your project keys at https://liveblocks.io
  • then, in <tldraw dir>/apps/www/.env.local add:

  LIVEBLOCKS_SECRET_KEY=sk_xyz_abc
  NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_API_KEY=pk_xyz_abc
  

• then start with yarn start:www
• open http://localhost:3000
• Tap "People" Button -> "Copy to Multiplayer Project"
• -> et voila, you should be in a multiplayer session like http://localhost:3000/r/2acb-4d7c-4d7c-2acb-a6d7a285b728

(1) AWS API Key seems to be needed, dont know if its a "normal" S3 Bucket, i am no AWS guy...
.env.local parameters should to be:

TL_AWS_ACCESS_KEY=xyz
TL_AWS_SECRET_KEY=abc

3. More
   3.1) Like how to change the "Create a multiplayer project" Button is an https://tldraw.com/r
   3.x) anything else??

Please, for 1 + 2 + 3 etc, if there is anything to add, please add more information :-)

P.S.: The basic dev workflow for collab testing was: https://gist.github.com/githubkoma/3d1e4fec6191e215be0323ccb40ce8fc

[nileshtrivedi]

It would be great to have a Dockerfile in the repo that builds the app and exposes an HTTP port, making it super-easy to deploy either locally or in containerized environments (ECS/Heroku/CapRover etc)

[nileshtrivedi]

I can take a stab at writing a Dockerfile for apps/www.

[nileshtrivedi]

Alright, I tried this:

FROM node:16

WORKDIR /tldraw​

COPY package.json /tldraw​

RUN npm install

COPY . /tldraw​

EXPOSE 3000

CMD npm run dev

But ran into strange Typescript linting errors:

#10 7.819 ./components/MultiplayerEditor.tsx
#10 7.819 1:1  Error: Definition for rule '@typescript-eslint/no-non-null-assertion' was not found

[nileshtrivedi]

@steveruizok IMHO, API keys and env vars should be documented. It should be up to the user then to procure those for their private deployment. For eg: one of my open-source apps uses Auth0. I don't share my Auth0 keys obviously, but that's not a showstopper for those self-hosting because they can obtain their own Auth0 keys.

[steveruizok]

Thanks for the explanation! Sounds like something we should try.

I'd also be happy to create a minimal deployment that doesn't have things like sponsor-checking, analytics and multiplayer, which are the only parts where tokens are required. The entire "app" is in the @tldraw/tldraw package, so even a minimal React app that embeds the Tldraw component from that package will have all of the app's features.

That error is likely due to the .eslintrc from the root directory. The project always builds from the root, and is using yarn workspaces, so we may need to move over some of those config files if trying to separate out the www folder.

[swami-at-viasat]

i tried to yarn the app in docker using this Dockerfile but playwright gave an ssl error when downloading/building. i don't have experience with react/yarn/playwright, so unfortunately didn't get very far with google-searching:

FROM ubuntu:focal

RUN apt update

# install nvm
RUN cd ${HOME} && \
    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

# install nodejs, packages
RUN . ${HOME}/.bashrc && \
    nvm install --lts && \
    npm install -g yarn

# install tldraw
RUN cd ${HOME} && \
    git clone https://github.com/tldraw/tldraw

RUN cd ${HOME}/tldraw && \
    . ${HOME}/.bashrc && \
    npm config set strict-ssl false -g && \
    yarn config set "strict-ssl" false -g && \
    yarn

RUN cd ${HOME}/tldraw && \
    . ${HOME}/.bashrc && \
    yarn start

[Albonycal]

+1

…

On Sun, Nov 28, 2021 at 6:55 PM Nilesh ***@***.***> wrote: It would be great to have a Dockerfile in the repo that builds the app and exposes an HTTP port, making it super-easy to deploy either locally or in containerized environments (ECS/Heroku/CapRover etc) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://github.com/tldraw/tldraw/discussions/347#discussioncomment-1711577>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AP7TNJ4HD4KZ4L33ZRWA6FLUOIUWHANCNFSM5IQA7U5Q> .

[fabianmu]

I just managed to self-hosted this on Vercel with the following outline:

Create a new project in vercel and change the settings to:

• Framework Preset: next.js, obviously however somehow this did not automatically got selected on deployment, so worth checking!
• BUILD COMMAND: yarn build:www
• OUTPUT DIRECTORY: apps/www/.next

Then run vercel in the root of your local code to deploy to vercel and chose the new project or use vercel to connect the project to a GitHub repo.

[prologic]

Do you have any Docker images of tldraw I can spin up in my own infra?

[prologic]

I tried to quickly put together a Dockerfile to build na image from:

FROM node:current-alpine3.14 as build

RUN npm install -g next

WORKDIR /usr/src/app

COPY package.json yarn.lock ./
RUN yarn
COPY . ./
RUN yarn build

FROM nginx:alpine

COPY --from=build /usr/src/app/build /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

But I've run into some build issues I don't understand. This has less to do with Docker and more to do with how you even build a production version of this app in the first place -- Which there seems to be no documentation for :/

Help 🤗

[swami-at-viasat]

this Dockerfile worked for me, i started from ubuntu:focal and installed nvm and yarn:

FROM ubuntu:focal

# update local package databases
RUN apt update

# install some apps
RUN apt install -y curl \
    git

# create a regular account
ENV TLDRAW_USER tldraw
RUN useradd -m ${TLDRAW_USER}

# switch to the new user
USER ${TLDRAW_USER}

# install nvm
RUN cd /home/${TLDRAW_USER} && \
    curl -O https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh && \
    . /home/${TLDRAW_USER}/.profile && \
    NVM_DIR=/home/${TLDRAW_USER}/.nvm PROFILE=/home/${TLDRAW_USER}/.profile /bin/bash ./install.sh

# install nodejs
RUN . /home/${TLDRAW_USER}/.profile && \
    cd /home/${TLDRAW_USER} && \
    nvm install --lts

# install node packages
RUN . /home/${TLDRAW_USER}/.profile && \
    cd /home/${TLDRAW_USER} && \
    npm install --upgrade -g yarn

# clone tldraw
RUN cd /home/${TLDRAW_USER} && \
    git clone https://github.com/tldraw/tldraw

# build tldraw
RUN . /home/${TLDRAW_USER}/.profile && \
    cd /home/${TLDRAW_USER}/tldraw && \
    yarn install --network-timeout 3600000 --non-interactive

COPY yarn_start.sh /home/${TLDRAW_USER}/tldraw/

ENTRYPOINT /home/${TLDRAW_USER}/tldraw/yarn_start.sh

yarn_starth.sh is just:

#!/usr/bin/env bash

USER=tldraw
. /home/${USER}/.profile
cd /home/${USER}/tldraw
yarn start $@

[prologic]

I'm not really sure what you did differently to me 🤔 What's the key difference here?

[prologic]

I have zero experience with NodeJS/yarn

[so2liu]

Will this lose "collaborate" feature?

[matbgn]

So do I understand correctly, if I self-host tldraw I want be able to achieve collaborative editing?

[dillfrescott]

Was wondering this as well

[prologic]

To answer some recent questions from @so2liu @matbgn and @dillfrescott the real-time collaboration features of tldraw seem to rely on Liveblocks:

• Build amazing real‑time collaborative products - Liveblocks

This in my books makes tldraw unsuitable for self-hosting as one of its more useful features relies on yet another Cloud / SaaS run by yet another company that probably won't respect your data privacy or security.

Someone will have to fork tldraw figure out how to replace the use of LiveBlocks with something else. HedgeDoc have a similar set of features and don't need to rely on an external (random) Cloud/SaaS service.

[matbgn]

This situation is known and a reflection is in progress by @steveruizok to address this aspect.

The basic idea was to use yjs like @nimeshnayaju did on his fork (POC) https://github.com/nimeshnayaju/yjs-tldraw

Feel free to address the remaining issues encounters by the POC and make a Pull Request here.

[prologic]

Thank you! 🙏

[ocdtrekkie]

Also watching this topic. (Hi @prologic, funny finding you here...)

[inquam]

I see a lot of interesting conversations here. Do we have any update on a working Docker file for self-hosting with working collaboration and storage?

[prologic]

Nope, I've tried several times and haven't succeeded.