π 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
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 π¬ π π π» π¨ π π π‘ π΅ π π€ π π¦ π π π’ |
---|