Skip to content

chauduong1192/web-next

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

91 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Web-next

The source code using nextjs, reactjs, redux, es6, ts, express, eslint, typescript, jest..

Links

Folder Structure

Our source is created by CNA, after createing it should look something like:

├── node_modules
    ├── [...]
├── __tests__
├── .github
├── apis
├── components
    ├── Common
    └── Component1
    └── Component2
├── redux
├── server
    ├── routers
    ├── index.js
├── next.config.js
├── package.json
├── pages
    └── index.js
├── public
    └── fonts
    └── icons
    └── images
    └── locales
    └── styles
├── templates
    └── components
    └── redux
└── yarn.lock
├── README.md

Routing in Next.js is based on the file system, so ./pages/index.js maps to the / route and ./pages/about.js would map to /about.

Now we are using the custom server that using Express, so if you want to modify routers just focus on ./server/routes/prettyUrlRouter.ts

The ./public directory maps to /public in the next server, so you can put all your other static resources like images or compiled CSS in there.

Environment Variables

See .env for development defaults.

Variable Notes
NODE_ENV Node environment variables. Default: development
HOST Host of app. Default: localhost
PORT Port of app. Default: 3000
API_URL Url api service. Need to change this if you have other url for api

Prerequisites

  • NodeJS, version >= 10.0.0 . (I use nvm to manage Node versions — brew install nvm.)

I am using yarn to install the package.

  • npm install -g yarn

Install

yarn

Run the app

Running the app with the dev environment

yarn dev

Running the app with the production environment

yarn prod

TROUBLESHOOTING NOTE: If you are having trouble running the app for the first time please delete the node_module and run yarn again.

Running Tests

yarn test

Running Generate Component or Redux template

Generate component

yarn gen type_of_gen type_of_component component_name

type_of_gen: Type of generator as component, redux. type_of_component: Type of component as single, many.

Ex: yarn gen component single ComponentA

Running Linter

yarn lint

Running Bunddle Analyze

yarn analyze

Redux dev tools

Add details of how to access the app from within Chrome

To view the state in the app install the Redux dev tools Chrome plugin.

Question and Issues

(https://github.com/chauduong1192/web-next/issues)