All Projects → marmelab → Javascript Boilerplate

marmelab / Javascript Boilerplate

Node.js+Koa.js+PostgreSQL+React.js+Webpack+Mocha+Makefile, a starter kit for new apps

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Javascript Boilerplate

Koa React Universal
lightweight React-Koa2 universal boilerplate, only what is essential
Stars: ✭ 112 (-55.73%)
Mutual labels:  koa, boilerplate
Koa React Isomorphic
Boilerplate for Koa & React
Stars: ✭ 128 (-49.41%)
Mutual labels:  koa, boilerplate
Postgraphile
GraphQL is a new way of communicating with your server. It eliminates the problems of over- and under-fetching, incorporates strong data types, has built-in introspection, documentation and deprecation capabilities, and is implemented in many programming languages. This all leads to gloriously low-latency user experiences, better developer experiences, and much increased productivity. Because of all this, GraphQL is typically used as a replacement for (or companion to) RESTful API services.
Stars: ✭ 10,967 (+4234.78%)
Mutual labels:  postgresql, koa
Authentication Server
A simple authentication service to deliver JWT with Hasura claims, based on users with multiples roles stored in a Postgres database.
Stars: ✭ 48 (-81.03%)
Mutual labels:  postgresql, boilerplate
Koa Passport Mongoose Graphql
Koa 2 server with Passport + Mongoose + GraphQL
Stars: ✭ 190 (-24.9%)
Mutual labels:  koa, boilerplate
Fullstack Apollo Express Postgresql Boilerplate
💥 A sophisticated GraphQL with Apollo, Express and PostgreSQL boilerplate project.
Stars: ✭ 1,079 (+326.48%)
Mutual labels:  postgresql, boilerplate
Koa Vue Fullstack
A lightweight boilerplate for a universal webapp based on koa, mongodb, node, vue, and webpack
Stars: ✭ 126 (-50.2%)
Mutual labels:  koa, boilerplate
Create Graphql
Command-line utility to build production-ready servers with GraphQL.
Stars: ✭ 441 (+74.31%)
Mutual labels:  koa, boilerplate
Lad
👦 Lad is the best Node.js framework. Made by a former Express TC and Koa team member.
Stars: ✭ 2,112 (+734.78%)
Mutual labels:  koa, boilerplate
Manage Fastapi
🚀 CLI tool for FastAPI. Generating new FastAPI projects & boilerplates made easy.
Stars: ✭ 163 (-35.57%)
Mutual labels:  postgresql, boilerplate
Niklick
Rails Versioned API solution template for hipsters! (Ruby, Ruby on Rails, REST API, GraphQL, Docker, RSpec, Devise, Postgress DB)
Stars: ✭ 39 (-84.58%)
Mutual labels:  postgresql, boilerplate
Express Graphql Boilerplate
Express GraphQL API with JWT Authentication and support for sqlite, mysql, and postgresql
Stars: ✭ 201 (-20.55%)
Mutual labels:  postgresql, boilerplate
Postgrest Starter Kit
Starter Kit and tooling for authoring REST API backends with PostgREST
Stars: ✭ 657 (+159.68%)
Mutual labels:  postgresql, boilerplate
Koa React Notes Web
🤓 A simple SPA built using Koa (2.5.1) as the backend and React (16.4.1) as the frontend. Features MySQL integration, user authentication, CRUD note actions, and more.
Stars: ✭ 61 (-75.89%)
Mutual labels:  koa, boilerplate
React Firebase Starter
Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay
Stars: ✭ 4,366 (+1625.69%)
Mutual labels:  postgresql, boilerplate
Koalerplate
Simple Koa Boilerplate for APIs
Stars: ✭ 118 (-53.36%)
Mutual labels:  koa, boilerplate
Koa Rest Api Boilerplate
💯 Boilerplate for Node.js Koa RESTful API application with Docker, Swagger, Jest, CodeCov and CircleCI
Stars: ✭ 420 (+66.01%)
Mutual labels:  koa, boilerplate
Koa Boiler
Koa 2.7 boilerplate for a production-ready Node.js app with async/await.
Stars: ✭ 426 (+68.38%)
Mutual labels:  koa, boilerplate
Subzero Starter Kit
Starter Kit and tooling for authoring GraphQL/REST API backends with subZero
Stars: ✭ 136 (-46.25%)
Mutual labels:  postgresql, boilerplate
Koa2 Boilerplate
[Deprecated] Minimal koa v2 boilerplate. 🤣
Stars: ✭ 196 (-22.53%)
Mutual labels:  koa, boilerplate
archived Archived Repository
This code is no longer maintained. Feel free to fork it, but use it at your own risks.

marmelab-boilerplate Build Status

A starter kit for new apps, based on:

  • ES6 everywhere (with some bits of ES7, e.g. spread operator on objects)
  • React.js, React Router, and Redux (for the frontend)
  • Admin-on-rest (for the admin)
  • Node.js, Koa.js and PostgreSQL (for the API server)
  • Makefile, webpack and Mocha (for the build and test)

Features:

  • Babel transpilation (es2015, react, stage-0) for both client and server code
  • Node.js API built on top of Koa.js (successor of Express) for cleaner async code
  • Automated CRUD resources based on a PostgreSQL database (using pg and co-postgres-queries)
  • State-of the art robustness and security for the API (JWT, rate limiting, secure headers, based on helmet)
  • Separated API for the admin, with different security settings (and login form)
  • Built-in database migration handling (using db-migrate)
  • Production-level logging (using winston)
  • CORS support (including on IE8, thanks to xDomain)
  • Fully automated start and stop (see Makefile)
  • Auto-reload of Node.js code upon modification (using pm2)
  • Frontend app built with React, redux, redux-saga, react-router, and redux-form
  • Using react-dev-tools and hot reload for easier development
  • SASS preprocessor (using node-sass)
  • Including a non-trivial example with several routes, Ajax calls, and functional tests
  • Fully automated build with webpack, including development (webpack-dev-server) and production target (minified)
  • Admin app built with React.js and admin-on-rest
  • Including a full-featured admin panel with references
  • Unified test build, running unit and functional tests on all apps, powered by mocha and selenium
  • AWS deployment automated by Fabric
  • Sensible eslint defaults, based on Airbnb's rules

The boilerplate contains a sample app with three domains: users, products, and orders. Feel free to remove the corresponding files once you start implementing your own domain.

Install

Requirements:

  • Node.js V5
  • PostgreSQL
  • openjdk-8-jre (to install selenium-standalone)
# install npm dependencies and Selenium (for tests)
make install

Tip: Add alias make='make -s' to your bash profile (bashrc, zshrc) for a better display.

Understand

The project directory structure is as follows:

architecture

bin/ # CLI tasks
build/ # compiled JS and CSS files for the admin and frontend app. The web root in production.
config/ # Project configuration
doc/
e2e/ # Functional tests
src/
  api/ # The server API code (Node.js, Koa.js)
  admin/ # The admin dashboard code (Angular.js, ng-admin)
  frontend/ # The frontend code (React.js, Redux)
  isomorphic/ # Code common to several apps
webpack/ # Webpack configuration (for admin and frontend compilation)

The entire code (api, admin, and frontend) is written in ES6 and transpiled to ES5 by babel.

Tip: In production, the compiled JS and CSS files (under build/) are served by the Node.js server. In development, it's done by webpack-dev-server.

The main entry point for understanding the code is probably src/api/index.js.

Project Configuration

This projects supports various runtime environments. This means that you can switch to an entirely different configuration based on the NODE_ENV environment variable:

# run the API server in development mode (default)
$ node ./src/api/index.js
# run the API server in test mode
$ NODE_ENV=test node ./src/api/index.js
# run the API server in production mode
$ NODE_ENV=production node ./src/api/index.js

Tip: On the production servers, you should set the NODE_ENV variable using supervisor.

It uses node-config to let you configure the project for the development, test, and production environments. node-config supports configuration cascade, so the actual configuration for a given environment is the combination of config/default.js and config/[NODE_ENV].js (the configuration settings for a given environment override the default settings).

Before running the app in development, you must copy the config/development-dist.js into config/development.js (this is done by the make install command), and edit the server and database settings to your development environment. Same for the test-dist.js if you intend to run unit tests.

Note: You need to remove all the demo code before to start your project. A pull request is in progress to do so, but this will take some time to finish it. Meanwhile, take a look on these folders to manually clean the code:

Develop

This project uses pm2 to manage its processes. Configuration files for pm2 can be found in the ./config/pm2_servers/ directory.

# start servers (node and webpack via pm2)
make run-dev
# both servers will run in the background
# the Node server uses nodemon and will restart on code change
# the frontend is served by webpack dev server with hot reload

# you can restart either the api or the frontend by hand
make restart-api
make restart-frontend

Browse the app:

Tip: You can change the API port by running NODE_PORT=3001 make run-dev. Or, for persistent change, you can add this environment variable into the PM2 configuration file.

# stop servers (node and webpack)
make stop-dev

Test

# tests run in the "test" environment and don't empty the "development" database
make test

# alternatively, you can run any of the individual test suites:
make test-api-unit
make test-api-functional
make test-frontend-unit
make test-frontend-functional
make test-isomorphic-unit

API (and common lib) unit tests using:

API functional tests using:

Frontend unit tests using:

Frontend fonctional tests using:

Deployment

See deployment instructions.

Managing servers with PM2

dev and tests servers are managed with PM2. So, It's possible to :

# display the 'front dev' server's logs
make log-frontend-dev
# display the 'api dev' server's logs
make log-api-dev

# display the list of all servers
make servers-list
# display the monitoring for all servers
make servers-monitoring
# stop all servers
make servers-stop-all
# stop all servers, delete them, and clear their logs.
make servers-clear-all
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].