https://github.com/rexlow/full-stack-react
Full-Stack React App Example
https://github.com/rexlow/full-stack-react
ejs es6 express mongodb react react-router reactjs sass
Last synced: 2 months ago
JSON representation
Full-Stack React App Example
- Host: GitHub
- URL: https://github.com/rexlow/full-stack-react
- Owner: rexlow
- License: mit
- Created: 2017-03-21T15:20:10.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-07T16:30:39.000Z (about 9 years ago)
- Last Synced: 2026-01-03T14:38:21.076Z (5 months ago)
- Topics: ejs, es6, express, mongodb, react, react-router, reactjs, sass
- Language: JavaScript
- Size: 12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: License
Awesome Lists containing this project
README
# Full Stack React App Example
[](https://raw.githubusercontent.com/rexlow/Full-Stack-React/master/License)
You will learn how to create a full stack web app with
> * ReactJS
> * EJS
> * SASS
> * NodeJS
> * Express
> * MongoDB
## To Run
```
npm run dev
npm start
```
First, let's setup with the old way (you can of course go with create-react-app)
## Install dependencies
```
npm i -S react react-dom express mongodb ejs json-loader node-sass-middleware axios
npm i --save-dev webpack
npm i -D babel-cli babel-loader babel-preset-es2015 babel-preset-stage-2 babel-preset-react
npm i -D nodemon
npm i -D eslint eslint-plugin-react babel-eslint
```
## Modify the script object in package.json
```
"scripts": {
"start": "nodemon --exec babel-node server.js --ignore public/",
"dev": "webpack -wd "
},
```
## Add webpack.config.js
```
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
}
]
}
};
```
## Add .babelrc
```
{
"presets": ["react", "es2015", "stage-2"]
}
```
## Add .eslintrc
```
module.exports = {
"parser": 'babel-eslint',
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"node": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [ "react" ],
"rules": {
"indent": ["error", 2],
"linebreak-style": ["error","unix"],
"quotes": ["error","single"],
"semi": ["error","always"],
"no-console": ["warn", { "allow": ["info", "error"] }]
}
};
```