Mastermindzh / React Express Fullstack
Programming Languages
Projects that are alternatives of or similar to React Express Fullstack
Node + react full stack
This is a full stack Nodejs + React starter pack which tries to make as few decisions as possible.
It includes:
- Docker
- nginx
- mysql / mssql (default is mysql)
- node
- sphinx
- ExpressJS
- Swagger
- React + Redux
- Babel
- Material design
- Sequelize (ORM)
- Sphinx-doc
First start
Starting this app is easy, simply run yarn docker-dev
(or npm run docker-dev
) and wait for all services to come online.
The following urls will become available:
Url | Service |
---|---|
http://localhost:3000 | The frontend React application |
http://localhost:8888 | The read-the-docs (/Sphinx) documentation |
http://localhost:4000 | The ExpressJS backend |
http://localhost:4000/docs | Swagger documentation for the backend |
See the Available commands chapter for more info.
Table of contents
Available commands
The commands found below can be executed either with yarn command
or with npm run command
.
useful commands
Command | Description |
---|---|
start | runs the services without docker |
docker-dev | runs the services with docker (recommended) |
docker-prod | runs buildservices for the frontend and documentation and after that spins up the production environment. |
docker-rebuild | rebuilds docker containers (f.e after changing the dockerfile) |
docker-fix | takes the containers down (impatient people use ctrl + c and have to take them down before starting them again) |
Commands used by useful command
Command | Description |
---|---|
start-frontend | runs the frontend without docker |
start-backend | runs the backend without docker |
start-docs | runs the documentation without docker |
dev | runs all of the above |
docker-build-prod | runs the build services in docker |
Changing the starter
The chapters below will guide you through changing the starter to fit your own style.
Change to mssql
In order to change to mssql follow the following steps:
- run
npm uninstall --save mysql2
in the backend folder - delete
config.json
in the backend/config folder - rename
config.sqlserver.json
in the backend/config folder toconfig.json
- uncomment the mssql block and comment in (or remove) the mysql block.
- docker/dev/docker-compose.yml
- docker/prod/docker-compose.yml
Create a database (error: login failed for user sa)
You'll most likely get a database error if you launch the starter as is, to resolve this use the following command while running the containers:
docker exec -ti dev_backend_1 /app/node_modules/.bin/sequelize db:create
Then either restart your containers or trigger nodemon in the backend folder
Change database host
Open up backend/config/config.json and edit the database connection info.
Note If your database lives in the same dockernetwork use the docker's name (sql-server in the example) and it's internal port.
Changing database docker
This starter comes with 2 sql-server dockers.
By default the mysql server will be used but all docker-compose files have an entry for mssql. Simply change out the mysql block for the mssql block and rebuild your containers with: yarn docker-rebuild
Remove material design
You can basically put any React project in the frontend folder as long as it includes an npm start script.
The current react project that is in the frontend folder is the react-sane-starter's material branch.
Follow the instructions below to include the non-material branch.
rm -rf frontend
git clone https://github.com/Mastermindzh/react-sane-starter.git frontend
rm -rf frontend/.git
Remove sequelize
To fully remove sequelize execute the following steps in the backend folder:
-
rm -rf migrations models seeders
-
rm config/config.json
-
npm unsinstall --save sequelize
-
Remove the following code from server.js
// sequelize import models from "./models"; models.sequelize .sync() .then(function() { /* eslint-disable no-console */ console.log("database tables synced"); }) .catch(err => { /* eslint-disable no-console */ console.log(err); });
Folder structures
The chapters below list important files / folders in the subfolders
Documentation
documentation/
โโโ make.bat // Windows makefile
โโโ Makefile // Linux / OS X makefile
โโโ package.json // runner
โโโ package-lock.json
โโโ requirements.txt // required packages for sphinx
โโโ source // actual documentation
โโโ conf.py //sphinx settings
โโโ content // text directory
โ โโโ 10-playground
โ โ โโโ banners.rst
โ โ โโโ index.rst
โ โโโ 20-playground-md
โ โโโ index.md
โโโ index.rst // main page
โโโ _static // static files (images, pdfs, etc) directory
โโโ logo.png
Backend
backend/
โโโ config // configuration files
โ โโโ config.json
โ โโโ swagger.json
โโโ data // swaggerize-express data (add your code here)
โ โโโ dashboards
โ โ โโโ {id}.js
โ โโโ dashboards.js
โ โโโ mockgen.js
โโโ handlers // swaggerize-express handlers
โ โโโ dashboards
โ โ โโโ {id}.js
โ โโโ dashboards.js
โโโ migrations // sequelize migrations
โโโ models // sequelize models
โ โโโ dashboard.js
โ โโโ index.js
โโโ package.json
โโโ package-lock.json
โโโ routes // custom express routes
โโโ seeders // seed scripts for sequelize
โโโ server.js // main starting point
โโโ services // services directory (database services etc.)
โ โโโ errorService.js // service to handle errors
โโโ tests // tests directory
โโโ dashboards
โ โโโ {id}.js
โโโ dashboards.js
Docker
docker/
โโโ dev // contains the dev docker-compose file(s)
โ โโโ docker-compose.yml
โโโ images // contains Dockerfiles for images
โ โโโ nginx
โ โ โโโ default.conf
โ โ โโโ Dockerfile
โ โโโ node
โ โ โโโ Dockerfile
โ โโโ node-sphinx
โ โโโ Dockerfile
โโโ prod // contains the production docker-compose file(s)
โโโ build // contains the build services
โ โโโ docker-compose.yml
โ โโโ Dockerfile
โโโ docker-compose.yml
Frontend
frontend/
โโโ docker
โ โโโ dev // Development docker-compose and dockerfile
โ โ โโโ docker-compose.yml
โ โ โโโ Dockerfile
โ โโโ prod // Production docker files
โ โโโ docker-compose.yml
โ โโโ Dockerfile
โ โโโ default.conf // nginx conf for javascript SPA's
โ
โโโ docs // directory for your documentation
โ
โโโ src
โ โโโ actions // actions go here
โ โโโ assets // directory for statis assets
โ โโโ components // dumb components go here
โ โโโ constants // constants can be declared here
โ โโโ containers // smart components go here
โ โโโ reducers // reducers go here
โ โโโ store
โ โโโ styles // scss + css
โ โโโ tests // global test files
โ โโโ utils // utility classes / objects
โ โโโ favicon.ico
โ โโโ index.js
โ โโโ index.ejs
โ โโโ webpack-public-path.js
โ
โโโ tools // webpack tools, build tools, etc.
โ
โโโ .babel.json
โโโ .editorconfig
โโโ .gitignore
โโโ .istanbul.yml // test coverage config
โโโ .jslintrc.json
โโโ LICENSE
โโโ package.json
โโโ README.md
โโโ webpack.config.dev.js
โโโ webpack.config.prod.js