bobeenlee/animation-playground

🏛 nx-react-code-sharing-starter

Next.js + React Native + TypeScript + Storybook starter packed with useful development features.

✨ Features

• ⚡️ Next.js 13
• ⚛️ React 18
• 📱 React Native
• ✨ TypeScript
• 📚 Storybook - Build component driven UIs faster
• 🏗 Nx.dev - Smart, Fast and Extensible Build System
• 🃏 Jest — Configured for unit testing
• 📈 Absolute Import and Path Alias — Import components using @nx-react-code-sharing/ prefix (rename prefix)
• 👀 Default Open Graph — Awesome open graph generated using og
• 📏 ESLint — Find and fix problems in your code, also will auto sort your imports
• 💖 Prettier — Format your code consistently
• 👷 Github Actions — Lint, Test your code on Master Branch, Automatic Storybook Deployment

📂 Directory structure

root
├── apps
├──── nextjs-app       # nextjs app
├──── rn-app           # react native app
├──── standalone-app   # nextjs standalone app
├── libs
├──── sdk              # sdk
├──── features         # all of the code for a feature and putting it in one single place (ex) todo)
├─────── todo
├────────── components
├────────── interfaces
├────────── stores
├──── shared
├─────── apis          # initalize api setup, add api middleware
├─────── hooks         # shared hooks (ex) timer, debounce...)
├─────── libs          # primitive libs ex) logging, storage, analytics
├─────── stores        # shared state management (ex) Toast, Notification... )
├─────── ui-components # shared ui components, styles (ex) Button, Text... )
├─────── utils         # shared utils (ex) string, datetime, object, uri ...)
└── README.md

⚡️ Getting Started

1. Install dependencies

npm i --legacy-peer-deps

2. Run the development server

You can start the nextjs using this command:

npm run dev

3. Change defaults

There are some things you need to change including title, urls, favicons, etc.

Find all texts with nx-react-code-sharing, then change the package name

📚 Convention

Naming Convention

• 파일 이름 네이밍

  • 하이픈 형식 ex) z-index.ts, login-modal.tsx ...

• 컴포넌트명 네이밍

  • ex) const LoginModal = () => { ... }

• 패키지, 폴더명 단수or복수 네이밍

  • 여러파일이 들어갈거같다면 복수명으로 ex) shared/styles, shared/libs ...
  • 고유 기능을 의미한다면 단수 ex) app/email, app/login ...

Commit Convention

• This starter is using conventional commits, it is mandatory to use it to commit changes.

Global Types Definition Setup

• tsconfig.lib.json, tsconfig.app.json files 코드를 아래와 같이 추가합니다.
  • ex) libs/shared/interfaces/tsconfig.libs.json

"files": [
    "../../../types/global.d.ts", <-- depth에 따라 경로 위치는 다를 수 있음
],

Reference

• https://stackoverflow.com/questions/68986789/nx-react-next-js-shared-type-declaration-file

Deployment

Dev Deployment

• Heroku

heroku container:login

npm run nextjs-app:deploy:production

docker tag DOCKER_IMAGE_ID registry.heroku.com/nextjs-app-dev-app/web

docker push registry.heroku.com/nextjs-app-dev-app/web

heroku container:release web --app=nextjs-app-dev-app

Issue

• rnapp 실행시 에러 Flipper-DoubleConversion requires CocoaPods version >= 1.9, which is not satisfied by your current version, 1.8.4
  • gem install cocoapods으로 cocoapods 업데이트 하기 위해선 rvm list -> rvm use 3.0 3.0 버젼으로 맞추고 다시 gem install cocoapods 합니다.

Contributors

BoBeenLee 💬 📝 🐛 💻 🎨 📖 📋 💡 💵 🔍 🤔 🚇 📦 🔌 👀 📢 ⚠️ 🔧 🌍 ✅ 📹