chauduong1192/web-next

Making a web base on nextjs

Web-next

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

Links

• Link Demo
• Issue project board

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)