mongodb-express-redux-mithril-universal-start

Project

• This project is to provide a new project starter using MongoDB, Expressjs, Reduxjs and Mithriljs.

• This project is also to demonstrate the server-side rendering ( aka universal ) of Single Page Application using mithril.

• Client and Server folder structures are kept as same for easy development and maintenance.

• Each related files contains in each folder for easy maintenance and future expansion.

• Site folder is separately provided for customization and easy upgrade of this project.

• This project is forked from mithril-quickstart by konsumer

Demo

See the demo: https://merm.herokuapp.com/

Features

• MongoDB, Expressjs, Reduxjs, Mithriljs
• Universal ( Server-side rendering )
• Quick & easy to get started
• Mithril is easy to learn and use. Faster to load & render than react. It's clean & small, and does it's job well.
• Express middleware efficiently handles building CSS & javascript, so no grunt/gulp!
• Comment widgets/animations you don't need from bootstrap and animation.less
• Easily themable using bootswatch
• Slick & efficient JWT+bcrypt+mongodb authentication
• User Email verification when registered.
• Userid is used to login instead of email.
• Browser-sync and nodemon are used for live reloading the browser in development.
• Blog and User administration are included.
• Pages are cached automatically by Redux.
• ES5 is used. ( No ES6 and ES7, hence no need of Babel )
• Browserify and LessMiddleware are used for client-side processing.
• Server-side rendering is done by mithril-node-render ( StephanHoyer, mithril-node-render ).
• Markdown format can be used for Blog.

Requirement

• MongoDB is required.
• Change site/config as required for your needs.
• ( site directory has seed data. Change these as you wish.)

Setup for production

• download or
• git clone https://github.com/whatifif/mongodb-express-redux-mithril-universal-start.git
• npm install
• npm start
• go to http://localhost:3000/login
• login using id: 'admin' and password: 'admin'
• change admin id and password

Setup for development with browsersync and nodemon

• download or
• git clone https://github.com/whatifif/mongodb-express-redux-mithril-universal-start.git
• npm install
• npm run dev
• go to http://localhost:3001/login
• login using id: 'admin' and password: 'admin'
• change admin id and password

Test

• Unit test uses Mocha and Expect.

• E2e test uses selenium-standalone server and WebDriverIO.

  ( !! important: WebDriverIO 3.3.0 version should be used. WebDriverIO 4 does not do test correctly.)

• WebDriverIO API is here

• For unit test,

  1. Run the following command. ( There is no need to run the application. )

     npm run testspec

• For e2e test, follow the 3 steps.

  1. Run the selenium-standalone server

     npm run testselenium

  2. Run the application in test mode

     npm run testserver

  3. Run the e2e test

     npm run teste2e

• To run unit test and e2e test together

   `npm test`
  

Configuration

1. Site folder is for the customization and configuration. Change the variables as you wish.

2. Or Use .env to set environment variables. Here are some good ones:

MONGO_URI=mongodb://localhost/myfarkensweetapp
TOKEN_SECRET=kittyonth4keyb04rdME0W!ksjdhfwpeoir
PORT=3000

Choose between browserify or webpack

site/config/environment has config.useWebpack option. Default is using browserify. To use webpack, uncomment this.

If true, webpack is used. You should run npm run build to build using webpack

If false, browserify is used instead. You don't need to run npm run build

To change the bootstrap theme:

Open style/bootstap.less. Change the theme name 'paper' to others.

When the bootstrap style is not applied:

check if the style is not commented out in style/bootstrap.less. If so, remove the comment line of the style you want to use.

TODO