A front part of the 'snippod-starter-demo-app' full stack demo application based on React and Redux
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.ebextensions
docs
excute
scripts
semantic
src
static
webpack
.babelrc
.babelrc.i18n
.editorconfig
.env_for_production
.eslintignore
.eslintrc
.gitignore
.travis.yml
LICENSE.md
README.md
SnippodStarterDemoAppFrontArchitecture.png
SnippodStarterDemoApp_Capture_En_160717.png
app.json
karma.conf.js
package.json
semantic.json
server.babel.js
snippod-demo-production-staticfiles.tar.gz
tests.webpack.js

README.md

Snippod-Starter-Demo-App-Front

Overview

Snippod-Starter-Demo-App-Front is a front part of snippod-starter demo application. A Snippod-Starter-Demo-App is a 'Full Stack Single Page Application' for the starter who want to be a web application developer. This repository code is based on React and Redux. You can check out the hosted version DEMO at http://snippod-starter-demo-front.ap-northeast-2.elasticbeanstalk.com.

Alt Stack Diagram

Base Repository, Module

We made this using these technologies.

Getting Started

Preliminaries :

You have to git clone this repository.

git clone https://github.com/shalomeir/snippod-starter-demo-app-front

Installation

npm install
npm run build:semantic

After node packages are installed, automatically build a semantic ui for styling and bundling by webpack. A module bundling by webpack process is a little time consuming task (about 60 sec).

Running Dev Server

Dev local node server interacted with public shared REST API server hosted by Snippod Inc..

npm run dev

Dev local node server interacted with localhost REST API server 'snippod-starter-demo-app-server' which should be run first in your computer.

npm run dev-local

Whatever you execute a development server, first executing time is a little time consuming task. (about 40sec) After then, react-hot-loader and redux-devtools are executed with a development server. So you can easily fix and debug a code. You don't needed to reboot a server for development.

Building and Running Production Server

npm run build
npm run start

Description

Almost main javascript source are located './src' directory. Also customized theme semantic ui source are located './semantic/src/site' directory. All semantic ui code are merged by webpack. At some point, Inline Styles is injected by Radium. What initially gets run by Express is bin/server.js, which does little more than enable ES6 and ES7 awesomeness in the server-side node code. It then initiates server.js. We'd like to apply node server for react server-side rendering, but didn't make perfectly yet. A front side ajax call usually doing in Actions. We use Ducks for handling actionTypes and actions, reducer. Almost front source architecture is based on 'React Redux Universal Hot Example'.

If you want to follow step by step, go to a codelab branch of this repository.

More information is available at this blog post written in Korean.

Demo

A demonstration of this app can be seen here.

Alt App Demo

FAQ (from 'react-redux-universal-hot-example')

Help! It doesn't work on Windows! What do I do?

Fear not. chtefi has figured out what needs to be changed to make it work on Windows 8.

How do I disable the dev tools?

They will only show in development, but if you want to disable them even there, set __DEVTOOLS__ to false in /webpack/dev.config.js.

Reference

Contributing

Contributions, questions and comments are all welcome and encouraged.

License

MIT License.

Copyright 2018 Snippod Inc.