Skip to content

Deploying an Accent App

Introduction

Accent is an open-source localization and translation management platform designed to centralize your application’s translations, streamline collaboration between developers and translators, and keep your content in sync across multiple projects and languages. Built on modern web technologies, Accent provides a web dashboard, an API for integrating with your apps, and tooling for synchronizing translation files.

Deploying Accent on Klutch.sh with a Dockerfile gives you a fully managed, scalable, and secure environment for hosting your localization platform. This guide walks through setting up Accent with Docker, connecting it to a database, configuring persistent storage, and deploying it via the Klutch.sh dashboard at klutch.sh/app.


Prerequisites

Before you begin, you’ll need:

  • A Klutch.sh account
  • A GitHub account (GitHub is the only supported git source)
  • Docker installed locally for testing (optional but recommended)
  • Access to a PostgreSQL database (managed service or another Klutch.sh app)
  • Basic familiarity with environment variables and Docker

Project Setup for Accent

1. Create a Project Directory

Start by creating a new directory for your Accent deployment:

Terminal window
mkdir accent-klutch
cd accent-klutch
git init

2. Configure Environment Variables

Accent requires a PostgreSQL database and several configuration values. Create an .env file for local development (do not commit secrets to git in production):

Terminal window
DATABASE_URL=ecto://accent:accent_password@postgres:5432/accent_db
SECRET_KEY_BASE=replace_with_strong_secret
ACCENT_PORT=4000
ACCENT_HOST=localhost

On Klutch.sh, you will define these values as environment variables in the dashboard instead of using a .env file.


Creating a Dockerfile for Accent

Klutch.sh automatically detects a Dockerfile in the repository root and uses it for deployment. You don’t select Docker as a deployment option in the UI and you don’t specify the Dockerfile path—the platform handles this for you.

The example below uses a multi-stage Docker build for an Elixir/Phoenix-based Accent instance.

Create a Dockerfile in your project root:

# === Build stage ===
FROM elixir:1.17-alpine AS builder
RUN apk add --no-cache build-base git nodejs npm python3
WORKDIR /app
# Prepare mix environment
ENV MIX_ENV=prod
# Install Hex and Rebar
RUN mix local.hex --force && \
mix local.rebar --force
# Copy mix files and install deps
COPY mix.exs mix.lock ./
COPY config config
RUN mix deps.get --only prod
RUN mix deps.compile
# Build frontend assets if Accent uses a JS frontend
COPY assets assets
RUN cd assets && npm install && npm run build
# Copy the rest of the app and compile
COPY lib lib
COPY priv priv
RUN mix phx.digest
RUN mix release
# === Runtime stage ===
FROM alpine:3.19 AS runner
RUN apk add --no-cache openssl ncurses-libs bash
WORKDIR /app
ENV MIX_ENV=prod
ENV HOME=/app
# Set runtime port for Accent
ENV ACCENT_PORT=4000
ENV PORT=4000
# Copy release from builder
COPY --from=builder /app/_build/prod/rel/accent ./
# Create directories for logs and uploads
RUN mkdir -p /var/log/accent /var/accent/uploads && \
chown -R nobody:nobody /var/log/accent /var/accent/uploads
USER nobody
EXPOSE 4000
ENTRYPOINT ["bin/accent"]
CMD ["start"]

Dockerfile Notes

  • The runtime container listens on port 4000, which should be the internal port you use when configuring the app in Klutch.sh.
  • The Dockerfile assumes your Accent release is named accent and uses bin/accent start as the default start command.
  • Logs and uploads are stored in /var/log/accent and /var/accent/uploads, which you can mount as persistent volumes on Klutch.sh.

Sample Client Code: Using the Accent API

Once Accent is running, your applications can interact with it via HTTP to fetch translations or synchronize content. The following snippet shows a simple example of fetching translations from Accent using JavaScript.

Assuming Accent is deployed at https://example-app.klutch.sh:

// Simple example of fetching translations from an Accent API endpoint
async function fetchTranslations(locale) {
const response = await fetch(
`https://example-app.klutch.sh/api/translations?locale=${encodeURIComponent(locale)}`,
{
headers: {
Accept: 'application/json',
// Include any API token or auth header if your Accent instance requires it
// 'Authorization': 'Bearer YOUR_API_TOKEN',
},
}
);
if (!response.ok) {
throw new Error(`Failed to load translations for ${locale}`);
}
return response.json();
}
// Example usage
fetchTranslations('en')
.then((data) => {
console.log('Loaded translations:', data);
})
.catch((err) => {
console.error(err);
});

You can adapt this pattern to your framework of choice (React, Vue, Angular, etc.) to hydrate your UI with translations from Accent.


Optional: Local Development with Docker

For local development only, you can use Docker or Docker Compose to run Accent alongside PostgreSQL. Docker Compose is not supported as a deployment mechanism on Klutch.sh, but it’s useful on your machine.

Example (local only) docker-compose.yml:

version: "3.9"
services:
postgres:
image: postgres:16
environment:
POSTGRES_USER: accent
POSTGRES_PASSWORD: accent_password
POSTGRES_DB: accent_db
ports:
- "5432:5432"
volumes:
- pgdata:/var/lib/postgresql/data
accent:
build: .
environment:
DATABASE_URL: ecto://accent:accent_password@postgres:5432/accent_db
SECRET_KEY_BASE: replace_with_strong_secret
ACCENT_PORT: 4000
ACCENT_HOST: localhost
ports:
- "4000:4000"
depends_on:
- postgres
volumes:
pgdata: {}

Use this only to verify your Dockerfile and Accent configuration locally:

Terminal window
docker compose up --build

Then open http://localhost:4000 to access the Accent dashboard.


Pushing the Accent Project to GitHub

With your Dockerfile and Accent source code in place, push your project to GitHub:

Terminal window
git add .
git commit -m "Initial Accent Docker setup for Klutch.sh"
git branch -M main
git remote add origin https://github.com/your-username/accent-klutch.git
git push -u origin main

Klutch.sh will use this repository as the source for your deployment.


Creating an Accent App on Klutch.sh

Once your repository is ready, you can create and configure the Accent app through the Klutch.sh dashboard.

Connect Your Repository

  1. Navigate to klutch.sh/app and sign in.
  2. Go to Create Project and give your project a name such as accent-platform.
  3. Open Create App and:
    • Select GitHub as the git source.
    • Choose your Accent repository and deployment branch (for example, main).

Klutch.sh automatically detects the Dockerfile in your repository root and uses it for the build.

Traffic Type and Internal Port

  • Traffic Type: Select HTTP (Accent exposes a web dashboard and HTTP API).
  • Internal Port: Set to 4000, matching the port exposed and used in your Dockerfile.

This configuration ensures that HTTP traffic to your app is routed correctly to the Accent server inside the container.

Environment Variables on Klutch.sh

Set the necessary runtime environment variables in the app’s Environment section. Typical values include:

  • DATABASE_URL – PostgreSQL connection string, for example:

    ecto://accent:accent_password@your-postgres-host:5432/accent_db
  • SECRET_KEY_BASE – a strong, random secret used by Accent/Phoenix for encryption and session integrity.

  • ACCENT_HOST – your public hostname, such as example-app.klutch.sh.

  • ACCENT_PORT – should be 4000 to match your Dockerfile and internal port.

If you ever choose to deploy Accent without a Dockerfile and let Nixpacks handle the build, you can customize commands via environment variables:

  • BUILD_COMMAND – override the default build command used by Nixpacks.
  • START_COMMAND – override the default start command used by Nixpacks.

Set these in the Klutch.sh dashboard when you need to customize Nixpacks behavior.


Attaching Persistent Volumes

Accent benefits from persistent storage to retain uploads, generated files, and logs across deployments.

In the app’s Storage/Volumes section, add:

  • Uploads Volume

    • Mount path: /var/accent/uploads
    • Size: Choose based on anticipated storage needs (for example, 5 GiB, 10 GiB, or more).
  • Logs Volume (optional but recommended)

    • Mount path: /var/log/accent
    • Size: Enough to retain your desired log history (for example, 1 GiB5 GiB).

Ensure your Accent configuration writes uploads and any persistent artifacts into /var/accent/uploads so they survive restarts and redeploys.


Deploying and Verifying Your Accent App

After you configure the repository, traffic type, internal port, environment variables, and volumes:

  1. Click Create in the Klutch.sh dashboard to start the deployment.
  2. Klutch.sh will:
    • Clone your GitHub repository
    • Detect and build the Dockerfile
    • Provision compute and attach the persistent volumes
    • Route HTTP traffic to your container on port 4000

When the deployment succeeds, your Accent instance will be available at a URL like:

https://example-app.klutch.sh

Open that URL in your browser to access the Accent dashboard and complete any initial onboarding or admin user setup required by your configuration.


Troubleshooting

The Accent Dashboard Does Not Load

  • Verify that the app’s traffic type is HTTP (not TCP).
  • Confirm that the internal port is set to 4000 and matches the EXPOSE 4000 line in the Dockerfile.
  • Check logs in the Klutch.sh dashboard for errors related to the Accent release or database connectivity.
  • Ensure all required environment variables (DATABASE_URL, SECRET_KEY_BASE, ACCENT_HOST, ACCENT_PORT) are defined and correct.

Database Connection Errors

  • Confirm that the PostgreSQL instance is reachable from your Accent app (correct hostname, port, username, password, and database name).
  • Verify that your DATABASE_URL is correctly formatted.
  • If the database is deployed as a separate Klutch.sh app, ensure it is configured with the appropriate TCP traffic type and internal port (for example, a PostgreSQL internal port of 5432 mapped through Klutch.sh’s TCP routing on port 8000).

Data or Uploads Not Persisting

  • Check that a persistent volume is mounted at /var/accent/uploads.
  • Confirm that your Accent configuration uses /var/accent/uploads as the upload or storage path.
  • Ensure the volume size is sufficient and that the container has permission to write to the mounted directory.

Build or Release Failures

  • Make sure your mix.exs, config files, and Elixir version align with the Dockerfile.
  • Check that any required environment variables for the build step are set (for example, database configuration for migrations).
  • Review the build logs in the Klutch.sh dashboard for specific error messages.


By deploying Accent on Klutch.sh with a Dockerfile, you gain full control over your localization platform’s runtime environment while leveraging Klutch.sh’s GitHub integration, flexible networking, and persistent storage. With the right Dockerfile, environment variables, and volume configuration, you can run a robust, production-ready Accent instance alongside your applications and keep all of your translations centralized and always up to date.