blsmedia/bot
2
0
Fork 0
Code Activity

build(docker): 🧱 Improve runtime environment

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-05-30 16:40:13 +02:00
parent 92cd56e5d0
commit a04a11ae02
19 changed files with 308 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/builder/.env.docker
View File

@ -1,13 +1,7 @@
# Don't edit this file
NEXT_PUBLIC_VIEWER_URL=DOCKER_PUBLIC_VIEWER_URL
NEXT_PUBLIC_VIEWER_URL=DOCKER_NEXT_PUBLIC_VIEWER_URL
NEXT_PUBLIC_SMTP_FROM=DOCKER_NEXT_PUBLIC_SMTP_FROM
NEXT_PUBLIC_SMTP_AUTH_DISABLED=DOCKER_NEXT_PUBLIC_SMTP_AUTH_DISABLED
NEXT_PUBLIC_GOOGLE_CLIENT_ID=DOCKER_NEXT_PUBLIC_GOOGLE_CLIENT_ID
NEXT_PUBLIC_GOOGLE_API_KEY=DOCKER_NEXT_PUBLIC_GOOGLE_API_KEY
NEXT_PUBLIC_GITHUB_CLIENT_ID=DOCKER_NEXT_PUBLIC_GITHUB_CLIENT_ID
NEXT_PUBLIC_GITLAB_CLIENT_ID=DOCKER_NEXT_PUBLIC_GITLAB_CLIENT_ID
NEXT_PUBLIC_GITLAB_NAME=DOCKER_NEXT_PUBLIC_GITLAB_NAME
NEXT_PUBLIC_FACEBOOK_CLIENT_ID=DOCKER_NEXT_PUBLIC_FACEBOOK_CLIENT_ID
NEXT_PUBLIC_GIPHY_API_KEY=DOCKER_NEXT_PUBLIC_GIPHY_API_KEY
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=DOCKER_NEXT_PUBLIC_STRIPE_PUBLIC_KEY
NEXT_PUBLIC_SENTRY_DSN=DOCKER_NEXT_PUBLIC_SENTRY_DSN

7
apps/builder/.env.local.example
View File

@ -3,7 +3,7 @@ ENCRYPTION_SECRET=SgVkYp2s5v8y/B?E(H+MbQeThWmZq4t6 #256-bits secret (can be gene
NEXTAUTH_URL=http://localhost:3000
NEXT_PUBLIC_VIEWER_URL=http://localhost:3001
NEXT_PUBLIC_GITHUB_CLIENT_ID=534b549dd17709a743a2
GITHUB_CLIENT_ID=534b549dd17709a743a2
GITHUB_CLIENT_SECRET=7adb03507504fb1a54422f6c3c697277cfd000a9
S3_ACCESS_KEY=minio
@ -13,8 +13,5 @@ S3_PORT=9000
S3_ENDPOINT=localhost
S3_SSL=false
# Used for Google Fonts dropdown
NEXT_PUBLIC_GOOGLE_API_KEY=AIzaSyAWuhjY55xbR-J9Yb1nkAQ13r6A7GDCx2k
# For more configuration options check out:
https://docs.typebot.io/self-hosting/configuration
# https://docs.typebot.io/self-hosting/configuration

6
apps/builder/.env.production.example
View File

@ -1,6 +0,0 @@
DATABASE_URL=postgresql://postgres:typebot@db:5432/typebot
NEXT_PUBLIC_VIEWER_URL=http://localhost:8081
ENCRYPTION_SECRET=SgVkYp2s5v8y/B?E(H+MbQeThWmZq4t6
ADMIN_EMAIL=contact@baptiste-arnaud.fr
NEXTAUTH_URL=http://localhost:8080
NEXTAUTH_URL_INTERNAL=http://host.docker.internal:8080

83
apps/builder/components/auth/SignInForm.tsx
View File

@ -9,20 +9,18 @@ import {
} from '@chakra-ui/react'
import React, { ChangeEvent, FormEvent, useEffect } from 'react'
import { useState } from 'react'
import { signIn, useSession } from 'next-auth/react'
import {
ClientSafeProvider,
getProviders,
LiteralUnion,
signIn,
useSession,
} from 'next-auth/react'
import { DividerWithText } from './DividerWithText'
import { SocialLoginButtons } from './SocialLoginButtons'
import { useRouter } from 'next/router'
import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
import { isEmpty, isNotEmpty } from 'utils'
const hasNoAuthProvider =
(isEmpty(process.env.NEXT_PUBLIC_SMTP_FROM) ||
process.env.NEXT_PUBLIC_SMTP_AUTH_DISABLED === 'true') &&
isEmpty(process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID) &&
isEmpty(process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID) &&
isEmpty(process.env.NEXT_PUBLIC_FACEBOOK_CLIENT_ID) &&
isEmpty(process.env.NEXT_PUBLIC_GITLAB_CLIENT_ID)
import { BuiltInProviderType } from 'next-auth/providers'
type Props = {
defaultEmail?: string
@ -33,14 +31,28 @@ export const SignInForm = ({
const router = useRouter()
const { status } = useSession()
const [authLoading, setAuthLoading] = useState(false)
const [isLoadingProviders, setIsLoadingProviders] = useState(true)
const [emailValue, setEmailValue] = useState(defaultEmail ?? '')
const toast = useToast({
position: 'top-right',
})
const [providers, setProviders] =
useState<
Record<LiteralUnion<BuiltInProviderType, string>, ClientSafeProvider>
>()
const hasNoAuthProvider =
!isLoadingProviders && Object.keys(providers ?? {}).length === 0
useEffect(() => {
if (status === 'authenticated')
router.replace({ pathname: '/typebots', query: router.query })
;(async () => {
const providers = await getProviders()
setProviders(providers ?? undefined)
setIsLoadingProviders(false)
})()
}, [status, router])
const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) =>
@ -77,32 +89,31 @@ export const SignInForm = ({
)
return (
<Stack spacing="4" w="330px">
<SocialLoginButtons />
{isNotEmpty(process.env.NEXT_PUBLIC_SMTP_FROM) &&
process.env.NEXT_PUBLIC_SMTP_AUTH_DISABLED !== 'true' && (
<>
<DividerWithText mt="6">Or with your email</DividerWithText>
<HStack as="form" onSubmit={handleEmailSubmit}>
<Input
name="email"
type="email"
autoComplete="email"
placeholder="email@company.com"
required
value={emailValue}
onChange={handleEmailChange}
/>
<Button
type="submit"
isLoading={
['loading', 'authenticated'].includes(status) || authLoading
}
>
Submit
</Button>
</HStack>
</>
)}
<SocialLoginButtons providers={providers} />
{providers?.email && (
<>
<DividerWithText mt="6">Or with your email</DividerWithText>
<HStack as="form" onSubmit={handleEmailSubmit}>
<Input
name="email"
type="email"
autoComplete="email"
placeholder="email@company.com"
required
value={emailValue}
onChange={handleEmailChange}
/>
<Button
type="submit"
isLoading={
['loading', 'authenticated'].includes(status) || authLoading
}
>
Submit
</Button>
</HStack>
</>
)}
</Stack>
)
}

30
apps/builder/components/auth/SocialLoginButtons.tsx
View File

@ -1,13 +1,24 @@
import { Stack, Button } from '@chakra-ui/react'
import { GithubIcon } from 'assets/icons'
import { signIn, useSession } from 'next-auth/react'
import {
ClientSafeProvider,
LiteralUnion,
signIn,
useSession,
} from 'next-auth/react'
import { useRouter } from 'next/router'
import React from 'react'
import { stringify } from 'qs'
import { FacebookLogo, GoogleLogo, GitlabLogo } from 'assets/logos'
import { isEmpty } from 'utils'
import { BuiltInProviderType } from 'next-auth/providers'
export const SocialLoginButtons = () => {
type Props = {
providers:
| Record<LiteralUnion<BuiltInProviderType, string>, ClientSafeProvider>
| undefined
}
export const SocialLoginButtons = ({ providers }: Props) => {
const { query } = useRouter()
const { status } = useSession()
@ -33,7 +44,7 @@ export const SocialLoginButtons = () => {
return (
<Stack>
{!isEmpty(process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID) && (
{providers?.github && (
<Button
leftIcon={<GithubIcon />}
onClick={handleGitHubClick}
@ -44,7 +55,7 @@ export const SocialLoginButtons = () => {
Continue with GitHub
</Button>
)}
{!isEmpty(process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID) && (
{providers?.google && (
<Button
leftIcon={<GoogleLogo />}
onClick={handleGoogleClick}
@ -55,7 +66,7 @@ export const SocialLoginButtons = () => {
Continue with Google
</Button>
)}
{!isEmpty(process.env.NEXT_PUBLIC_FACEBOOK_CLIENT_ID) && (
{providers?.facebook && (
<Button
leftIcon={<FacebookLogo />}
onClick={handleFacebookClick}
@ -66,7 +77,7 @@ export const SocialLoginButtons = () => {
Continue with Facebook
</Button>
)}
{!isEmpty(process.env.NEXT_PUBLIC_GITLAB_CLIENT_ID) && (
{providers?.gitlab && (
<Button
leftIcon={<GitlabLogo />}
onClick={handleGitlabClick}
@ -74,10 +85,7 @@ export const SocialLoginButtons = () => {
isLoading={['loading', 'authenticated'].includes(status)}
variant="outline"
>
Continue with{' '}
{isEmpty(process.env.NEXT_PUBLIC_GITLAB_NAME)
? 'GitLab'
: process.env.NEXT_PUBLIC_GITLAB_NAME}
Continue with {providers.gitlab.name}
</Button>
)}
</Stack>

2
apps/builder/libs/google-sheets.ts
View File

@ -5,7 +5,7 @@ import { decrypt, encrypt } from 'utils'
import prisma from './prisma'
export const oauth2Client = new OAuth2Client(
process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
process.env.GOOGLE_CLIENT_ID,
process.env.GOOGLE_CLIENT_SECRET,
`${process.env.NEXTAUTH_URL}/api/credentials/google-sheets/callback`
)

19
apps/builder/pages/api/auth/[...nextauth].ts
View File

@ -14,17 +14,17 @@ import { isNotEmpty } from 'utils'
const providers: Provider[] = []
if (isNotEmpty(process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID))
if (isNotEmpty(process.env.GITHUB_CLIENT_ID))
providers.push(
GitHubProvider({
clientId: process.env.NEXT_PUBLIC_GITHUB_CLIENT_ID,
clientId: process.env.GITHUB_CLIENT_ID,
clientSecret: process.env.GITHUB_CLIENT_SECRET,
})
)
if (
isNotEmpty(process.env.NEXT_PUBLIC_SMTP_FROM) &&
process.env.NEXT_PUBLIC_SMTP_AUTH_DISABLED !== 'true'
process.env.SMTP_AUTH_DISABLED !== 'true'
)
providers.push(
EmailProvider({
@ -41,39 +41,40 @@ if (
)
if (
isNotEmpty(process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID) &&
isNotEmpty(process.env.GOOGLE_CLIENT_ID) &&
isNotEmpty(process.env.GOOGLE_CLIENT_SECRET)
)
providers.push(
GoogleProvider({
clientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
})
)
if (
isNotEmpty(process.env.NEXT_PUBLIC_FACEBOOK_CLIENT_ID) &&
isNotEmpty(process.env.FACEBOOK_CLIENT_ID) &&
isNotEmpty(process.env.FACEBOOK_CLIENT_SECRET)
)
providers.push(
FacebookProvider({
clientId: process.env.NEXT_PUBLIC_FACEBOOK_CLIENT_ID,
clientId: process.env.FACEBOOK_CLIENT_ID,
clientSecret: process.env.FACEBOOK_CLIENT_SECRET,
})
)
if (
isNotEmpty(process.env.NEXT_PUBLIC_GITLAB_CLIENT_ID) &&
isNotEmpty(process.env.GITLAB_CLIENT_ID) &&
isNotEmpty(process.env.GITLAB_CLIENT_SECRET)
) {
const BASE_URL = process.env.GITLAB_BASE_URL || 'https://gitlab.com'
providers.push(
GitlabProvider({
clientId: process.env.NEXT_PUBLIC_GITLAB_CLIENT_ID,
clientId: process.env.GITLAB_CLIENT_ID,
clientSecret: process.env.GITLAB_CLIENT_SECRET,
authorization: `${BASE_URL}/oauth/authorize?scope=read_api`,
token: `${BASE_URL}/oauth/token`,
userinfo: `${BASE_URL}/api/v4/user`,
name: process.env.GITLAB_NAME || 'GitLab',
})
)
}

86
apps/docs/docs/self-hosting/configuration.md → apps/docs/docs/self-hosting/configuration.mdx
View File

@ -2,6 +2,8 @@
sidebar_position: 2
---
import { SponsorButton } from '../../src/js/SponsorButton.jsx'
# Configuration
:::note
@ -35,14 +37,14 @@ Both apps have their own environment config files. Here is an exhaustive list of
Used for sending email notifications and authentication
| Parameter | Default | Description |
| ------------------------------ | ------- | ------------------------------------------------------------------------------------------ |
| SMTP_USERNAME | -- | SMTP username |
| SMTP_PASSWORD | -- | SMTP password |
| SMTP_HOST | -- | SMTP host. (i.e. `smtp.host.com`) |
| SMTP_PORT | 25 | SMTP port |
| NEXT_PUBLIC_SMTP_FROM | - | From name and email (i.e. `"Typebot Notifications" <notifications@typebot.io>`) |
| NEXT_PUBLIC_SMTP_AUTH_DISABLED | false | To disable the authentication by email but still use the provided config for notifications |
| Parameter | Default | Description |
| --------------------- | ------- | ------------------------------------------------------------------------------------------ |
| SMTP_USERNAME | -- | SMTP username |
| SMTP_PASSWORD | -- | SMTP password |
| SMTP_HOST | -- | SMTP host. (i.e. `smtp.host.com`) |
| SMTP_PORT | 25 | SMTP port |
| NEXT_PUBLIC_SMTP_FROM | - | From name and email (i.e. `"Typebot Notifications" <notifications@typebot.io>`) |
| SMTP_AUTH_DISABLED | false | To disable the authentication by email but still use the provided config for notifications |
</p></details>
@ -52,10 +54,10 @@ Used for sending email notifications and authentication
Used authentication in the builder and for the Google Sheets integration step. Make sure to set the required scopes (`userinfo.email`, `spreadsheets`, `drive.readonly`) in your console
The Authorization callback URL should be `$NEXTAUTH_URL/api/auth/callback/google`
| Parameter | Default | Description |
| ---------------------------- | ------- | --------------------------------------------- |
| NEXT_PUBLIC_GOOGLE_CLIENT_ID | -- | The Client ID from the Google API Console |
| GOOGLE_CLIENT_SECRET | -- | The Client secret from the Google API Console |
| Parameter | Default | Description |
| -------------------- | ------- | --------------------------------------------- |
| GOOGLE_CLIENT_ID | -- | The Client ID from the Google API Console |
| GOOGLE_CLIENT_SECRET | -- | The Client secret from the Google API Console |
Used for Google Fonts:
@ -72,10 +74,10 @@ Used for authenticating with GitHub. By default, it uses the credentials of a Ty
You can create your own GitHub OAuth app [here](https://github.com/settings/developers). The Authorization callback URL should be `$NEXTAUTH_URL/api/auth/callback/github`
| Parameter | Default | Description |
| ---------------------------- | ------- | --------------------------------------------------------------------------- |
| NEXT_PUBLIC_GITHUB_CLIENT_ID | -- | Application client ID. Also used to check if it is enabled in the front-end |
| GITHUB_CLIENT_SECRET | -- | Application secret |
| Parameter | Default | Description |
| -------------------- | ------- | --------------------------------------------------------------------------- |
| GITHUB_CLIENT_ID | -- | Application client ID. Also used to check if it is enabled in the front-end |
| GITHUB_CLIENT_SECRET | -- | Application secret |
</p></details>
@ -86,13 +88,13 @@ Used for authenticating with GitLab.
Follow the official GitLab guide for creating OAuth2 applications [here](https://docs.gitlab.com/ee/integration/oauth_provider.html).
The Authorization callback URL should be `$NEXTAUTH_URL/api/auth/callback/gitlab`
| Parameter | Default | Description |
| ---------------------------- | ------------------ | ------------------------------------------------------------------------------------ | --- |
| NEXT_PUBLIC_GITLAB_CLIENT_ID | -- | Application client ID. Also used to check if it is enabled in the front-end |
| GITLAB_CLIENT_SECRET | -- | Application secret |
| GITLAB_BASE_URL | https://gitlab.com | Base URL of the GitLab instance | |
| GITLAB_REQUIRED_GROUPS | -- | Comma-separated list of groups the user has to be a direct member of, e.g. `foo,bar` |
| NEXT_PUBLIC_GITLAB_NAME | GitLab | Name of the GitLab instance, used for the SSO Login Button |
| Parameter | Default | Description |
| ---------------------- | ------------------ | ------------------------------------------------------------------------------------ | --- |
| GITLAB_CLIENT_ID | -- | Application client ID. Also used to check if it is enabled in the front-end |
| GITLAB_CLIENT_SECRET | -- | Application secret |
| GITLAB_BASE_URL | https://gitlab.com | Base URL of the GitLab instance | |
| GITLAB_REQUIRED_GROUPS | -- | Comma-separated list of groups the user has to be a direct member of, e.g. `foo,bar` |
| GITLAB_NAME | GitLab | Name of the GitLab instance, used for the SSO Login Button |
</p></details>
@ -102,10 +104,10 @@ The Authorization callback URL should be `$NEXTAUTH_URL/api/auth/callback/gitlab
You can create your own Facebook OAuth app [here](https://developers.facebook.com/apps/create/).
The Authorization callback URL should be `$NEXTAUTH_URL/api/auth/callback/facebook`
| Parameter | Default | Description |
| ------------------------------ | ------- | --------------------------------------------------------------------------- |
| NEXT_PUBLIC_FACEBOOK_CLIENT_ID | -- | Application client ID. Also used to check if it is enabled in the front-end |
| FACEBOOK_CLIENT_SECRET | -- | Application secret |
| Parameter | Default | Description |
| ---------------------- | ------- | --------------------------------------------------------------------------- |
| FACEBOOK_CLIENT_ID | -- | Application client ID. Also used to check if it is enabled in the front-end |
| FACEBOOK_CLIENT_SECRET | -- | Application secret |
</p></details>
@ -247,13 +249,13 @@ These can also be added to the `viewer` environment
Used for sending email notifications and authentication
| Parameter | Default | Description |
| --------------------- | ------- | ------------------------------------------------------------------------------- |
| SMTP_USERNAME | -- | SMTP username |
| SMTP_PASSWORD | -- | SMTP password |
| SMTP_HOST | -- | SMTP host. (i.e. `smtp.host.com`) |
| SMTP_PORT | 25 | SMTP port |
| NEXT_PUBLIC_SMTP_FROM | - | From name and email (i.e. `'Typebot Notifications' <notifications@typebot.io>`) |
| Parameter | Default | Description |
| ------------- | ------- | ------------------------------------------------------------------------------- |
| SMTP_USERNAME | -- | SMTP username |
| SMTP_PASSWORD | -- | SMTP password |
| SMTP_HOST | -- | SMTP host. (i.e. `smtp.host.com`) |
| SMTP_PORT | 25 | SMTP port |
| SMTP_FROM | - | From name and email (i.e. `'Typebot Notifications' <notifications@typebot.io>`) |
</p></details>
@ -262,9 +264,17 @@ Used for sending email notifications and authentication
Used when executing a Google Sheets block. Make sure to set the required scopes (`userinfo.email`, `spreadsheets`, `drive.readonly`) in your console
| Parameter | Default | Description |
| ---------------------------- | ------- | --------------------------------------------- |
| NEXT_PUBLIC_GOOGLE_CLIENT_ID | -- | The Client ID from the Google API Console |
| GOOGLE_CLIENT_SECRET | -- | The Client secret from the Google API Console |
| Parameter | Default | Description |
| -------------------- | ------- | --------------------------------------------- |
| GOOGLE_CLIENT_ID | -- | The Client ID from the Google API Console |
| GOOGLE_CLIENT_SECRET | -- | The Client secret from the Google API Console |
</p></details>
:::note
If you're self-hosting Typebot, [sponsoring me](https://github.com/sponsors/baptisteArno) is a great way to give back to the community and to contribute to the long-term sustainability of the project.
<SponsorButton />
Thank you for supporting independent creators of Free Open Source Software!
:::

44
apps/docs/docs/self-hosting/docker.md
View File

@ -1,44 +0,0 @@
---
sidebar_position: 2
---
# Docker
:::note
The easiest way to get started with Typebot is with [the official managed service in the Cloud](https://app.typebot.io). It takes 1 minute to try out the tool for free. You'll have high availability, backups, security, and maintenance all managed for you by me, Baptiste, Typebot's founder.
That's also the best way to support my work, open-source software, and you'll get great service!
:::
## Requirements
You need a server with Docker installed. If your server doesn't come with Docker pre-installed, you can follow [their docs](https://docs.docker.com/get-docker/) to install it.
## Getting started
On your server:
1. Download the latest `docker-compose.yml` file:
```sh
wget https://raw.githubusercontent.com/baptisteArno/typebot.io/latest/docker-compose.yml
```
2. Open the file and set the environment variables for both `typebot-builder` and `typebot-viewer`
Check out the [Configuration guide](https://docs.typebot.io/self-hosting/configuration) to add your environment variables
3. Start the applications:
```sh
docker-compose up -d
```
It does the following:
- Create a database
- Run the migrations
- Start the builder on port 8080
- Start the viewer on port 8081
You should see the login screen if you navigate to `http://{hostname}:8080`. Login with the `${ADMIN_EMAIL}` to have access to a Team plan workspace automatically.

145
apps/docs/docs/self-hosting/docker.mdx Normal file
View File

@ -0,0 +1,145 @@
---
sidebar_position: 2
---
import { SponsorButton } from '../../src/js/SponsorButton.jsx'
# Docker
:::note
The easiest way to get started with Typebot is with [the official managed service in the Cloud](https://app.typebot.io). It takes 1 minute to try out the tool for free. You'll have high availability, backups, security, and maintenance all managed for you by me, Baptiste, Typebot's founder.
That's also the best way to support my work, open-source software, and you'll get great service!
:::
## Requirements
You need a server with Docker installed. If your server doesn't come with Docker pre-installed, you can follow [their docs](https://docs.docker.com/get-docker/) to install it.
## Installation
### 1. Download the compose file
On your server, download the latest `docker-compose.yml` file:
```sh
wget https://raw.githubusercontent.com/baptisteArno/typebot.io/latest/docker-compose.yml
```
### 2. Add the required configuration
The compose file has placeholders for the required parameters. To set the parameters you'll first need a random 32-character secret key which will be used to encrypt sensitive data. Here is a simple way to generate one:
```sh
openssl rand -base64 32 | tr -d '\n' ; echo
```
Now edit `docker-compose.yml` and:
- Replace `<your-encryption-secret>` with the generated secret.
- Replace `<your-builder-url>` with the public URL of the builder (i.e. `https://typebot.domain.com:8080`).
- Replace `<your-viewer-url>` with the public URL of the viewer (i.e. `https://typebot.domain.com:8081`).
- Replace `<your-admin-email>` with the email address of the administrator.
- Configure at least one authentication provider (Email, Google, GitHub, Facebook or GitLab). More info here: [Configuration](https://docs.typebot.io/self-hosting/configuration).
### 3. Start the server
Once you've added your configuration to the compose file, you're ready to start up the server:
```sh
docker-compose up -d
```
When you run this command it does the following:
- Create a database
- Run the migrations
- Start the builder on port 8080
- Start the viewer on port 8081
You can now navigate to `http://typebot.domain.com:8080` and see the login screen. Login with the admin email to have access to a Team plan workspace automatically.
Typebot server itself does not perform SSL termination. It only runs on unencrypted HTTP. If you want to run on HTTPS you also need to set up a reverse proxy in front of the server. See below instructions.
### Update Typebot
Typebot is updated regularly, but it is up to you to apply these updates on your server. By virtue of using Docker, these updates are safe and easy to apply.
```sh
docker-compose down --remove-orphans
docker-compose pull plausible
docker-compose up -d
```
The self-hosted version is somewhat of a LTS, only getting the changes after they have been battle tested on the hosted version. If you want features as soon as they are available, consider becoming a hosted customer.
## Optional extras
### Reverse proxy
By default, Typebot runs on unencrypted HTTP on ports 8080 for the builder and 8081 for the viewer. We recommend running it on HTTPS behind a reverse proxy of some sort. You may or may not already be running a reverse proxy on your host, let's look at both options:
#### No existing reverse proxy
If your DNS is managed by a service that offers a proxy option with automatic SSL management, feel free to use that. For example, you could use Cloudflare as a reverse proxy in front of Typebot.
Alternatively, you can run your own Caddy server as a reverse proxy. This way your SSL certificate will be stored on the host machine and managed by Let's Encrypt. The Caddy server will expose port 443, terminate SSL traffic and proxy the requests to your Typebot server.
Here is an example of a docker-compose file using Caddy as a reverse proxy:
```yml
version: '3.3'
services:
caddy-gen:
container_name: caddy-gen
image: 'wemakeservices/caddy-gen:latest'
restart: always
volumes:
- /var/run/docker.sock:/tmp/docker.sock:ro
- caddy-certificates:/data/caddy
ports:
- '80:80'
- '443:443'
depends_on:
- typebot
typebot-builder:
labels:
virtual.host: 'typebot.domain.com' # change to your domain name
virtual.port: '8080'
virtual.tls-email: 'admin@example.com' # change to your email
typebot-builder:
labels:
virtual.host: 'bot.domain.com' # change to your domain name
virtual.port: '8081'
virtual.tls-email: 'admin@example.com' # change to your email
volumes:
caddy-certificates:
driver: local
```
You can merge this compose file with the first one. It should automatically enable SSL on your server and you should be able to navigate to:
- `https://typebot.domain.com`
- `https://bot.domain.com`
#### Existing reverse proxy
If you're already running a reverse proxy, the most important things to note are:
1. Configure the virtual hosts to match the `NEXTAUTH_URL` and `NEXT_PUBLIC_VIEWER_URL` in your `docker-compose` configuration.
2. Proxy the traffic to `127.0.0.1:8080` or `{ip-address}:8080` and to `127.0.0.1:8081` or `{ip-address}:8081` if running on a remote machine
:::note
If you're self-hosting Typebot, [sponsoring me](https://github.com/sponsors/baptisteArno) is a great way to give back to the community and to contribute to the long-term sustainability of the project.
<SponsorButton />
Thank you for supporting independent creators of Free Open Source Software!
:::
:::note
This doc has been inspired by [Plausible docs](https://plausible.io/docs). They have a similar self-hosting solutions, and their documentation is 🔥.
:::

4
apps/docs/docusaurus.config.js
View File

@ -24,9 +24,9 @@ module.exports = {
],
},
algolia: {
apiKey: 'd2e121d4ad4e5346ac2c3329424981a1',
apiKey: '978429d40094dc0fd2dd02db741b3dbe',
indexName: 'typebot',
appId: 'DXYNLHZTGJ',
appId: '6GBQ91COKA',
contextualSearch: false,
},
footer: {

9
apps/docs/src/css/custom.css
View File

@ -46,3 +46,12 @@ details {
background-color: transparent !important;
border-color: transparent !important;
}
.sponsor-btn {
background-color: var(--ifm-color-primary);
color: white;
border-radius: 5px;
padding: 0.5rem 1rem;
text-decoration: none !important;
margin-bottom: 10px;
}

13
apps/docs/src/js/SponsorButton.jsx Normal file
View File

@ -0,0 +1,13 @@
import React from 'react'
export const SponsorButton = () => (
<div style={{ paddingBottom: '20px' }}>
<a
href="https://github.com/sponsors/baptisteArno"
target="_blank"
className="sponsor-btn"
>
Sponsor me
</a>
</div>
)

5
apps/viewer/.env.docker
View File

@ -1,3 +1,2 @@
NEXT_PUBLIC_VIEWER_URL=DOCKER_PUBLIC_VIEWER_URL
NEXT_PUBLIC_SMTP_FROM=DOCKER_NEXT_PUBLIC_SMTP_FROM
NEXT_PUBLIC_GOOGLE_CLIENT_ID=DOCKER_NEXT_PUBLIC_GOOGLE_CLIENT_ID
# Don't edit this file
NEXT_PUBLIC_VIEWER_URL=DOCKER_NEXT_PUBLIC_VIEWER_URL

2
apps/viewer/.env.local.example
View File

@ -3,4 +3,4 @@ NEXT_PUBLIC_VIEWER_URL=http://localhost:3001
DATABASE_URL=postgresql://postgres:typebot@localhost:5432/typebot
# For more configuration options check out:
https://docs.typebot.io/self-hosting/configuration
# https://docs.typebot.io/self-hosting/configuration

3
apps/viewer/.env.production.example
View File

@ -1,3 +0,0 @@
DATABASE_URL=postgresql://postgres:typebot@db:5432/typebot
NEXT_PUBLIC_VIEWER_URL=http://localhost:8081
ENCRYPTION_SECRET=SgVkYp2s5v8y/B?E(H+MbQeThWmZq4t6

2
apps/viewer/libs/google-sheets.ts
View File

@ -17,7 +17,7 @@ export const getAuthenticatedGoogleClient = async (
) as GoogleSheetsCredentialsData
const oauth2Client = new OAuth2Client(
process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID,
process.env.GOOGLE_CLIENT_ID,
process.env.GOOGLE_CLIENT_SECRET,
`${process.env.NEXTAUTH_URL}/api/credentials/google-sheets/callback`
)

12
docker-compose.yml
View File

@ -24,10 +24,10 @@ services:
# See https://docs.typebot.io/self-hosting/configuration for more configuration options
environment:
- DATABASE_URL=postgresql://postgres:typebot@typebot-db:5432/typebot
- NEXTAUTH_URL=http://localhost:8080
- NEXT_PUBLIC_VIEWER_URL=http://localhost:8081
- ENCRYPTION_SECRET=SgVkYp2s5v8y/B?E(H+MbQeThWmZq4t6
- ADMIN_EMAIL=me@email.com
- NEXTAUTH_URL=<your-builder-url>
- NEXT_PUBLIC_VIEWER_URL=<your-viewer-url>
- ENCRYPTION_SECRET=<your-encryption-secret>
- ADMIN_EMAIL=<your-admin-email>
typebot-viewer:
image: baptistearno/typebot-viewer:latest
restart: always
@ -36,7 +36,7 @@ services:
# See https://docs.typebot.io/self-hosting/configuration for more configuration options
environment:
- DATABASE_URL=postgresql://postgres:typebot@typebot-db:5432/typebot
- NEXT_PUBLIC_VIEWER_URL=http://localhost:8081
- ENCRYPTION_SECRET=SgVkYp2s5v8y/B?E(H+MbQeThWmZq4t6
- NEXT_PUBLIC_VIEWER_URL=<your-viewer-url>
- ENCRYPTION_SECRET=<your-encryption-secret>
volumes:
db_data:

2
entrypoint.sh
View File

@ -7,7 +7,7 @@
set +x
# config
envFilename='.env.production'
envFilename='./.env.production'
nextFolder='./.next/'
function apply_path {