The Myao Mirror

The Myao Mirror consists of a single-page web applications (SPA) that can be used with a smart mirror and boasts cross-platform compatibility with a component-based UI architecture. It is built upon some of the latest frontend and backend technology suites including ASP.NET Core 2.0, Kestrel, Entity Framework Core 2.0, Babel, Webpack, React, Redux, CSS Modules, React Hot Loader and more.

Features

✓ Component-based front-end development via Webpack, CSS Modules and React (see webpack.config.js)
✓ Modern JavaScript syntax (ES2015+) via Babel; modern CSS syntax (CSS3+) via PostCSS
✓ Application state management via Redux (see client/store.js)
✓ Universal cross-stack routing and navigation via path-to-regexp and history (see client/routes.json)
✓ Code-splitting and async chunk loading with Webpack and ES6 System.import()
✓ Hot Module Replacement (HMR) /w React Hot Loader
✓ Lightweight build automation with plain JavaScript (see run.js)
✓ Cross-device testing with Browsersync

Directory Layout

.
├── /build/                               # The folder for compiled output
├── /client/                              # Client-side app (frontend)
│   ├── /components/                      # Common or shared UI components
│   ├── /utils/                           # Helper classes and optional KendoUI files
│   ├── /views/                           # UI components for web pages (screens)
│   ├── history.js                        # HTML5 History API wrapper used for navigation
│   ├── main.js                           # Entry point that bootstraps the app
│   ├── router.js                         # Lightweight application router
│   ├── routes.json                       # The list of application routes
│   └── store.js                          # Application state manager (Redux)
├── /client.test/                         # Unit and integration tests for the frontend app
├── /docs/                                # Documentation to the project
├── /public/                              # Static files such as favicon.ico etc.
│   ├── robots.txt                        # Instructions for search engine crawlers
│   └── ...                               # etc.
├── /server/                              # Web server and data API (backend)
│   ├── /Controllers/                     # ASP.NET Web API and MVC controllers
│   ├── /Models/                          # Entity Framework and Identity models
│   ├── /Views/                           # Server-side rendered views
│   ├── appsettings.json                  # Server-side application settings
│   ├── DesignTimeDbContextFactory.cs     # PostgreSQL connection string settings
│   ├── Startup.cs                        # Server-side application entry point
│   └── web.config                        # Web server settings for IIS
├── /server.test/                         # Unit and integration tests for the backend app
│── package.json                          # The list of project dependencies and NPM scripts
│── run.js                                # Build automation script (similar to gulpfile.js)
└── webpack.config.js                     # Bundling and optimization settings for Webpack
└── yarn.lock                             # Yarn generated list of project dependencies

Prerequisites

Desktop or laptop computer running macOS, Windows, or Linux
Node.js v6 or newer
.NET Core and .NET Core SDK v2.0 or newer

Getting Started

Step 1. Clone the latest version of the Myao-mirror/mirror-webapp on your local machine by running:

$ git clone -o mirror-webapp -b master --single-branch \
      https://github.com/Myao-mirror/mirror-webapp.git MyApp
$ cd MyApp

Step 2. Install project dependencies listed in project.json and package.json files:

$ npm install                   # Install both Node.js and .NET Core dependencies

Step 3. Finally, launch your web app:

$ node run                      # Compile and lanch the app, same as running: npm start

The app should become available at http://localhost:3000/. See run.js for other available commands such as node run build, node run publish etc. You can also run your app in a release (production) mode by running node run --release, or without Hot Module Replacement (HMR) by running node run --no-hmr.

How to Deploy

Whenever you need to compile your app into a distributable format for deployment, update your appsettings.json and simply run:*

$ node run publish              # Same as running: npm run publish

*must be configured for use outside of Azure App Services

How to Update

If this project is updated and you would like to fetch and merge the latest changes from this repo (upstream) back into your project, you can do so by running:

$ git checkout master
$ git fetch mirror-webapp
$ git merge mirror-webapp/master

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking out our open issues, submitting a new issue, making a feature request, or sending a pull request.

License

This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.

Updated with ♥ by the Myao Team (@Myao-mirror) and our contributors.

ayuspark/mirror-webapp