jfrubiom / app-skeleton

Simple JS App Skeleton (React, SemanticUI, Babel, Standard, ES6, Webpack, React-router)

This app skeleton works with Node.js API Skeleton

Simple JS App Skeleton

Here's an app skeleton that binds together common frameworks du-jour:

• Babel
• React Semantic UI
• Webpack
• ES6
• React
• React Router V4
• MobX
• Final Form
• Prettier
• Eslint

Note: The purpose of this skeleton is to provide a simple UI skeleton that can be supplemented with backend/deployment specific tools (Node, Ethereum, Mobile, etc).

Other Features

• Seemless pushState routing using React Router V4
• Full login/signup flow with separate dashboard and homepage router
• All CSS and assets served via Webpack/StyleLoader
• Uses Semantic UI as a rich UI element base
• Uses ES6 style React components
• Code hotswapping
• Static server

Install Dependencies

Run in the project root folder:

npm install

Run

The following command serves all HTML/JS/CSS and watches all changes to src/*.js

npm start

UI is running at http://localhost:3001/ Admin is running at http://localhost:3002/

Directory Structure

• package.json - Configure dependencies
• webpack.config.js - Bundling and build configuration
• serve-static - Static server
• serve - Static server for development
• dist/* - Files generated by webpack, incuding index.html. These are the assets that should be HTTP served
• src/utils - Home of specific JS helper utilities like for example request.js for doing API requests
• src/components - Home of reuseable components
• src/assets - Images, favicons, pdf ...
• src/config - Configurations
• src/App/* - Components that are tightly coupled to the App UI
• src/App/index - Main entrypoint into App UI
• src/Admin/* - Components that are tightly coupled to the Admin UI
• src/Admin/index - Main entrypoint into Admin UI

TODO

• Bundle improvements
• Add Dashboard section
• Add settings section
• Admin UI