Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nwaywood/react-fullstack-template
React template with a NodeJS backend
https://github.com/nwaywood/react-fullstack-template
css-in-js nodejs react-router reactjs
Last synced: 1 day ago
JSON representation
React template with a NodeJS backend
- Host: GitHub
- URL: https://github.com/nwaywood/react-fullstack-template
- Owner: nwaywood
- Created: 2017-08-02T02:07:32.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T16:07:46.000Z (almost 2 years ago)
- Last Synced: 2023-03-16T23:21:32.588Z (over 1 year ago)
- Topics: css-in-js, nodejs, react-router, reactjs
- Language: JavaScript
- Homepage:
- Size: 2.29 MB
- Stars: 18
- Watchers: 3
- Forks: 4
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: history.md
Awesome Lists containing this project
README
# React Fullstack Template
This repository contains a project template for React/NodeJS development
1. [Features](#features)
1. [Getting Started](#getting-started)
1. [Application Structure](#application-structure)
1. [Development](#development)
1. [Deployment](#deployment)
1. [Linting and Formatting](#linting-and-formatting)
1. [History](#history)
## Features
* [react](https://github.com/facebook/react)
* [react-router](https://github.com/ReactTraining/react-router)
* [emotion](https://github.com/tkh44/emotion)
* [flow](https://flow.org/en/)
* [webpack](https://github.com/webpack/webpack)
* [babel](https://github.com/babel/babel)
* [eslint](http://eslint.org)
* [prettier](https://github.com/prettier/prettier)
* [nodemon](http://nodemon.io)
* [koa](https://github.com/koajs/koa)
## Getting Started
Note: node 7.6 or later is required for this template to work since it uses ES6 generators
Setup directory for project:
```bash
git clone [email protected]:nwaywood/react-fullstack-template.git
cd
rm -rf .git
```
From the root directory, install the project dependencies and check that it works:
```bash
npm install # install dependencies
npm run serve # run the server
```
and then from another terminal:
```bash
npm start # compile and launch
```
## Application Structure
```
.
├── app # Frontend application
│ ├── public # Static resources (html, images etc)
│ └── src # Source code, which is bundled into the `dist` folder by `webpack`
│ ├── index.js # The entrypoint for the React application
│ ├── AppErrorBoundary.js # Generic top level Error Boundary for the application
│ ├── globalCSS.js # Any global CSS used in the application (should be kept to a minimum)
│ └── ... # Domain specific components
├── dist # Build directory, which is served by the server as static directory
└── server # Root folder for server code
```
Note: The structure of domain specific components within `/src` follow the `presentational` vs `component` model. Refer to [this](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.469taxbj0) blog post for more information
## Development
```bash
npm start
```
to start the development server. And to communicate with the api:
```bash
npm run serve:watch
```
and the devServer will proxy api calls to the backend koa server... magic!
## Deployment
```bash
npm run build # compile project into /dist folder
```
then you can serve the production app with
```bash
npm run serve
```
By default the production server listens on port `3000`
If you want to run the application on port other than `3000`, simply define it as environment variable:
```bash
PORT=4000 npm run serve
```
### Docker
Build the docker image:
`docker build -t YOUR_IMAGE_NAME .`
Run the container:
`docker run -it -p 3000:3000 --name YOUR_CONTAINER_NAME YOUR_IMAGE_NAME`
## Linting and Formatting
This project uses `prettier` integrated with `eslint` to show formatting errors via `eslint`. To automatically fix
these formatting errors you can run `npm run format`. However, it is recommended to integrate this functionality with
your editor to improve the development workflow.
## History
For an overview of the evolution of this template and key design decisions we have made, see [here](https://github.com/nwaywood/react-fullstack-template/tree/master/history.md)