hkp-sell-online v1.0.0

hkp-list-property-online

This project is a starter providing a standard on project structure and guideline.

Table of Contents

• hkp-list-property-online
  • Table of Contents
  • Install
  • Dependencies
  • Structure
  • Standard
    • Components
    • Translation

Install

Please use git bash to run the command if you are using Windows

Prerequisite:

Store NPM_TOKEN in your computer

1. nano ~/.bash_profile
2. add `export NPM_TOKEN=XXXXXXXX`
3. nano ~/.npmrc
4. add `//registry.npmjs.org/:_authToken=${NPM_TOKEN}` to the file
5. Restart your cmd/terminal

Installation:

$ npm install
# create .env in root directory
$ cat >.env << EOL
# local usage
ASSET_PREFIX=

# global usage
NEXT_PUBLIC_API_URL=https://data-uat.hkp.com.hk
NEXT_PUBLIC_APP_APPLE_ITUNES=app-id=565920454
NEXT_PUBLIC_APP_GOOGLE_PLAY=app-id=com.hkp.mrinfo
NEXT_PUBLIC_COOKIE_TOKEN_NAME=uat_token
NEXT_PUBLIC_COOKIE_MAX_AGE=2147483647
NEXT_PUBLIC_COOKIE_DOMAIN=.hkp.com.hk
NEXT_PUBLIC_COOKIE_PATH=/
NEXT_PUBLIC_DOMAIN_PUBLIC=https://uat.hkp.com.hk
NEXT_PUBLIC_DOMAIN_MEMBER=https://member-uat.hkp.com.hk
NEXT_PUBLIC_DOMAIN_AGENT_CHAT_=https://chat-uat.hkp.com.hk
NEXT_PUBLIC_GTM_ID=GTM-52ZZGTH

EOL

Start with Development mode:

$ npm run dev
# http://localhost:3000/project-a/

Build:

$ npm run build
# with bundle analyze
$ ANALYZE=true npm run build
> a bundle map should be displayed in browser

Start with Production mode:

# Make sure you setup the correct value in .env before build
# NODE_ENV in .env should be 'production'
$ npm run start
# http://localhost:3000/project-a/

Dependencies

next.js

react.js

styled-components

Structure

my-app
├── .next <=== build folder
├── assets
│   ├── images
│   └── locale <=== LANGUAGE here
│       ├── en
│       ├── zh-cn
│       └── zh-hk
│
├── components <=== COMPONENT here
│   └── ...components
│
├── contexts
│   ├── app <=== APP CONTEXT
│   └── home <=== PAGE CONTEXT
│
├── pages
│   ├── _app.js
│   ├── _documents.js
│   └── ...page
├── .gitignore
├── .npmrc
├── next.config.js
├── package.json
├── reamd.me
├── route.js
└── server.js

Standard

Translation

• Put translation in ./assets/locale/select-language/relative.json
• usage:

import { TranslationContext } from '@midlandddd/midland-translation'

const yourComponent = () => {
  const { t } = React.useContext(TranslationContext)

  return (
    <div>
    {t('key:of:translation')}
    </div>
  )
}