Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/utsavdotpro/starter-ionic-capacitor-tailwind-ts

A starter template for Ionic Capacitor app with TailwindCSS in TypeScript
https://github.com/utsavdotpro/starter-ionic-capacitor-tailwind-ts

android capacitor ionic ios reactjs tailwindcss typescript

Last synced: 2 months ago
JSON representation

A starter template for Ionic Capacitor app with TailwindCSS in TypeScript

Host: GitHub
URL: https://github.com/utsavdotpro/starter-ionic-capacitor-tailwind-ts
Owner: utsavdotpro
Created: 2023-05-12T16:46:26.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-06-28T18:04:54.000Z (7 months ago)
Last Synced: 2024-06-28T19:26:46.406Z (7 months ago)
Topics: android, capacitor, ionic, ios, reactjs, tailwindcss, typescript
Language: TypeScript
Homepage:
Size: 1020 KB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        [](https://githubbox.com/utsavdotpro/starter-ionic-capacitor-tailwind-ts)

# Ionic + Capacitor with Tailwind in TypeScript

A starter template for Ionic + Capacitor with Tailwind in TypeScript with an opinionated [modular project structure](#project-structure).

### Technologies

[![](https://img.shields.io/badge/Ionic-v7-176bff?style=for-the-badge&logo=ionic)](https://ionicframework.com/)

[![](https://img.shields.io/badge/Capacitor-v6-119eff?style=for-the-badge&logo=capacitor)](https://capacitorjs.com/)

[![](https://img.shields.io/badge/React-v18-149eca?style=for-the-badge&logo=react)](https://react.dev/)

[![](https://img.shields.io/badge/Tailwind-v3-38bdf8?style=for-the-badge&logo=tailwindcss)](https://tailwindcss.com)

[![](https://img.shields.io/badge/TypeScript-v5-3178c6?style=for-the-badge&logo=typescript)](https://typescriptlang.org)

[![](https://img.shields.io/badge/Vite-v5-646cff?style=for-the-badge&logo=vite)](https://vitejs.dev/)

---

## How to Reuse Locally?

Use `degit` to download the repository locally.

> **❓ What is [degit](https://github.com/Rich-Harris/degit)?**  

> degit downloads a copy of git repository with downloading its entire git history.

Install degit globally.

```bash

npm install -g degit

```

Download the latest version

```bash

degit utsavdotpro/starter-ionic-capacitor-tailwind-ts

```

---

## Getting started

Prepare development environment

```bash

pnpm install # install node dependencies & sync the assets with native projects

```

### Working with Web

```bash

pnpm start # start the development server

pnpm build # generate the production build

```

### Working with iOS

```bash

pnpm ios # start the project in simulator

pnpm build:ios # generate the production build & open in Xcode

```

### Working with Android

```bash

pnpm android # start the project in emulator

pnpm build:android # generate the production build & open in Android Studio

```

## Project Structure

```

|-- android                   ℹ️ generated android project

|-- ios                       ℹ️ generated ios project

|-- public                    ℹ️ keep your static resource files

|-- src

|   |-- common

|   |   |-- components

|   |   |   |-- elements      ℹ️ keep your state-less components

|   |   |   |                 ℹ️ keep your state-full components

|   |   |-- hoc

|   |   |-- hooks

|   |   |-- layouts

|   |   |-- sections          ℹ️ keep your common sections

|   |-- core

|   |   |-- config            ℹ️ keep your configuration files

|   |   |-- constants

|   |   |-- interfaces

|   |   |-- utils

|   |-- lib

|   |-- pages                 ℹ️ pages & their components

|   |-- theme

```

## How to's

### Update App Logo

> https://github.com/ionic-team/capacitor-assets#usage

- Create following three variants of the logo in the `resources/`

  - icon-foreground.png

  - icon-background.png

  - icon-only.png - actual logo with background

- Run the following command:

  ```bash

  npx @capacitor/assets generate

  ```