Skip to content

odest/tauri-nextjs-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

79 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Tauri + Next.js Template

Tauri + Next.js Monorepo Template

License: GPL-3.0 Version Platform Made with

This is a modern monorepo template that combines Tauri for cross-platform desktop and mobile applications with Next.js for web development, all managed with pnpm workspaces and Turbo.

Table of Contents

๐Ÿš€ Features

  • ๐Ÿ–ฅ๏ธ Cross-platform Desktop App - Built with Tauri and Next.js
  • ๐ŸŒ Web Application - Pure Next.js web app
  • ๐Ÿ“ฆ Shared UI Components - shadcn/ui components shared across apps
  • ๐Ÿ”ง Monorepo Setup - pnpm workspaces + Turborepo for optimal developer experience
  • โš™๏ธ Automated Setup - One-command project initialization
  • โšก Fast Development - Turbo + Next.js Turbopack for lightning-fast builds
  • ๐ŸŽจ Modern UI - Tailwind CSS + shadcn/ui components
  • ๐Ÿ“ฑ Responsive Design - Works on all screen sizes
  • ๐Ÿ”’ Type Safety - Full TypeScript support
  • ๐ŸŒ Internationalization - Multi-language support with next-intl (10 languages included)
  • ๐Ÿš€ CI/CD Ready - GitHub Actions with automated releases

๐Ÿ“‹ Prerequisites

Note

For detailed information you can refer to Tauri's official documents: Prerequisites

Before you begin, ensure you have the following installed:

Optional for Mobile Development:

  • Xcode (for iOS development) - Download
  • Android Studio (for Android development) - Download

๐Ÿ› ๏ธ Quick Start

Step 1: Create Your Repository

First, create your own repository from this template:

  1. Use this template: Click the "Use this template" button on GitHub, or fork the repository to create your own copy.

  2. Configure GitHub Actions permissions: After creating your repository, go to:

    • Settings โ†’ Actions โ†’ General โ†’ Workflow permissions
    • Enable "Read and write permissions"
    • Enable "Allow GitHub Actions to create and approve pull requests"

Warning

If these options are grayed out, your organization or enterprise may have restricted these permissions. Check with your organization/enterprise settings first.

This configuration is required for release-please to automatically create release pull requests.

Step 2: Clone and Initialize Your Project

Windows (PowerShell)

# Clone your repository
git clone https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
cd YOUR_REPO_NAME

# Run the initialization script
.\init-project.ps1

# Install dependencies
pnpm install

# Start development
pnpm dev

Linux / macOS (Bash)

# Clone your repository
git clone https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
cd YOUR_REPO_NAME

# Make the script executable and run it
chmod +x init-project.sh
./init-project.sh

# Install dependencies
pnpm install

# Start development
pnpm dev

The initialization script will:

  • โœ… Ask for your project name (lowercase, hyphens allowed)
  • โœ… Ask for initial version (default: 0.1.0)
  • โœ… Optionally update GitHub username references
  • โœ… Update all configuration files automatically
  • โœ… Optionally rewrite initial commit and create refactor commit

Important

After running the initialization script and pushing the refactor commit, release-please will automatically create a Pull Request titled something like chore: release master. DO NOT MERGE THIS PR YET! You must first complete Step 3 (Android signing configuration) or disable the Android build workflow, otherwise the GitHub Actions that build Android will fail.

Step 3: Configure Android Signing (REQUIRED for Android Builds)

Warning

This step is REQUIRED if you want to build Android apps. The GitHub Actions workflow includes Android builds by default. If you skip this step, the workflow will fail when you merge the release-please PR.

You have two options:

  1. Complete the Android signing setup (recommended if you plan to build Android apps)
  2. Disable the Android build in .github/workflows/release.yml by commenting out or removing the Android build jobs

If you plan to build Android apps, you need to set up the code signing. The codebase is already prepared for this signing; you just need to perform the following steps:

3.1. Generate a Keystore File

Note

For detailed information please checkout the official Tauri Android signing documentation to create your keystore. This is a summary.

Linux/macOS:

keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload

Windows (PowerShell):

keytool -genkey -v -keystore $env:USERPROFILE\upload-keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias upload

Windows (CMD):

keytool -genkey -v -keystore "%USERPROFILE%\upload-keystore.jks" -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias upload

3.2. Create Keystore Properties File

Create a file named apps/native/src-tauri/gen/android/keystore.properties with your keystore information:

storePassword=<your store password defined when keytool was executed>
keyPassword=<your key password defined when keytool was executed>
keyAlias=<your key alias defined when keytool was executed>
storeFile=<location of the key store file, such as /Users/<user name>/upload-keystore.jks or C:\\Users\\<user name>\\upload-keystore.jks>

Warning

Keep the keystore.properties file confidential. To prevent sensitive information from being stored, the file has been added to the .gitignore file.

3.3. Convert Keystore to Base64

Convert your keystore file to Base64 format:

Linux/macOS:

base64 -i ~/upload-keystore.jks -o keystore.base64.txt

Windows (PowerShell):

certutil -encode upload-keystore.jks keystore.base64.txt

Warning

The certutil command adds -----BEGIN CERTIFICATE----- and -----END CERTIFICATE----- headers to the output, which should be removed.

3.4. Add GitHub Secrets

Add the following secrets to your GitHub repository:

  1. Go to: Settings โ†’ Secrets and variables โ†’ Actions โ†’ Repository secrets
  2. Click "New repository secret" and add these 5 secrets:
Secret Name Description Example Value
BASE64_JKS Base64-encoded keystore file content (content from keystore.base64.txt)
KEY_ALIAS Key alias set during keystore creation upload
KEY_PASSWORD Key password set during keystore creation your-key-password
STORE_FILE Keystore file name ~/home/odest/upload-keystore.jks
STORE_PASSWORD Store password set during keystore creation your-store-password

Warning

Never commit your keystore file or passwords to your repository. Always use GitHub Secrets for sensitive information.

3.5. Merge the Release PR

After completing the Android signing setup (or disabling the Android build), you can now safely merge the release-please Pull Request:

  1. Go to your repository on GitHub
  2. Navigate to the Pull Requests tab
  3. Find the PR titled chore: release master created by release-please
  4. Review the changes in the PR
  5. Click Merge pull request

Once merged, GitHub Actions will automatically:

  • Build your desktop app (Windows, macOS, Linux)
  • Build your Android app (if signing is configured)
  • Create a new GitHub release with all binaries attached

Tip

If you don't plan to build Android apps immediately, you can disable the Android build in .github/workflows/release.yml and complete the signing setup later when needed.

Step 4: Start Building! ๐Ÿš€

You're all set! Now you can start developing your app:

# Desktop app development
pnpm tauri dev

# Web app development
pnpm --filter web dev

# Build for production
pnpm build

๐Ÿ“ Project Structure

โ”œโ”€โ”€ apps/
โ”‚   โ”œโ”€โ”€ native/             # Tauri + Next.js application
โ”‚   โ”‚   โ”œโ”€โ”€ src/            # Next.js frontend source
โ”‚   โ”‚   โ”œโ”€โ”€ src-tauri/      # Tauri backend source
โ”‚   โ”‚   โ””โ”€โ”€ package.json
โ”‚   โ””โ”€โ”€ web/                # Next.js web application
โ”‚       โ”œโ”€โ”€ app/            # Next.js app directory
โ”‚       โ””โ”€โ”€ package.json
โ”œโ”€โ”€ packages/
โ”‚   โ”œโ”€โ”€ ui/                 # Shared shadcn/ui components
โ”‚   โ”œโ”€โ”€ i18n/               # Internationalization package
โ”‚   โ”œโ”€โ”€ eslint-config/      # Shared ESLint configuration
โ”‚   โ””โ”€โ”€ typescript-config/  # Shared TypeScript configuration
โ”œโ”€โ”€ .github/                # GitHub Actions workflows
โ””โ”€โ”€ package.json            # Root package.json

๐ŸŽฏ Available Commands

# Development
pnpm dev                          # Start all apps in development mode
pnpm build                        # Build all apps and packages
pnpm lint                         # Run ESLint on all packages
pnpm check-types                  # Run TypeScript type checking
pnpm clean                        # Clean all build outputs

# Tauri specific
pnpm tauri                        # Run Tauri CLI commands
pnpm tauri dev                    # Start Tauri app in development

# UI Components
pnpm shadcn                       # Add shadcn/ui components to the UI package

๐Ÿงฉ Adding shadcn/ui Components

To add new shadcn/ui components to your project:

# Add to the shared UI package
pnpm shadcn add button

# The component will be available in all apps as:
import { Button } from "@workspace/ui/components/button"

๐ŸŒ Internationalization (i18n)

This template includes built-in support for 10 languages:

  • ๐Ÿ‡ฌ๐Ÿ‡ง English
  • ๐Ÿ‡น๐Ÿ‡ท Turkish
  • ๐Ÿ‡ช๐Ÿ‡ธ Spanish
  • ๐Ÿ‡ซ๐Ÿ‡ท French
  • ๐Ÿ‡ฉ๐Ÿ‡ช German
  • ๐Ÿ‡ต๐Ÿ‡น Portuguese
  • ๐Ÿ‡ฎ๐Ÿ‡น Italian
  • ๐Ÿ‡ท๐Ÿ‡บ Russian
  • ๐Ÿ‡ฏ๐Ÿ‡ต Japanese
  • ๐Ÿ‡จ๐Ÿ‡ณ Chinese (Simplified)

Note: Current translations were generated using AI and may need review for accuracy.

Usage

// Import translations
import { useTranslations } from "@workspace/i18n";

// Use in components
function MyComponent() {
  const t = useTranslations("HomePage");
  return <h1>{t("title")}</h1>;
}

Adding New Languages

  1. Create a new JSON file in packages/i18n/src/messages/[locale].json
  2. Add the locale configuration in packages/i18n/src/routing.ts
  3. Import and export the messages in packages/i18n/src/index.ts

๐Ÿ”„ Release Process

This project uses release-please for automated releases:

  1. Make changes and commit using Conventional Commits
  2. Push to the master branch
  3. release-please will create a release PR
  4. Merge the release PR to create a new release
  5. GitHub Actions will automatically build and publish desktop and mobile app binaries

Commit Convention

  • feat: - New features
  • fix: - Bug fixes
  • docs: - Documentation changes
  • style: - Code style changes
  • refactor: - Code refactoring
  • test: - Test additions or changes
  • chore: - Maintenance tasks

๐Ÿค Contributing

We welcome contributions! Please see CONTRIBUTING.md for details.

๐Ÿ“„ License

This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.