Coder Social home page Coder Social logo

whatifif / mongodb-express-redux-mithril-universal-start Goto Github PK

View Code? Open in Web Editor NEW

This project forked from konsumer/mithril-quickstart

12.0 3.0 3.0 376 KB

Author: whatifif: Project template for mithril, with JWT auth, themed bootstrap & easy animations. Blog and User administration are included. Markdown format for Blog. Email verification. See DEMO: https://merm.herokuapp.com/blog

HTML 0.33% JavaScript 99.41% CSS 0.26%

mongodb-express-redux-mithril-universal-start's Introduction

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

Setup for development with browsersync and nodemon

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

mongodb-express-redux-mithril-universal-start's People

Contributors

konsumer avatar whatifif avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.