Skip to content

Commit

Permalink
feat: adding netlify and vercel configuration as an optional step; ad…
Browse files Browse the repository at this point in the history
…ding algokit media guide compliant image asset (#4)

* feat: expanding copier template with continuous deployment provider setup

* docs: adding readme header assets

* docs: refining readme

* refactor: refining copier flow

* chore: regenerating templates

* chore: regenerating templates

* feat: refining the approach; using workflows instead; adding missing env vars

* refactor: addressing pr comments

* refactor: addressing pr comments

* refactor: addressing pr comments
  • Loading branch information
aorumbayev authored Jun 20, 2023
1 parent 9012e3f commit 135112a
Show file tree
Hide file tree
Showing 99 changed files with 9,596 additions and 255 deletions.
37 changes: 28 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,23 @@
# AlgoKit React Template
<div align="center">
<a href="https://github.com/algorandfoundation/algokit-react-frontend-template"><img src="https://bafybeibsg44yt327gd7jxfsetk6tw6zcxqnrb5hlqsnowlolncnw3qxhjm.ipfs.nftstorage.link/" width=60%></a>
</div>

<p align="center">
<a target="_blank" href="https://github.com/algorandfoundation/algokit-cli">
<img src="https://img.shields.io/badge/docs-repository-00dc94?logo=github&style=flat.svg" />
</a>
<a target="_blank" href="https://developer.algorand.org/algokit/">
<img src="https://img.shields.io/badge/learn-AlgoKit-00dc94?logo=algorand&mac=flat.svg" />
</a>
<a target="_blank" href="https://github.com/algorandfoundation/algokit-react-frontend-template">
<img src="https://img.shields.io/github/stars/algorandfoundation/algokit-react-frontend-template?color=00dc94&logo=star&style=flat" />
</a>
<a target="_blank" href="https://developer.algorand.org/algokit/">
<img src="https://api.visitorbadge.io/api/visitors?path=algorandfoundation%2Falgokit-react-frontend-template&countColor=%2300dc94&style=flat" />
</a>
</p>

---

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

Expand All @@ -10,14 +29,14 @@ This is one of the official frontend templates used by AlgoKit to initialise an

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. Can be disabled if not needed.
- Starter [playwright](https://playwright.dev/) tests for end to end testing. Can be disabled 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, as well as a local only KMD provider that can be used for connecting the frontend component to an `algokit localnet` instance (docker required).
- CI pipeline using GitHub Actions (CD to be defined later)
- 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. Can be disabled if not needed.
- Starter [playwright](https://playwright.dev/) tests for end to end testing. Can be disabled 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, as well as a local only KMD provider that can be used for connecting the frontend component to an `algokit localnet` instance (docker required).
- CI/CD pipeline using GitHub Actions (Vercel or Netlify for hosting)

# Getting started

Expand Down
182 changes: 96 additions & 86 deletions copier.yaml
Original file line number Diff line number Diff line change
@@ -1,86 +1,96 @@
_subdirectory: template_content

# questions
# project_name should never get prompted, AlgoKit should always pass it by convention
project_name:
type: str
help: Name for this project.
placeholder: "algorand-app"

author_name:
type: str
help: Package author name
placeholder: "Your Name"

author_email:
type: str
help: Package author email
placeholder: "[email protected]"

ide_vscode:
type: bool
help: Do you want to add VSCode configuration?
default: yes

use_eslint_prettier:
type: bool
help: Do you want to use ESLint and Prettier for code linting and formatting?
default: yes

use_tailwind:
type: bool
help: Do you want to use Tailwind CSS? A utility-first CSS framework for rapidly building custom designs.
default: yes

use_daisy_ui:
type: bool
help: Do you want to use a daisyUI? Framework agnostic CSS component library for building modern websites and web applications fast.
default: yes
when: "{{ use_tailwind != false }}"

use_jest:
type: bool
help: Do you want to include unit tests (via Jest)?
default: yes

use_playwright:
type: bool
help: Do you want to include end to end tests (via Playwright)?
default: yes

use_github_actions:
type: bool
help: Do you want to include Github Actions workflows for build validation?
default: yes

# The following should never get prompted; algokit should always pass these values through by convention

algod_token:
type: str
help: Default Algod Token
default: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

algod_server:
type: str
help: Default Algod server
default: "http://localhost"

algod_port:
type: int
help: Default Algod port
default: 4001

indexer_token:
type: str
help: Default Indexer token
default: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

indexer_server:
type: str
help: Default Indexer server
default: "http://localhost"

indexer_port:
type: int
help: Default Indexer port
default: 8980
_subdirectory: template_content

# questions
# project_name should never get prompted, AlgoKit should always pass it by convention
project_name:
type: str
help: Name for this project.
placeholder: "algorand-app"

author_name:
type: str
help: Package author name
placeholder: "Your Name"

author_email:
type: str
help: Package author email
placeholder: "[email protected]"

ide_vscode:
type: bool
help: Do you want to add VSCode configuration?
default: yes

use_eslint_prettier:
type: bool
help: Do you want to use ESLint and Prettier for code linting and formatting?
default: yes

use_tailwind:
type: bool
help: Do you want to use Tailwind CSS? A utility-first CSS framework for rapidly building custom designs.
default: yes

use_daisy_ui:
type: bool
help: Do you want to use a daisyUI? Framework agnostic CSS component library for building modern websites and web applications fast.
default: yes
when: "{{ use_tailwind != false }}"

use_jest:
type: bool
help: Do you want to include unit tests (via Jest)?
default: yes

use_playwright:
type: bool
help: Do you want to include end to end tests (via Playwright)?
default: yes

use_github_actions:
type: bool
help: Do you want to include Github Actions workflows for build validation?
default: yes

cloud_provider:
type: str
help: Pick your website hosting provider for continuous delivery
when: "{{ use_github_actions != false }}"
choices:
Netlify: "netlify"
Vercel: "vercel"
Skip CD setup: "none"
default: "netlify"

# The following should never get prompted; algokit should always pass these values through by convention

algod_token:
type: str
help: Default Algod Token
default: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

algod_server:
type: str
help: Default Algod server
default: "http://localhost"

algod_port:
type: int
help: Default Algod port
default: 4001

indexer_token:
type: str
help: Default Indexer token
default: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"

indexer_server:
type: str
help: Default Indexer server
default: "http://localhost"

indexer_port:
type: int
help: Default Indexer port
default: 8980
6 changes: 6 additions & 0 deletions template_content/README.md.jinja
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,12 @@ For pull requests and pushes to `main` branch against this repository the follow
- `lint`: Lints the codebase using `ESLint`
- `build`: Builds the codebase using `vite`

### Continuous Deployment

The project template provides base Github Actions workflows for continuous deployment to [Netlify](https://www.netlify.com/) or [Vercel](https://vercel.com/). These workflows are located in the [`.github/workflows`](./.github/workflows) folder.

> Please note: when configuring the github repository for the first time. Depending on selected provider you will need to set the provider secrets in the repository settings. For netlify you can pass the project specific environment variables as part of Github actions secrets, while for vercel you will need to set the secrets on your site instance (refer to the [Vercel documentation](https://vercel.com/docs/cli#commands/secrets) for more details).

{% endif -%}

# Tools
Expand Down
4 changes: 1 addition & 3 deletions template_content/src/contracts/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
# Algorand Application Clients

> Draft documentation, subject to change and improvement.
# How to connect my web app with Algorand smart contracts?

The following folder is reserved for the Algorand Application Clients. The clients are used to interact with instances of Algorand Smart Contracts (ASC1s) deployed on-chain.

Expand Down
5 changes: 4 additions & 1 deletion template_content/src/vite-env.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,11 @@ interface ImportMetaEnv {
readonly VITE_ALGOD_NODE_CONFIG_SERVER: string
readonly VITE_ALGOD_NODE_CONFIG_PORT: string

readonly VITE_INDEXER_TOKEN: string
readonly VITE_INDEXER_SERVER: string
readonly VITE_INDEXER_PORT: string

readonly VITE_ALGOD_NETWORK: string
readonly VITE_CREATOR_ADDRESS: string
}

interface ImportMeta {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@ name: Check code base

on:
workflow_call:
inputs:
run-build:
required: false
type: boolean
default: false
push:
branches:
- main
Expand All @@ -21,7 +26,7 @@ jobs:
node-version: 18

- name: Install dependencies
run: npm install
run: npm ci

- name: Run linters
run: npm run lint
Expand All @@ -30,4 +35,12 @@ jobs:
run: npm run test

- name: Build
if: ${{ inputs.run-build }}
run: npm run build

- name: Archive
if: ${{ inputs.run-build }}
uses: actions/upload-artifact@v3
with:
name: dist
path: dist/
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ name: Pull Request validation

on: [pull_request]



jobs:
pr-check:
name: Perform Checks
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
name: Release

on:
push:
branches:
- main
paths-ignore:
- "docs/**"
- "**.md"
- ".vscode/**"
- ".idea/**"

permissions:
contents: read
packages: read

jobs:
lint-and-build:
name: CI dApp
uses: ./.github/workflows/checks.yaml
{%- if cloud_provider == 'netlify' %}
with:
run-build: true
{% endif %}

deploy:
runs-on: ubuntu-latest
name: Deploy to {% if cloud_provider == 'vercel' %}Vercel{% else %}Netlify{% endif %}
environment: Prod
concurrency: {% raw %}"${{ github.workflow }}-prod"{% endraw %}
needs:
- lint-and-build
steps:
- name: Checkout code
uses: actions/checkout@v2

{%- if cloud_provider == 'vercel' %}
{% raw %}
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
# Set your vercel project env variables on your site instance on https://vercel.com/dashboard
{% endraw %}
{%- else %}
{% raw %}
- name: Download build artifacts
uses: actions/download-artifact@v3
with:
name: dist
path: dist

- name: Install netlify cli
run: npm i netlify-cli

- name: Publish to netlify
run: netlify deploy --prod --dir "dist"
env:
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

# Pass your environment variables here, e.g.,
# VITE_ALGOD_NODE_CONFIG_TOKEN: ${{ secrets.VITE_ALGOD_NODE_CONFIG_TOKEN }}
# VITE_ALGOD_NODE_CONFIG_SERVER: ${{ secrets.VITE_ALGOD_NODE_CONFIG_SERVER }}
# VITE_ALGOD_NODE_CONFIG_PORT: ${{ secrets.VITE_ALGOD_NODE_CONFIG_PORT }}

# VITE_INDEXER_TOKEN: ${{ secrets.VITE_INDEXER_TOKEN }}
# VITE_INDEXER_SERVER: ${{ secrets.VITE_INDEXER_SERVER }}
# VITE_INDEXER_PORT: ${{ secrets.VITE_INDEXER_PORT }}

# VITE_ALGOD_NETWORK: ${{ secrets.VITE_ALGOD_NETWORK }}
{% endraw %}
{%- endif %}
Loading

0 comments on commit 135112a

Please sign in to comment.