# AlgoKit Templates

AlgoKit offers a curated collection of production-ready and starter templates, streamlining front-end and smart contract development. These templates provide a comprehensive suite of pre-configured tools and integrations, from boilerplate React projects with Algorand wallet integration to smart contract projects for Python and TypeScript. This enables developers to prototype and deploy robust, production-ready applications rapidly.

By leveraging AlgoKit templates, developers can significantly reduce setup time, ensure best practices in testing, compiling, and deploying smart contracts, and focus on building innovative blockchain solutions with confidence.

This page provides an overview of the official AlgoKit templates and guidance on creating and sharing your custom templates to suit your needs better or contribute to the community.

## Official Templates

AlgoKit provides several official templates to cater to different development needs. These templates will create a standalone AlgoKit project.

- Smart Contract Templates:
  - [Algorand Python](https://github.com/algorandfoundation/algokit-python-template)
  - [Algorand TypeScript](https://github.com/algorand-devrel/tealscript-algokit-template)
- [DApp React Frontend](https://github.com/algorandfoundation/algokit-react-frontend-template)
- [Fullstack (Smart Contract & DApp Frontend template)](https://github.com/algorandfoundation/algokit-fullstack-template)

## How to initialize a template

**To initialize using the `algokit` CLI**:

1. [Install AlgoKit](https://dev.algorand.co/getting-started/tutorials/get-ready-to-build) and all the prerequisites mentioned in the installation guide.

2. Execute the command `algokit init`. This initiates an interactive wizard that assists in selecting the most appropriate template for your project requirements.

```
algokit init # This command will start an interactive wizard to select a template
```

**To initialize within GitHub Codespaces**:

1. Go to the [algokit-base-template](https://github.com/algorandfoundation/algokit-base-template) repository.
2. Initiate a new codespace by selecting the `Create codespace on main` option. You can find this by clicking the `Code` button and then navigating to the `Codespaces` tab.
3. Upon codespace preparation, `algokit` will automatically start `LocalNet` and present a prompt with the next steps. Executing `algokit init` will initiate the interactive wizard.

## Algorand Python Smart Contract Template

[Algorand Python Smart Contract Template Github Repo](https://github.com/algorandfoundation/algokit-python-template)

This template provides a production-ready baseline for developing and deploying [Python](https://github.com/algorandfoundation/puya) smart contracts.

To use it [install AlgoKit](https://github.com/algorandfoundation/algokit-cli#readme) and then either pass in `-t python` to `algokit init` or select the `python` template.

```
algokit init -t python

# or

algokit init # and select Smart Contracts & Python template
```

### Features

This template supports the following features:

- Compilation of multiple Algorand Python contracts to a predictable folder location and file layout where they can be deployed
- Deploy-time immutability and permanence control
- [Poetry](https://python-poetry.org/) for Python dependency management and virtual environment management
- Linting via [Ruff](https://github.com/charliermarsh/ruff) or [Flake8](https://flake8.pycqa.org/en/latest/)
- Formatting via [Black](https://github.com/psf/black)
- Type checking via [mypy](https://mypy-lang.org/)
- Testing via pytest (not yet used)
- Dependency vulnerability scanning via pip-audit (not yet used)
- VS Code configuration (linting, formatting, breakpoint debugging)
- dotenv (.env) file for configuration
- Automated testing of the compiled smart contracts
- [Output stability](https://github.com/algorandfoundation/algokit-cli/blob/main/docs/articles/output_stability.md) tests of the TEAL output
- CI/CD pipeline using GitHub Actions:
  - Optionally pick deployments to Netlify or Vercel

### Getting started

Once the template is instantiated, you can follow the `README.md` file to see instructions on how to use the template.

- [Instructions for Starter template](https://github.com/algorandfoundation/algokit-python-template/blob/main/examples/starter_python/README.md)
- [Instructions for Production template](https://github.com/algorandfoundation/algokit-python-template/blob/main/examples/production_python/README.md)

## Algorand TypeScript Smart Contract Template

[Algorand TypeScript Smart Contract Template Github Repo](https://github.com/algorand-devrel/tealscript-algokit-template)

This template provides a baseline TealScript smart contract development environment.

To use it [install AlgoKit](https://github.com/algorandfoundation/algokit-cli#readme) and then either pass in `-t tealscript` to `algokit init` or select the `TypeScript` language option interactively during `algokit init.`

```
algokit init -t tealscript

# or

algokit init # and select Smart Contracts & TypeScript template
```

### Getting started

Once the template is instantiated, you can follow the [README.md](https://github.com/algorand-devrel/tealscript-algokit-template/blob/master/template_content/README.md) file for instructions on how to use it.

## DApp Frontend React Template

[DApp Frontend React Template Github Repo](https://github.com/algorandfoundation/algokit-react-frontend-template)

This template provides a baseline React web app for developing and integrating with any [ARC32](https://github.com/algorandfoundation/ARCs/blob/main/ARCs/arc-0032.md) compliant Algorand smart contracts.

To use it [install AlgoKit](https://github.com/algorandfoundation/algokit-cli#readme) and then either pass in `-t react` to `algokit init` or select the `react` template interactively during `algokit init`.

```
algokit init -t react

# or

algokit init # and select DApp Frontend template
```

### Features

This template supports the following features:

- React web app with [Tailwind CSS](https://tailwindcss.com/) and [TypeScript](https://www.typescriptlang.org/)
- Styled framework agnostic CSS components using [DaisyUI](https://daisyui.com/).
- Starter jest unit tests for typescript functions. It can be turned off if not needed.
- Starter [playwright](https://playwright.dev/) tests for end to end testing. It can be turned off if not needed.
- Integration with [use-wallet](https://github.com/txnlab/use-wallet) for connecting to Algorand wallets such as Pera, Defly, and Exodus.
- Example of performing a transaction.
- Dotenv support for environment variables and a local-only KMD provider that can connect the frontend component to an `algokit localnet` instance (docker required).
- CI/CD pipeline using GitHub Actions (Vercel or Netlify for hosting)

### Getting started

Once the template is instantiated, you can follow the `README.md` file to see instructions on how to use the template.

- [Instructions for Starter template](https://github.com/algorandfoundation/algokit-react-frontend-template/blob/main/examples/starter_react/README.md)
- [Instructions for Production template](https://github.com/algorandfoundation/algokit-react-frontend-template/blob/main/examples/production_react/README.md)

## Fullstack (Smart Contract + Frontend) Template

[Fullstack (Smart Contract + Frontend) Template Github Repo](https://github.com/algorandfoundation/algokit-fullstack-template)

This full-stack template provides both a baseline React web app and a production-ready baseline for developing and deploying `Algorand Python` and `TypeScript` smart contracts. It’s suitable for developing and integrating with any [ARC32](https://github.com/algorandfoundation/ARCs/blob/main/ARCs/arc-0032.md) compliant Algorand smart contracts.

To use this template, [install AlgoKit](https://github.com/algorandfoundation/algokit-cli#readme) and then either pass in `-t fullstack` to `algokit init` or select the relevant template interactively during `algokit init`.

```
algokit init -t fullstack

# or

algokit init # and select the Smart Contracts & DApp Frontend template
```

### Features

This template supports many features for developing full-stack applications using official AlgoKit templates. Using the full-stack template currently allows you to create a workspace that combines the following frontend template:

- [algokit-react-frontend-template](https://github.com/algorandfoundation/algokit-react-frontend-template) - A React web app with TypeScript, Tailwind CSS, and all Algorand-specific integrations pre-configured and ready for you to build.

And the following backend templates:

- [algokit-python-template](https://github.com/algorandfoundation/algokit-python-template) - An official starter for developing and deploying Algorand Python smart contracts.
- [algokit-tealscript-template](https://github.com/algorand-devrel/tealscript-algokit-template) - An official starter for developing and deploying TealScript smart contracts.

Initializing a fullstack algokit project will create an AlgoKit workspace with a frontend React web app and Algorand smart contract project inside the `projects` folder.

- .algokit.toml
- README.md
- {your_workspace/project_name}.code-workspace
- Directoryprojects  
  - smart-contract  
  - frontend