Code Monkey home page Code Monkey logo

nx-react-code-sharing-starter's Introduction

πŸ› nx-react-code-sharing-starter

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

build CodeFactor lastUpdated

✨ 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

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

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
πŸ’¬ πŸ“ πŸ› πŸ’» 🎨 πŸ“– πŸ“‹ πŸ’‘ πŸ’΅ πŸ” πŸ€” πŸš‡ πŸ“¦ πŸ”Œ πŸ‘€ πŸ“’ ⚠️ πŸ”§ 🌍 βœ… πŸ“Ή

nx-react-code-sharing-starter's People

Contributors

bobeenlee avatar dependabot[bot] avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

inspired-best-practise nodexchange

nx-react-code-sharing-starter's Issues

μ»΄ν¬λ„ŒνŠΈ Visual μš”μ†Œ λ³€ν™”λ₯Ό κ°μ§€ν•˜κΈ° μœ„ν•œ Chromatic 반영

Background

  • 개발 진행함에 μžˆμ–΄ μ’…μ’… 예기치 λͺ»ν•˜κ²Œ μ»΄ν¬λ„ŒνŠΈ μŠ€νƒ€μΌ μœ„μΉ˜ 쑰정이 λ˜κ±°λ‚˜ λ³€ν™”κ°€ μΌμ–΄λ‚˜ μ„œλΉ„μŠ€ μž₯μ• λ‘œ μ΄μ–΄μ§€λŠ” 경우λ₯Ό λ°©μ§€ν•˜κΈ° μœ„ν•¨.

Solution

  • Chromatic을 λ°˜μ˜ν•˜μ—¬ μ»΄ν¬λ„ŒνŠΈ λ³€ν™”λ₯Ό κ°μ§€ν•˜μ—¬ 예치기 λͺ»ν•œ λ³€ν™”λ₯Ό κ°μ§€ν•˜κ³  λŒ€μ‘ν•©λ‹ˆλ‹€.

nx:js μƒμ„±ν•œ 라이브러리 μ ‘κ·Ό 이슈

μΌ€μ΄μŠ€

  • nextjs app은 이슈 μ—†μŒ
  • rn appμ—μ„œ nx:js ( https://nx.dev/js/overview#create-libraries ) 둜 μƒμ„±ν•œ 라이브러리λ₯Ό μž„ν¬νŠΈν•˜λ©΄ μ•„λž˜μ™€ 같은 μ—λŸ¬κ°€ λ°œμƒν•¨.
    ex) import { uniqueId } from '@nx-react-code-sharing/shared-utils'; μž„ν¬νŠΈ μ‹œλ„
error: Error: While trying to resolve module `@nx-react-code-sharing/shared-utils` from file `/Users/bobeenlee/Desktop/git/nx-react-code-sharing/libs/shared/stores/src/lib/use-toast-store.tsx`, the package `/Users/bobeenlee/Desktop/git/nx-react-code-sharing/libs/shared/utils/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/bobeenlee/Desktop/git/nx-react-code-sharing/libs/shared/utils/index`. Indeed, none of these files exist:

  * /Users/bobeenlee/Desktop/git/nx-react-code-sharing/libs/shared/utils/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.svg|.native.svg|.svg)
  * /Users/bobeenlee/Desktop/git/nx-react-code-sharing/libs/shared/utils/index/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.svg|.native.svg|.svg)
    at DependencyGraph.resolveDependency (/Users/bobeenlee/Desktop/git/nx-react-code-sharing/node_modules/react-native/node_modules/metro/src/node-haste/DependencyGraph.js:311:17)
    at Object.resolve (/Users/bobeenlee/Desktop/git/nx-react-code-sharing/node_modules/react-native/node_modules/metro/src/lib/transformHelpers.js:129:24)
    at resolve (/Users/bobeenlee/Desktop/git/nx-react-code-sharing/node_modules/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:33)
    at /Users/bobeenlee/Desktop/git/nx-react-code-sharing/node_modules/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:412:26
    at Array.reduce (<anonymous>)
    at resolveDependencies (/Users/bobeenlee/Desktop/git/nx-react-code-sharing/node_modules/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:411:33)
    at processModule (/Users/bobeenlee/Desktop/git/nx-react-code-sharing/node_modules/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:140:31)
    at async addDependency (/Users/bobeenlee/Desktop/git/nx-react-code-sharing/node_modules/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:230:18)
    at async Promise.all (index 0)
    at async processModule (/Users/bobeenlee/Desktop/git/nx-react-code-sharing/node_modules/react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:198:5)
jest-haste-map: Haste module naming collision: @nx-react-code-sharing/shared-styles
  The following files share their name; please adjust your hasteImpl:
    * <rootDir>/libs/shared/styles/package.json
    * <rootDir>/dist/libs/shared/styles/package.json

ν•΄κ²°λ°©μ•ˆ

metro.config.js blacklistRE: 에 /libs/.*package.json/ λ₯Ό μΆ”κ°€ν•œλ‹€. package.json에 μ˜ν•΄ 잘λͺ» μΈμ‹λ˜λŠ”λ“―ν•¨.

,
      resolver: {
        assetExts: assetExts.filter((ext) => ext !== 'svg'),
        sourceExts: [...sourceExts, 'svg'],
        resolverMainFields: ['sbmodern', 'browser', 'main'],
        blacklistRE: exclusionList([/\.\/dist\/.*/, /libs\/.*package.json/]),
      },
  • μž„μ‹œ λ°©λ²•μœΌλ‘œλŠ” μ•„λž˜μ™€ 같이 rootκΈ°μ€€ μ ˆλŒ€ 경둜둜 μž„ν¬νŠΈν•˜λ©΄ ν•΄λ‹Ή μœ„ μ—λŸ¬λŠ” ν•΄κ²°λ©λ‹ˆλ‹€.
import { uniqueId } from "libs/shared/utils/src/lib/common";

feature μŠ€ν† λ¦¬λΆ μΆ”κ°€

Background

  • feature별 μ»΄ν¬λ„ŒνŠΈλ„ μŠ€ν† λ¦¬λΆμ„ μ‚¬μš©ν•˜μ—¬ κ°œλ°œν•˜κΈ° μœ„ν•¨.

Description

  • bbl-nx μŠ€ν† λ¦¬λΆ μ„€μ •μ²˜λŸΌ feature μ»΄ν¬λ„ŒνŠΈλ„ μŠ€ν† λ¦¬λΆμ— ν¬ν•¨ν•˜μ—¬ λ³΄μ—¬μ€λ‹ˆλ‹€.

atomic design μ»΄ν¬λ„ŒνŠΈ ꡬ성 제거

Background

  • atomic으둜 κ΅¬ν˜„ν•˜μ§€ μ•ŠλŠ” κ²½μš°λ„ μžˆκΈ°μ— μ»΄ν¬λ„ŒνŠΈ 생성에 μ œν•œμ„ μ€„μ΄κ³ μžν•¨.

Description

  • atomic design μ»΄ν¬λ„ŒνŠΈ ꡬ성 μš”μ†Œ 제거

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.