+ 
+ 
+ 
+ 
+
-
- {children}
-
-
-
- 
+* Latest Webpack with **HMR**
+* Babel: `stage-0` and few known plugins.
+* **[Eslint](https://github.com/eslint/eslint)** and Standard.js
+* **[Offline-plugin](https://github.com/NekR/offline-plugin)**
+* **[webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)**
+* **[compression-webpack-plugin](https://github.com/webpack-contrib/compression-webpack-plugin)**
+* **[optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)**
+* **[autodll-webpack-plugin](https://github.com/asfktz/autodll-webpack-plugin)**
+* **[optimize-js-plugin](https://github.com/vigneshshanmugam/optimize-js-plugin)**
+* **[wepback-assets-manifest](https://www.npmjs.com/package/webpack-assets-manifest)**
+* **[circular-dependency-plugin](https://github.com/aackerman/circular-dependency-plugin)**
+* **[extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin)**
+* **[copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin)**
+### Other:
-#### Includes:
+- **[Jest](https://facebook.github.io/jest/)** - testing framework.
+- [And more tools for building and testing...](https://github.com/Metnew/suicrux/blob/master/package.json)
-- **[React](https://facebook.github.io/react/)** and **[Redux](http://redux.js.org/)**
-- **[React-Router v4(!)](https://github.com/ReactTraining/react-router)** + **[React-Router-Redux v5(!)](https://github.com/reactjs/react-router-redux)**
-- **[JSON-server](https://github.com/typicode/json-server)** - mock db.
-- **[Redux-thunk](https://github.com/gaearon/redux-thunk)** and **[Redux-Devtools-Extension](https://github.com/zalmoxisus/redux-devtools-extension)**
-- **[Fetch polyfill](https://github.com/github/fetch)**
-- **[Semantic-ui-react](http://react.semantic-ui.com/)** - UI components.
-- **[Store2](https://github.com/nbubna/store)** - LocalStorage access.
-- **[Webpack 2](https://webpack.js.org)**:
- - babel (stage-0),
- - **HMR**, devServer, hotMiddleware,
- - better code optimization with **[Babel React Optimize](https://github.com/thejameskyle/babel-react-optimize)**,
- - Remove unused css with **[purifycss-webpack](https://github.com/webpack-contrib/purifycss-webpack)**
-- **[Jest](https://facebook.github.io/jest/)** and **[Enzyme](https://github.com/airbnb/enzyme)** - awesome libraries for testing.
-- **[why-did-you-update](https://github.com/garbles/why-did-you-update)** and **[React-Addons-Perf](https://facebook.github.io/react/docs/perf.html)** for better performance optimization.
-- **[Lodash](https://lodash.com/)** - is a dependency of Semantic-ui-react. With tree-shaking unused code never makes it into the final bundle.
-- **[Offline-plugin](https://github.com/NekR/offline-plugin)**, **[webpack-manifest-plugin](https://github.com/danethurber/webpack-manifest-plugin)** and **[preload-webpack-plugin](https://github.com/GoogleChrome/preload-webpack-plugin)** for your next progressive app.
-- [And more tools for building and testing...](https://github.com/Metnew/react-semantic.ui-starter/blob/dev/package.json)
-
-### Usage
-
-#### Install:
-```bash
-git clone https://github.com/Metnew/react-semantic.ui-starter.git
-cd react-semantic.ui-starter && rm -rf .git
-npm install
-```
+## Suicrux FAQ
-#### Run:
+#### Static assets?
-```bash
-npm run dev # run app in dev mode
-npm run db # run mock db for app(from another process)
-```
+`/static` folder + `url-loader`.
+Everything in `/static/public/` is copied to `/dist/client` with _copy-webpack-plugin_.
-#### Build:
+#### Is it possible to change Webpack config?
-```bash
-npm run build # build app
-npm run build:demo # build with process.env.BUILD_DEMO = true
-```
+Of course, config is intuitive! Webpack universality is inspired by Razzle.
-These commands generate the `dist` folder.
+#### SSR?
-#### Test:
+Check `/src/server/ssr/`.
-```bash
-npm run test # run tests with Jest
-```
+#### Code-splitting?
-### FAQ
+**[react-async-component](https://github.com/ctrlplusb/react-async-component)**.
-#### Where are static assets?
-You can store static assets (images, videos) in `/static` folder.
+#### Server-side data-fetching?
-#### Where is manifest.json?
-You can find it in `webpack_config/config.js`
+Using **[react-async-bootstrapper](https://github.com/ctrlplusb/react-async-bootstrapper)** - a wrapper around `react-tree-walker`.
-#### Is SSR available?
-It's under active development inside `/server` folder.
+#### Theming?
-#### How it differs from other starters?
-Performance-first.
-**Main purpose - build highly customizable skeleton for PWA, with SSR, following best practices.**
+Yes, with `styled-components'` `
- {isLoggedIn &&
-
-
-
-
- )
- }
-}
-
-export default Logo
diff --git a/common/components/Root/index.jsx b/common/components/Root/index.jsx
deleted file mode 100644
index f7f15aa9..00000000
--- a/common/components/Root/index.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import {Provider} from 'react-redux'
-import {ConnectedRouter as Router} from 'react-router-redux'
-
-export default class Root extends Component {
- static propTypes = {
- store: PropTypes.object,
- history: PropTypes.object,
- routes: PropTypes.func
- }
-
- /**
- * Checks Auth logic. Is user allowed to visit certain path?
- * @param {String} path next path to visit
- * @return {Bool} is user allowed to visit next location?
- * check RouteAuth component.
- */
- authCheck (path) {
- let {store} = this.props
- let {loggedIn} = store.getState().auth
- let authPath = '/auth'
- let allowedToVisitPath = [authPath]
- if (loggedIn && path === authPath) {
- return false
- } else if (!loggedIn && !allowedToVisitPath.includes(path)) {
- return false
- }
- return true
- }
-
- render () {
- const {store, history, routes} = this.props
- // key={Math.random()} = hack for HMR from https://github.com/webpack/webpack-dev-server/issues/395
- return (
-
-
-
-
- )
- }
-}
diff --git a/common/components/Sidebar/index.jsx b/common/components/Sidebar/index.jsx
deleted file mode 100644
index 6bce1d75..00000000
--- a/common/components/Sidebar/index.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import {Menu, Sidebar} from 'semantic-ui-react'
-import SidebarInnerComponent from './SidebarInnerComponent'
-import _ from 'lodash'
-import './Sidebar.scss'
-
-export default class SidebarComponent extends Component {
- static propTypes = {
- open: PropTypes.bool,
- logout: PropTypes.func,
- routing: PropTypes.array,
- isMobile: PropTypes.bool
- }
-
- shouldComponentUpdate (nextProps) {
- let {open, isMobile, routing} = this.props
- // re-render on isMobile changed
- if (nextProps.isMobile !== isMobile) {
- return true
- }
- if (nextProps.open !== open) {
- return true
- }
- // maybe routing isn't the same
- return !_.isEqual(nextProps.routing, routing)
- }
-
- render () {
- const {open, logout, routing, isMobile} = this.props
-
- let sidebarProps = {
- visible: open || !isMobile,
- as: Menu,
- vertical: true,
- icon: 'labeled',
- animation: 'push',
- width: 'thin'
- }
-
- let sidebarInnerComponentProps = {
- logout,
- routing
- }
-
- return (
-
-
- {isLoggedIn &&
- {/* Semantic ui currently(16.04.16) doesn't have closeDimmerOnClick or smth else
- So, instead of it, we can use simple component */}
- {/* */}
-
-
- {/* show dimmer only if:
- 1. isLoggedIn, elsewhere sidebar isn't visible
- 2. if sidebar is opened */}
- {isLoggedIn && sidebarOpened &&
-
-
- )
- }
-}
-
-function mapStateToProps (state) {
- return {
- sidebarOpened: state.layout.sidebarOpened,
- isMobile: state.layout.isMobile,
- isLoggedIn: state.auth.loggedIn
- }
-}
-
-function mapDispatchToProps (dispatch) {
- let resizer
- return {
- closeSidebar: () => {
- dispatch(CLOSE_SIDEBAR())
- },
- logout: () => {
- dispatch(LOGOUT_AUTH())
- dispatch(push('/auth'))
- },
- toggleSidebar: () => {
- dispatch(OPEN_SIDEBAR())
- },
- /**
- * Immediately push to homePath('/'), if user is logged.
- * Can be used for other auth logic checks.
- * Useful, because we don't need to dispatch `push(homePath)` action
- * from `Login` container after LOGIN_AUTH_SUCCESS action
- * @param {String} path [current location path]
- * @param {Boolean} isLoggedIn [is user logged in?]
- * @return {[type]} [description]
- */
- checkAuthLogic: (path, isLoggedIn) => {
- let authPath = '/auth'
- let homePath = '/'
- if (isLoggedIn && path === authPath) {
- dispatch(push(homePath))
- }
- },
- handleWindowResize: () => {
- clearTimeout(resizer)
- resizer = setTimeout(() => dispatch(WINDOW_RESIZE()), 100)
- }
- }
-}
-
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))
diff --git a/common/containers/Dashboard/components/DashboardCardComponent.jsx b/common/containers/Dashboard/components/DashboardCardComponent.jsx
deleted file mode 100644
index 08778a9e..00000000
--- a/common/containers/Dashboard/components/DashboardCardComponent.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, {PureComponent} from 'react'
-import PropTypes from 'prop-types'
-import {Card, Image} from 'semantic-ui-react'
-
-export default class DashboardCardComponent extends PureComponent {
- static propTypes = {
- title: PropTypes.string,
- body: PropTypes.string,
- userId: PropTypes.number,
- id: PropTypes.number
- }
-
- render () {
- let {title, body, id, userId} = this.props
-
- return (
-
- {statistics.length === 0 && Loading... }
-
-
-
- {statistics &&
-
- {statistics.map((stats, i) => (
- }
-
-
-
-
- )
- }
-}
diff --git a/common/containers/Dashboard/index.jsx b/common/containers/Dashboard/index.jsx
deleted file mode 100644
index d355c816..00000000
--- a/common/containers/Dashboard/index.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, {Component} from 'react'
-import {connect} from 'react-redux'
-import PropTypes from 'prop-types'
-import DashboardComponent from './components'
-import {GET_STATISTICS} from 'actions/dashboard'
-
-class Dashboard extends Component {
- static propTypes = {
- statistics: PropTypes.array,
- getStatistics: PropTypes.func.isRequired
- }
-
- componentDidMount () {
- this.props.getStatistics()
- }
-
- render () {
- let {statistics} = this.props
- let props = {statistics}
-
- return
- {noConversations && Loading... }
-
-
- {!noConversations &&
-
- {conversations.map((obj, i) => {
- return }
-
-
-
- )
- }
-}
diff --git a/common/containers/Inbox/components/InboxItemComponent.jsx b/common/containers/Inbox/components/InboxItemComponent.jsx
deleted file mode 100644
index 8ea962fd..00000000
--- a/common/containers/Inbox/components/InboxItemComponent.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, {PureComponent} from 'react'
-import PropTypes from 'prop-types'
-import {Item, Label, Divider} from 'semantic-ui-react'
-import DateInboxItemComponent from './DateItemComponent'
-
-export default class InboxItemComponent extends PureComponent {
- static propTypes = {
- date: PropTypes.string,
- name: PropTypes.string,
- username: PropTypes.string,
- address: PropTypes.object,
- email: PropTypes.string,
- website: PropTypes.string,
- phone: PropTypes.string,
- item: PropTypes.object
- }
-
- render () {
- let {date, name, username, address, email, website, phone} = this.props
-
- return (
- ${html}
-
-
-
-
- `
-}
-
-app.listen(port, () => {
- console.log(`> App is listening on ${port}.`)
-})
diff --git a/src/client/index.jsx b/src/client/index.jsx
new file mode 100644
index 00000000..314de724
--- /dev/null
+++ b/src/client/index.jsx
@@ -0,0 +1,65 @@
+// @flow
+// Styles
+// If you want full SUI CSS:
+// import 'semantic-ui-css/semantic.css'
+// If you want only some components from SUI:
+import 'semantic-ui-css/components/button.css'
+import 'semantic-ui-css/components/container.css'
+import 'semantic-ui-css/components/dimmer.css'
+import 'semantic-ui-css/components/divider.css'
+import 'semantic-ui-css/components/grid.css'
+import 'semantic-ui-css/components/header.css'
+import 'semantic-ui-css/components/form.css'
+import 'semantic-ui-css/components/icon.css'
+import 'semantic-ui-css/components/image.css'
+import 'semantic-ui-css/components/input.css'
+import 'semantic-ui-css/components/menu.css'
+import 'semantic-ui-css/components/label.css'
+import 'semantic-ui-css/components/list.css'
+import 'semantic-ui-css/components/loader.css'
+import 'semantic-ui-css/components/reset.css'
+import 'semantic-ui-css/components/sidebar.css'
+import 'semantic-ui-css/components/site.css'
+// babel polyfill (ie 10-11) + fetch polyfill
+import 'babel-polyfill'
+import 'isomorphic-fetch'
+// Application
+import React from 'react'
+import {hydrate} from 'react-dom'
+import {AsyncComponentProvider} from 'react-async-component'
+import asyncBootstrapper from 'react-async-bootstrapper'
+import {configureApp, configureRootComponent} from 'common/app'
+import {AppContainer} from 'react-hot-loader'
+
+if (process.env.NODE_ENV === 'production') {
+ require('common/pwa')
+}
+
+const initialState = window.__INITIAL_STATE__ || {}
+const i18n = window.__I18N__ || {}
+const asyncState = window.__ASYNC_STATE__ || {}
+
+const {store, routes, history} = configureApp(initialState)
+const RootComponent = configureRootComponent({
+ store,
+ routes,
+ history,
+ i18n
+})
+
+const app = (
+
+
+
+
+
+
+
+ Suicrux
+
+ Best carefully selected libs β€οΈ
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Suicrux
+
+ Best carefully selected libs β€οΈ
+
+
+
+
+
+
+
+
+
+
+
+ */}
+
+
+
+ {header}
+
+
+ {desc}
+
+
+
+ )
+}
+
+export default LinkItem
diff --git a/src/common/containers/Links/index.jsx b/src/common/containers/Links/index.jsx
new file mode 100644
index 00000000..b25e616e
--- /dev/null
+++ b/src/common/containers/Links/index.jsx
@@ -0,0 +1,71 @@
+/**
+ * @flow
+ */
+import React, {Component} from 'react'
+import {connect} from 'react-redux'
+import Helmet from 'react-helmet'
+import {Loader, Grid, List} from 'semantic-ui-react'
+import {GET_LINKS} from 'actions/links'
+import LinkItem from './components/LinkItem'
+import {getEntitiesLinksState, isLoaded} from 'selectors'
+import _ from 'lodash'
+
+type Props = {
+ links: Object,
+ getLinks: () => void,
+ isLinksLoaded: boolean
+}
+
+class Links extends Component {
+ componentDidMount () {
+ if (!this.props.isLinksLoaded) {
+ this.props.getLinks()
+ }
+ }
+
+ async asyncBootstrap () {
+ if (!this.props.isLinksLoaded) {
+ await this.props.getLinks()
+ }
+ return true
+ }
+
+ render () {
+ const {links, isLinksLoaded} = this.props
+ return (
+
+
+ Thank you Mario!
+
+ But our princess is in another castle.
+
+
+
+ )
+}
+
+export default NotFound
diff --git a/src/common/containers/NotFound/style.jsx b/src/common/containers/NotFound/style.jsx
new file mode 100644
index 00000000..83da7084
--- /dev/null
+++ b/src/common/containers/NotFound/style.jsx
@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+export const NotFoundLayout = styled.div`
+ display: flex;
+ flex-grow: 1;
+ align-items: center;
+`
diff --git a/src/common/pwa/index.js b/src/common/pwa/index.js
new file mode 100644
index 00000000..07efacb6
--- /dev/null
+++ b/src/common/pwa/index.js
@@ -0,0 +1,26 @@
+import runtime from 'offline-plugin/runtime'
+
+runtime.install({
+ // Go offline on installed
+ onInstalled: function () {
+ // openOfflineReady()
+ },
+
+ // do something
+ onUpdating: function () {},
+
+ // When an update is ready, tell ServiceWorker to take control immediately:
+ onUpdateReady () {
+ console.log('update ready')
+ runtime.applyUpdate()
+ },
+
+ // Reload to get the new version:
+ onUpdated () {
+ console.log('updated')
+ },
+
+ onUpdateFailed: () => {
+ console.log('SW Event:', 'onUpdateFailed')
+ }
+})
diff --git a/src/common/reducers/index.js b/src/common/reducers/index.js
new file mode 100644
index 00000000..5c974158
--- /dev/null
+++ b/src/common/reducers/index.js
@@ -0,0 +1,15 @@
+// @flow
+import {combineReducers} from 'redux'
+import {routerReducer} from 'react-router-redux'
+
+import {layout} from './layout'
+import {links} from './links'
+
+// Root reducer
+export default combineReducers({
+ layout,
+ entities: combineReducers({
+ links
+ }),
+ routing: routerReducer
+})
diff --git a/src/common/reducers/layout/index.js b/src/common/reducers/layout/index.js
new file mode 100644
index 00000000..c717f814
--- /dev/null
+++ b/src/common/reducers/layout/index.js
@@ -0,0 +1,45 @@
+// @flow
+import {
+ UI_TOGGLE_SIDEBAR,
+ UI_WINDOW_RESIZE
+} from 'actions/layout'
+import {LOCATION_CHANGE} from 'actions/common'
+import {computeLayoutMobileStatuses} from 'selectors'
+
+export type State = {
+ sidebarOpened: boolean,
+ innerWidth?: number
+}
+
+// NOTE: sidebar is opened by default and rendered as visible on server
+export const initialState: State = {
+ sidebarOpened: true,
+ innerWidth: 993
+}
+
+export function layout (state: State = initialState, action): State {
+ switch (action.type) {
+ case UI_WINDOW_RESIZE: {
+ const {innerWidth} = action.payload
+ const {isMobile} = computeLayoutMobileStatuses({innerWidth})
+
+ return {
+ innerWidth,
+ sidebarOpened: !isMobile
+ }
+ }
+ case UI_TOGGLE_SIDEBAR:
+ return {
+ ...state,
+ sidebarOpened: !state.sidebarOpened
+ }
+ case LOCATION_CHANGE:
+ const {isMobile} = computeLayoutMobileStatuses(state)
+ return {
+ ...state,
+ sidebarOpened: !isMobile
+ }
+ default:
+ return state
+ }
+}
diff --git a/src/common/reducers/layout/index.test.js b/src/common/reducers/layout/index.test.js
new file mode 100644
index 00000000..91d66c87
--- /dev/null
+++ b/src/common/reducers/layout/index.test.js
@@ -0,0 +1,60 @@
+import {layout as reducer, initialState} from 'reducers/layout'
+import {UI_TOGGLE_SIDEBAR, UI_WINDOW_RESIZE} from 'actions/layout'
+import {LOCATION_CHANGE} from 'actions/common'
+
+const toggleSidebar = {
+ type: UI_TOGGLE_SIDEBAR
+}
+
+const locationChange = {
+ type: LOCATION_CHANGE
+}
+
+const windowResize = (innerWidth) => ({type: UI_WINDOW_RESIZE, payload: {innerWidth}})
+
+describe('LAYOUT REDUCER', () => {
+ it('should return the initial state', () => {
+ expect(reducer(undefined, {x: 'string'})).toEqual(initialState)
+ })
+
+ it('should handle UI_TOGGLE_SIDEBAR', () => {
+ expect(
+ reducer({innerWidth: 480, sidebarOpened: false}, toggleSidebar)
+ ).toEqual({
+ innerWidth: 480,
+ sidebarOpened: true
+ })
+ })
+
+ describe('Mobile properties WINDOW_RESIZE', () => {
+ it('should handle WINDOW_RESIZE with 360px screen', () => {
+ expect(reducer(initialState, windowResize(360))).toEqual({
+ sidebarOpened: false,
+ innerWidth: 360
+ })
+ })
+
+ it('should handle WINDOW_RESIZE with 1280px screen', () => {
+ expect(reducer(initialState, windowResize(1280))).toEqual({
+ sidebarOpened: true,
+ innerWidth: 1280
+ })
+ })
+ })
+
+ describe('LOCATION_CHANGE', () => {
+ it('should close sidebar on mobile after LOCATION_CHANGE', () => {
+ expect(reducer({sidebarOpened: true, innerWidth: 360}, locationChange)).toEqual({
+ innerWidth: 360,
+ sidebarOpened: false
+ })
+ })
+
+ it('should NOT close sidebar on desktop after LOCATION_CHANGE', () => {
+ expect(reducer({sidebarOpened: true, innerWidth: 993}, locationChange)).toEqual({
+ innerWidth: 993,
+ sidebarOpened: true
+ })
+ })
+ })
+})
diff --git a/src/common/reducers/links/index.js b/src/common/reducers/links/index.js
new file mode 100644
index 00000000..2f50cb48
--- /dev/null
+++ b/src/common/reducers/links/index.js
@@ -0,0 +1,39 @@
+// @flow
+import {
+ GET_LINKS_FULFILLED,
+ GET_LINKS_PENDING
+} from 'actions/links'
+
+export type State = {
+ entities: any[],
+ errors: Object,
+ fetchStatus: 'none' | 'loaded' | 'loading'
+}
+
+export const initialState: State = {
+ entities: [],
+ errors: {},
+ fetchStatus: 'none'
+}
+
+export function links (state: State = initialState, action): State {
+ switch (action.type) {
+ case GET_LINKS_PENDING: {
+ return {
+ ...state,
+ errors: {},
+ fetchStatus: 'loading'
+ }
+ }
+ case GET_LINKS_FULFILLED: {
+ const entities = action.payload.data
+ return {
+ ...state,
+ entities,
+ fetchStatus: 'loaded'
+ }
+ }
+ default:
+ return state
+ }
+}
diff --git a/src/common/reducers/links/index.test.js b/src/common/reducers/links/index.test.js
new file mode 100644
index 00000000..5a2a2f9b
--- /dev/null
+++ b/src/common/reducers/links/index.test.js
@@ -0,0 +1,38 @@
+import {links as reducer, initialState} from 'reducers/links'
+import {
+ GET_LINKS_FULFILLED,
+ GET_LINKS_PENDING
+} from 'actions/links'
+
+describe('LINKS REDUCER', () => {
+ it('should return the initial state', () => {
+ expect(reducer(undefined, {x: 'string'})).toEqual(initialState)
+ })
+
+ it('should handle GET_LINKS_FULFILLED', () => {
+ const success = {
+ type: GET_LINKS_FULFILLED,
+ payload: {
+ data: [{item: 'payload'}],
+ ok: false,
+ status: 400
+ }
+ }
+ expect(reducer(initialState, success)).toEqual({
+ ...initialState,
+ entities: [{item: 'payload'}],
+ fetchStatus: 'loaded'
+ })
+ })
+
+ it('should handle GET_LINKS_PENDING', () => {
+ const pending = {
+ type: GET_LINKS_PENDING
+ }
+ expect(reducer(initialState, pending)).toEqual({
+ ...initialState,
+ errors: {},
+ fetchStatus: 'loading'
+ })
+ })
+})
diff --git a/src/common/routing/index.jsx b/src/common/routing/index.jsx
new file mode 100644
index 00000000..50ebcf7a
--- /dev/null
+++ b/src/common/routing/index.jsx
@@ -0,0 +1,87 @@
+// @flow
+import React from 'react'
+import {createBrowserHistory, createMemoryHistory} from 'history'
+import {asyncComponent} from 'react-async-component'
+import {Loader, Dimmer, Header, Icon} from 'semantic-ui-react'
+import _ from 'lodash'
+import Dashboard from 'containers/Dashboard'
+import Links from 'containers/Links'
+
+function asyncComponentCreator (url) {
+ return asyncComponent({
+ resolve: () => {
+ if (!process.env.BROWSER) {
+ // flow-disable-next-line
+ return require(`containers/${url}/index.jsx`).default
+ }
+ // flow-disable-next-line: The parameter passed to import() must be a literal string
+ return import(/* webpackChunkName:"[index].[request]" */ `containers/${url}/index.jsx`)
+ },
+ LoadingComponent () {
+ return (
+
+
+ Loading page...
+
+
+ )
+ },
+ ErrorComponent () {
+ return (
+
+
+ Got error while loading page.
+
+
+ )
+ },
+ autoResolveES2015Default: true,
+ env: process.env.BROWSER ? 'browser' : 'node',
+ serverMode: 'resolve'
+ })
+}
+
+function routingFnCreator (useFor) {
+ // const AsyncNotFound = asyncComponentCreator('NotFound')
+ // Dashboard and Links included in build
+ // NotFound(404) is lazy
+ const routes: any[] = [
+ {
+ path: '/',
+ exact: true,
+ component: Dashboard,
+ name: 'Dashboard'
+ },
+ {
+ path: '/links',
+ exact: true,
+ component: Links,
+ name: 'Links'
+ },
+ {
+ component: asyncComponentCreator('NotFound'),
+ name: '404'
+ }
+ ]
+
+ const fns = {
+ // Returns routing for React-Router
+ routing () {
+ return routes.map(a => _.pick(a, ['path', 'strict', 'exact', 'component', 'lazy']))
+ },
+ // Returns `name` + `path`. used in Header
+ meta () {
+ return routes.map(a => _.pick(a, ['path', 'name', 'exact', 'strict']))
+ }
+ }
+
+ return fns[useFor]
+}
+
+const createRequiredHistory = process.env.BROWSER ? createBrowserHistory : createMemoryHistory
+
+export const getMetaRoutes = routingFnCreator('meta')
+export const getRouterRoutes = routingFnCreator('routing')
+export const history = createRequiredHistory()
diff --git a/src/common/selectors/index.js b/src/common/selectors/index.js
new file mode 100644
index 00000000..132d1ec6
--- /dev/null
+++ b/src/common/selectors/index.js
@@ -0,0 +1,17 @@
+// @flow
+import {createSelector} from 'reselect'
+
+export const isLoaded = state => state.fetchStatus === 'loaded'
+export const getLayoutState = state => state.layout
+export const getEntitiesLinksState = state => state.entities.links
+
+export const computeLayoutMobileStatuses = ({innerWidth}) => {
+ const isMobile: boolean = innerWidth < 993
+ const isMobileXS: boolean = innerWidth < 481
+ const isMobileSM: boolean = innerWidth > 480 && innerWidth < 767
+ return {isMobileSM, isMobileXS, isMobile}
+}
+
+export const getLayoutMobileStatuses = createSelector(
+ getLayoutState, computeLayoutMobileStatuses
+)
diff --git a/src/common/styles/global.jsx b/src/common/styles/global.jsx
new file mode 100644
index 00000000..37810f0b
--- /dev/null
+++ b/src/common/styles/global.jsx
@@ -0,0 +1,21 @@
+import {injectGlobal} from 'styled-components'
+
+// NOTE: some styles are duplicated to make SSRed app looks better
+injectGlobal`
+ body {
+ margin: 0;
+ padding: 0;
+ overflow-x: hidden;
+ min-width: 320px;
+ background: white;
+ font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+ font-size: 14px;
+ line-height: 1.4285em;
+ color: rgba(0, 0, 0, 0.87);
+ }
+
+ #app {
+ width: 100%;
+ height: 100%;
+ }
+`
diff --git a/src/common/styles/theme.jsx b/src/common/styles/theme.jsx
new file mode 100644
index 00000000..4f7a40a1
--- /dev/null
+++ b/src/common/styles/theme.jsx
@@ -0,0 +1,5 @@
+export default {
+ white: '#FFF',
+ black: '#000',
+ navy: '#20222c'
+}
diff --git a/src/common/styles/utils.jsx b/src/common/styles/utils.jsx
new file mode 100644
index 00000000..1557f6cb
--- /dev/null
+++ b/src/common/styles/utils.jsx
@@ -0,0 +1,67 @@
+import {css} from 'styled-components'
+import _ from 'lodash'
+
+const pxToEm = px => px / 16 + 'em'
+
+const iWantToUseEm = true
+// NOTE: This grid don't match SUI's grid.
+// NOTE: RSUI has element!
+// You might don't need media template function for styled-components
+const sizes = _.mapValues(
+ {
+ xs: 0, // Extra small screen / phone
+ sm: 480, // Small screen / phone
+ md: 768, // Medium screen / tablet
+ lg: 992, // Large screen / desktop
+ xl: 1200 // Extra large screen / wide desktop
+ },
+ (value, key) => {
+ // NOTE: Please, read more about `em` before switching
+ // https://stackoverflow.com/questions/22228568/switching-to-em-based-media-queries
+ return iWantToUseEm ? pxToEm(value) : value + 'px'
+ }
+)
+
+// NOTE: @Metnew: this block may be rewritten more elegant (like the code below, from off docs)
+export const media = {
+ xs: (...args) => css`
+ @media only screen and (max-width: ${sizes.sm}) {
+ ${css(...args)};
+ }
+ `,
+ sm: (...args) => css`
+ @media only screen and (max-width: ${sizes.md}) {
+ ${css(...args)};
+ }
+ `,
+ smOnly: (...args) => css`
+ @media only screen and (max-width: ${sizes.sm}) and (min-width: ${sizes.xs}) {
+ ${css(...args)};
+ }
+ `,
+ md: (...args) => css`
+ @media only screen and (max-width: ${sizes.lg}) {
+ ${css(...args)};
+ }
+ `,
+ mdOnly: (...args) => css`
+ @media only screen and (max-width: ${sizes.md}) and (min-width: ${sizes.sm}) {
+ ${css(...args)};
+ }
+ `,
+ lg: (...args) => css`
+ @media only screen and (min-width: ${sizes.lg}) {
+ ${css(...args)};
+ }
+ `,
+ lgOnly: (...args) => css`
+ @media only screen and (max-width: ${sizes.xl}) and (min-width: ${sizes.lg}) {
+ ${css(...args)};
+ }
+ `,
+ xl: (...args) => css`
+ @media only screen and (min-width: ${sizes.xl}) {
+ ${css(...args)};
+ }
+ `
+}
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 00000000..d924e0ab
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,26 @@
+import app from './server'
+import http from 'http'
+
+const server = http.createServer(app)
+
+let currentApp = app
+
+server.listen(process.env.PORT, error => {
+ if (error) {
+ console.log(error)
+ }
+
+ console.log('π started')
+})
+
+if (module.hot) {
+ console.log('β
Server-side HMR Enabled!')
+
+ module.hot.accept('./server', () => {
+ console.log('π HMR Reloading `./server`...')
+ server.removeListener('request', currentApp)
+ const newApp = require('./server').default
+ server.on('request', newApp)
+ currentApp = newApp
+ })
+}
diff --git a/src/server/api/index.js b/src/server/api/index.js
new file mode 100644
index 00000000..a9c4b0b6
--- /dev/null
+++ b/src/server/api/index.js
@@ -0,0 +1,7 @@
+import {Router} from 'express'
+import links from './links'
+const router = Router()
+
+router.get('/links', (req, res) => res.send(links))
+
+export default router
diff --git a/src/server/api/links.json b/src/server/api/links.json
new file mode 100644
index 00000000..91d8789d
--- /dev/null
+++ b/src/server/api/links.json
@@ -0,0 +1,26 @@
+[
+ {
+ "link": "https://github.com/Metnew/suicrux#whats-inside",
+ "icon": "settings",
+ "header": "What's inside?",
+ "desc": "Client, Server and Webpack libs and plugins"
+ },
+ {
+ "link": "https://github.com/Metnew/suicrux#semanticui--react--suir",
+ "icon": "paint brush",
+ "header": "Why semantic-ui-react?",
+ "desc": "Notes about SUIR. Why SUIR is a good (or bad) choise."
+ },
+ {
+ "link": "https://github.com/Metnew/suicrux#environment-variables",
+ "icon": "terminal",
+ "header": "ENV vars",
+ "desc": "Docs about ENV variables."
+ },
+ {
+ "link": "https://github.com/Metnew/suicrux#faq",
+ "icon": "question",
+ "header": "FAQ",
+ "desc": "Commonly asked questions."
+ }
+]
diff --git a/src/server/i18n/index.js b/src/server/i18n/index.js
new file mode 100644
index 00000000..cccb341f
--- /dev/null
+++ b/src/server/i18n/index.js
@@ -0,0 +1,25 @@
+// @flow
+import enLocaleData from 'react-intl/locale-data/en'
+import ruLocaleData from 'react-intl/locale-data/ru'
+import ru from 'static/locals/ru'
+import en from 'static/locals/en'
+
+export const defaultLanguage = 'en'
+export const supportedLanguages = ['en', 'ru']
+
+const translations = {
+ en, ru
+}
+
+export default (lang: string = defaultLanguage) => {
+ const localeData = {
+ en: enLocaleData,
+ ru: ruLocaleData
+ }
+ return {
+ lang,
+ localeData: localeData[lang],
+ locale: lang,
+ messages: translations[lang]
+ }
+}
diff --git a/src/server/index.js b/src/server/index.js
new file mode 100644
index 00000000..bce4de0b
--- /dev/null
+++ b/src/server/index.js
@@ -0,0 +1,23 @@
+/**
+ * @flow
+ * @file
+ */
+import 'babel-polyfill'
+import express from 'express'
+import fetch from 'isomorphic-fetch'
+import addMiddlewares from './middlewares'
+import API from './api'
+import SSR from './ssr'
+
+global.fetch = fetch
+
+const app: express$Application = express()
+
+// Add global middlewares
+addMiddlewares(app)
+// Add API
+app.use('/api', API)
+// Add SSR
+app.use(SSR)
+
+export default app
diff --git a/src/server/middlewares/index.js b/src/server/middlewares/index.js
new file mode 100644
index 00000000..41d53587
--- /dev/null
+++ b/src/server/middlewares/index.js
@@ -0,0 +1,36 @@
+/**
+ * @file add global middlewares for app
+ * @flow
+ */
+import express from 'express'
+import helmet from 'helmet'
+import compression from 'compression'
+import cookieParser from 'cookie-parser'
+import bodyParser from 'body-parser'
+import morgan from 'morgan'
+import Raven from 'raven'
+import languageMiddleware from './language'
+
+export default (app: express$Application): express$Application => {
+ Raven.config(process.env.SENTRY_DSN).install()
+ // The request handler must be the first middleware on the app
+ app.use(Raven.requestHandler())
+ // remove x-powered-by
+ app.disable('x-powered-by')
+ // Add express stuff
+ app.use(helmet())
+ app.use(compression())
+ app.use(morgan('dev'))
+ app.use(cookieParser())
+ app.use(
+ express.static(process.env.CLIENT_STATIC_PATH, {
+ index: false
+ })
+ )
+ app.use(bodyParser.json())
+ app.use(languageMiddleware)
+ // The error handler must be before any other error middleware
+ app.use(Raven.errorHandler())
+
+ return app
+}
diff --git a/src/server/middlewares/language.js b/src/server/middlewares/language.js
new file mode 100644
index 00000000..61e77979
--- /dev/null
+++ b/src/server/middlewares/language.js
@@ -0,0 +1,11 @@
+// @flow
+import {supportedLanguages, defaultLanguage} from '../i18n'
+
+export default (req, res, next) => {
+ const language: string =
+ req.acceptsLanguages(supportedLanguages) || defaultLanguage
+ req.user = {
+ language
+ }
+ next()
+}
diff --git a/src/server/ssr/HTMLComponent.jsx b/src/server/ssr/HTMLComponent.jsx
new file mode 100644
index 00000000..6f1e9ffd
--- /dev/null
+++ b/src/server/ssr/HTMLComponent.jsx
@@ -0,0 +1,68 @@
+/// @flow
+import serealize from 'serialize-javascript'
+import _ from 'lodash'
+type args = {
+ // rendered to string application
+ app: string,
+ // Styled components' styles
+ css: string,
+ // react-async-component state
+ asyncState: Object,
+ // react-helmet
+ helmet: Object,
+ // redux preloaded state
+ initialState: Object,
+ // client assets manifest
+ assets: Object,
+ // prop for react-intl
+ i18n: Object
+}
+
+const HTMLComponent = ({css, asyncState, initialState, assets, i18n, app, helmet}: args) => {
+ const stringifiedAsyncState: string = serealize(asyncState)
+ const stringifiedState: string = serealize(initialState)
+ const stringifiedI18N: string = serealize(i18n)
+ const wrapFuncs = {
+ css: ({path}) => ``,
+ js: ({path}) => ``
+ }
+ const assetsOrdered = ['manifest', 'polyfills', 'vendor', 'client']
+ const getTags = assets => funcs => ext => {
+ // sort assets to be injected in right order
+ // const assetsOrdered = ['manifest', 'vendor', 'client']
+ return Object.keys(assets)
+ .filter(bundleName => assets[bundleName][ext])
+ .sort((a, b) => assetsOrdered.indexOf(a) - assetsOrdered.indexOf(b))
+ .map(bundleName => {
+ const path = assets[bundleName][ext]
+ return funcs[ext]({path})
+ })
+ .join('')
+ }
+ const getTagsFromAssets = getTags(_.pick(assets, assetsOrdered))(wrapFuncs)
+ const cssTags = getTagsFromAssets('css')
+ const jsTags = getTagsFromAssets('js')
+
+ return `
+
+ ${helmet.title.toString()}
+ ${helmet.meta.toString()}
+ ${helmet.base.toString()}
+ ${helmet.link.toString()}
+ ${helmet.noscript.toString()}
+
+ ${css}
+ ${cssTags}
+
+
+
+
+
+
+
+ {RootComponent}
+
+ )
+
+ const routes = getRouterRoutes()
+ // if true - > throw 404, if match found -> 200
+ const noRequestURLMatch = !routes.filter(r => !!r.path).find(r => matchPath(req.url, r))
+
+ asyncBootstrapper(app).then(() => {
+ const renderedApp = renderToString(app)
+ const helmet = Helmet.renderStatic()
+ const css: string = sheet.getStyleTags()
+ const preloadedState: Object = store.getState()
+ const responseStatusCode = noRequestURLMatch ? 404 : 200
+ const asyncState = asyncContext.getState()
+ const props = {
+ css,
+ assets,
+ asyncState,
+ initialState: preloadedState,
+ app: renderedApp,
+ i18n,
+ helmet
+ }
+
+ res.status(responseStatusCode).send(HTMLComponent(props))
+ })
+}
diff --git a/src/server/ssr/stats.js b/src/server/ssr/stats.js
new file mode 100644
index 00000000..e92adb18
--- /dev/null
+++ b/src/server/ssr/stats.js
@@ -0,0 +1,66 @@
+// @flow
+import fs from 'fs'
+import chokidar from 'chokidar'
+
+let cache = {}
+// NOTE: Razzle could `require` CLIENT_ASSETS_MANIFEST
+// In SUIcrux it's currently not possible :(
+// Server requires "missing module"
+// Probably, because CLIENT_ASSETS_MANIFEST isn't ready while it's required
+// So, we read file (only on first request) instead of importing it
+async function getFile (path) {
+ // Cache file
+ if (cache[path]) {
+ return cache[path]
+ }
+
+ return new Promise((resolve, reject) => {
+ const watcher = chokidar.watch(path)
+
+ // This `readFile` func is looking like it escaped from procedure programming
+ const readFile = () => {
+ fs.readFile(path, 'utf8', (err, data) => {
+ if (err) {
+ throw err
+ }
+ const json = JSON.parse(data)
+ cache[path] = json
+ watcher.close()
+ resolve(json)
+ })
+ }
+ // does file exist?
+ fs.access(path, fs.constants.R_OK, err => {
+ if (err) {
+ // No. Watch for changes, resolve on `add`.
+ watcher.on('add', readFile)
+ } else {
+ // Yes. resolve!
+ readFile()
+ }
+ })
+ })
+}
+
+export default async function () {
+ // flow-disable-next-line: This type cannot be coerced to string
+ const assets = await getFile(process.env.CLIENT_ASSETS_MANIFEST)
+ // AutoDLL assets aren't included in CLIENT_ASSET_MANIFEST (webpack stats)
+ // So they are hardcoded here
+ const AutoDLLDevOnly =
+ process.env.NODE_ENV === 'development'
+ ? {
+ vendor: {
+ js: 'http://localhost:3000/vendor.js'
+ },
+ polyfills: {
+ js: 'http://localhost:3000/polyfills.js'
+ }
+ }
+ : {}
+
+ return {
+ ...assets,
+ ...AutoDLLDevOnly
+ }
+}
diff --git a/static/images/Logo.png b/static/images/Logo.png
new file mode 100644
index 00000000..bd54354d
Binary files /dev/null and b/static/images/Logo.png differ
diff --git a/static/images/dummy.png b/static/images/dummy.png
deleted file mode 100644
index 11ce432e..00000000
Binary files a/static/images/dummy.png and /dev/null differ
diff --git a/static/images/logo.png b/static/images/logo.png
deleted file mode 100644
index 18d4c9db..00000000
Binary files a/static/images/logo.png and /dev/null differ
diff --git a/static/images/touch/apple-touch-icon.png b/static/images/touch/apple-touch-icon.png
deleted file mode 100644
index b206fe50..00000000
Binary files a/static/images/touch/apple-touch-icon.png and /dev/null differ
diff --git a/static/images/touch/chrome-touch-icon-192x192.png b/static/images/touch/chrome-touch-icon-192x192.png
deleted file mode 100644
index d7f3ae7d..00000000
Binary files a/static/images/touch/chrome-touch-icon-192x192.png and /dev/null differ
diff --git a/static/images/touch/icon-128x128.png b/static/images/touch/icon-128x128.png
deleted file mode 100644
index c61922a0..00000000
Binary files a/static/images/touch/icon-128x128.png and /dev/null differ
diff --git a/static/images/touch/ms-touch-icon-144x144-precomposed.png b/static/images/touch/ms-touch-icon-144x144-precomposed.png
deleted file mode 100644
index 041d1858..00000000
Binary files a/static/images/touch/ms-touch-icon-144x144-precomposed.png and /dev/null differ
diff --git a/static/locals/en.json b/static/locals/en.json
new file mode 100644
index 00000000..93d30504
--- /dev/null
+++ b/static/locals/en.json
@@ -0,0 +1,5 @@
+{
+ "Dashboard.p": "Suicrux - \"easy-to-start\" boilerplate with optimal default config.",
+ "Dashboard.p1": "Only best libs and most essential functionality.",
+ "Dashboard.p2": "Nothing useless is included."
+}
diff --git a/static/locals/ru.json b/static/locals/ru.json
new file mode 100644
index 00000000..1fbbd081
--- /dev/null
+++ b/static/locals/ru.json
@@ -0,0 +1,5 @@
+{
+ "Dashboard.p": "Suicrux - ΡΡΠΎ ΡΡΠ°ΡΡΠ΅Ρ Ρ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π΄Π΅ΡΠΎΠ»ΡΠ½ΠΎΠΉ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠ΅ΠΉ.",
+ "Dashboard.p1": "Π’ΠΎΠ»ΡΠΊΠΎ Π»ΡΡΡΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ \"essential\" ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» Π΄Π»Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°.",
+ "Dashboard.p2": "ΠΠΈΡΠ΅Π³ΠΎ Π±Π΅ΡΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ³ΠΎ."
+}
diff --git a/static/manifest.json b/static/manifest.json
new file mode 100644
index 00000000..704f365c
--- /dev/null
+++ b/static/manifest.json
@@ -0,0 +1,9 @@
+{
+ "name": "Suicrux",
+ "short_name": "Suicrux",
+ "description": "https://github.com/Metnew/suicrux",
+ "start_url": ".",
+ "display": "standalone",
+ "background_color": "#f7f7f7",
+ "theme_color": "#009688"
+}
diff --git a/static/public/favicon.ico b/static/public/favicon.ico
new file mode 100644
index 00000000..46bceb8c
Binary files /dev/null and b/static/public/favicon.ico differ
diff --git a/static/public/robots.txt b/static/public/robots.txt
new file mode 100644
index 00000000..2a23c4c4
--- /dev/null
+++ b/static/public/robots.txt
@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:
\ No newline at end of file
diff --git a/webpack_config/client/webpack.base.js b/webpack_config/client/webpack.base.js
new file mode 100644
index 00000000..8e49466e
--- /dev/null
+++ b/webpack_config/client/webpack.base.js
@@ -0,0 +1,96 @@
+import path from 'path'
+import rimraf from 'rimraf'
+import webpack from 'webpack'
+import config from '../config'
+import isomorphicWebpackConfig from '../webpack.isomorphic'
+import AssetsPlugin from 'assets-webpack-plugin'
+import WebpackAssetsManifest from 'webpack-assets-manifest'
+import CopyWebpackPlugin from 'copy-webpack-plugin'
+
+const {
+ GA_ID,
+ SENTRY_PUBLIC_DSN,
+ CLIENT_STATIC_PATH,
+ srcPath,
+ publicPath,
+ rootPath,
+ isProduction,
+ manifest,
+ distPath
+} = config
+
+rimraf(`${distPath}/client`, {}, () => {})
+
+const definePluginArgs = {
+ 'process.env.GA_ID': JSON.stringify(GA_ID),
+ 'process.env.SENTRY_PUBLIC_DSN': JSON.stringify(SENTRY_PUBLIC_DSN),
+ 'process.env.BROWSER': JSON.stringify(true)
+}
+
+// use hash filename to support long-term caching in production
+// NOTE: [chunkhash] leads to high memory consumption
+const filename = isProduction ? '[name].[hash:6].js' : '[name].js'
+const chunkFilename = isProduction ? '[name].[chunkhash:6].js' : '[name].js'
+const hints = isProduction ? 'warning' : false
+const devtool = isProduction ? 'cheap-source-map' : 'eval'
+const baseBuild = {
+ name: 'client',
+ devtool,
+ entry: {
+ client: path.join(srcPath, './client')
+ },
+ output: {
+ filename,
+ publicPath,
+ path: CLIENT_STATIC_PATH,
+ chunkFilename,
+ crossOriginLoading: 'anonymous'
+ },
+ performance: {
+ hints
+ },
+ resolve: {
+ alias: isomorphicWebpackConfig.resolve.alias,
+ modules: isomorphicWebpackConfig.resolve.modules,
+ extensions: isomorphicWebpackConfig.resolve.extensions.concat(['.css', '.scss', '.sass'])
+ },
+ module: {
+ rules: isomorphicWebpackConfig.module.rules.concat([
+ {
+ test: /\.(ico|eot|otf|webp|ttf|woff|woff2)$/i,
+ use: `file-loader?limit=100000&name=assets/[name].[hash:6].[ext]`
+ },
+ {
+ test: /\.(jpe?g|png|gif|svg)$/,
+ use: [
+ {
+ loader: 'url-loader',
+ options: {
+ limit: 4096,
+ name: 'images/[name].[hash:6].[ext]'
+ }
+ }
+ ]
+ }
+ ])
+ },
+ plugins: isomorphicWebpackConfig.plugins.concat([
+ new webpack.DefinePlugin(definePluginArgs),
+ new AssetsPlugin({
+ filename: 'webpack-assets.json',
+ path: CLIENT_STATIC_PATH
+ }),
+ new WebpackAssetsManifest({
+ assets: manifest
+ }),
+ new CopyWebpackPlugin([
+ {
+ from: `${rootPath}/static/public`,
+ to: './'
+ }
+ ])
+ ]),
+ target: 'web'
+}
+
+export default baseBuild
diff --git a/webpack_config/client/webpack.dev.babel.js b/webpack_config/client/webpack.dev.babel.js
new file mode 100644
index 00000000..4d36b67b
--- /dev/null
+++ b/webpack_config/client/webpack.dev.babel.js
@@ -0,0 +1,96 @@
+import webpack from 'webpack'
+import baseWebpackConfig from './webpack.base'
+import WriteFilePlugin from 'write-file-webpack-plugin'
+import AutoDllPlugin from 'autodll-webpack-plugin'
+import FriendlyErrorsPlugin from 'razzle-dev-utils/FriendlyErrorsPlugin'
+import config from '../config'
+
+const {vendor, polyfills, DEV_SERVER_PORT, HOST, PORT} = config
+const filename = '[name].js'
+const loaders = {
+ style: {loader: 'style-loader'},
+ css: {loader: 'css-loader', options: {sourceMap: true}},
+ resolve: 'resolve-url-loader',
+ postcss: {
+ loader: 'postcss-loader',
+ options: {
+ sourceMap: true
+ }
+ },
+ sass: {loader: 'sass-loader', options: {sourceMap: true}}
+}
+
+baseWebpackConfig.module.rules.push(
+ {
+ test: /\.css$/,
+ loaders: [loaders.style, loaders.css, loaders.postcss, loaders.resolve]
+ },
+ {
+ test: /\.scss$/,
+ loaders: [
+ loaders.style,
+ loaders.css,
+ loaders.postcss,
+ loaders.resolve,
+ loaders.sass
+ ]
+ }
+)
+
+baseWebpackConfig.entry.client = [
+ `webpack-dev-server/client?http://${HOST}:${DEV_SERVER_PORT}/`,
+ 'webpack/hot/only-dev-server',
+ 'react-hot-loader/patch',
+ baseWebpackConfig.entry.client
+]
+
+// add dev plugins
+baseWebpackConfig.plugins.push(
+ new WriteFilePlugin(),
+ new webpack.HotModuleReplacementPlugin(),
+ new AutoDllPlugin({
+ debug: true,
+ filename,
+ entry: {
+ vendor,
+ polyfills
+ }
+ }),
+ new FriendlyErrorsPlugin({
+ verbose: true,
+ target: 'web',
+ onSuccessMessage: `Your application is running at http://${HOST}:${PORT}`
+ })
+)
+
+baseWebpackConfig.devServer = {
+ disableHostCheck: true,
+ clientLogLevel: 'none',
+ // Enable gzip compression of generated files.
+ compress: true,
+ // watchContentBase: true,
+ headers: {
+ 'Access-Control-Allow-Origin': '*'
+ },
+ historyApiFallback: {
+ // Paths with dots should still use the history fallback.
+ // See https://github.com/facebookincubator/create-react-app/issues/387.
+ disableDotRule: true
+ },
+ host: HOST,
+ hot: true,
+ inline: true,
+ // noInfo: true,
+ overlay: true,
+ port: DEV_SERVER_PORT,
+ publicPath: `http://${HOST}:${DEV_SERVER_PORT}/`,
+ // quiet: true,
+ // By default files from `contentBase` will not trigger a page reload.
+ // Reportedly, this avoids CPU overload on some systems.
+ // https://github.com/facebookincubator/create-react-app/issues/293
+ watchOptions: {
+ ignored: /node_modules/
+ }
+}
+
+export default baseWebpackConfig
diff --git a/webpack_config/client/webpack.prod.babel.js b/webpack_config/client/webpack.prod.babel.js
new file mode 100644
index 00000000..d4bb1213
--- /dev/null
+++ b/webpack_config/client/webpack.prod.babel.js
@@ -0,0 +1,115 @@
+import webpack from 'webpack'
+import ExtractTextPlugin from 'extract-text-webpack-plugin'
+import CompressionPlugin from 'compression-webpack-plugin'
+import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin'
+import ProgressPlugin from 'webpack/lib/ProgressPlugin'
+import OfflinePlugin from 'offline-plugin'
+import OptimizeJsPlugin from 'optimize-js-plugin'
+import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer'
+import base from './webpack.base'
+import config from '../config'
+
+// Do you want to use bundle analyzer?
+if (config.ANALYZE_BUNDLE) {
+ base.plugins.push(new BundleAnalyzerPlugin({analyzerMode: 'static'}))
+}
+
+base.stats = {
+ colors: true,
+ // Add children information
+ children: false,
+ // Add chunk information (setting this to `false` allows for a less verbose output)
+ chunks: false,
+ // Add built modules information to chunk information
+ chunkModules: false,
+ chunkOrigins: false,
+ modules: false,
+ reasons: true,
+ errorDetails: true
+}
+
+base.module.rules.push(
+ {
+ test: /\.css$/,
+ use: ExtractTextPlugin.extract({
+ fallback: 'style-loader',
+ use: ['css-loader', 'postcss-loader']
+ })
+ },
+ {
+ test: /\.scss$/,
+ use: ExtractTextPlugin.extract({
+ fallback: 'style-loader',
+ use: ['css-loader', 'postcss-loader', 'sass-loader']
+ })
+ }
+)
+
+// Production plugins
+base.plugins.push(
+ new ProgressPlugin(),
+ new ExtractTextPlugin({
+ filename: '[name].[hash:6].css',
+ allChunks: true
+ }),
+ new OptimizeCssAssetsPlugin({
+ cssProcessorOptions: {
+ safe: true,
+ discardComments: {
+ removeAll: true
+ }
+ }
+ }),
+ new webpack.optimize.ModuleConcatenationPlugin(),
+ new webpack.optimize.UglifyJsPlugin({
+ sourceMap: true,
+ compress: {
+ warnings: false,
+ unused: true,
+ dead_code: true,
+ // This option removes console.log in production
+ drop_console: true
+ },
+ output: {
+ comments: false
+ }
+ }),
+ new OptimizeJsPlugin({
+ sourceMap: true
+ }),
+ // extract vendor chunks
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'vendor',
+ minChunks: module => {
+ // this assumes your vendor imports exist in the node_modules directory
+ return module.context && module.context.indexOf('node_modules') !== -1
+ }
+ }),
+ // manifest chunk, more info in webpack docs
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'manifest'
+ }),
+ new CompressionPlugin({
+ algorithm: 'gzip'
+ }),
+ new OfflinePlugin({
+ caches: {
+ main: [
+ 'vendor.*.js',
+ 'vendor.*.css',
+ 'manifest.*.js',
+ 'client.*.js',
+ 'assets/icons.*.*'
+ ],
+ additional: [':externals:'],
+ optional: [':rest:']
+ },
+ externals: [
+ 'https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin'
+ ],
+ safeToUseOptionalCaches: true,
+ AppCache: false
+ })
+)
+
+export default base
diff --git a/webpack_config/config.js b/webpack_config/config.js
index 87c4c65d..4257a5d7 100644
--- a/webpack_config/config.js
+++ b/webpack_config/config.js
@@ -1,55 +1,77 @@
-'use strict'
-const path = require('path')
+/**
+ * @file for config stuff that's used for webpack configuration, but isn't passed to webpack compiler
+ */
-module.exports = {
- port: 3000,
- title: 'React-Semantic.UI-Starter',
- publicPath: process.env.BUILD_DEMO ? '/react-semantic.ui-starter/' : '/',
- srcPath: path.join(__dirname, './../common'),
- // add these dependencies to a standalone vendor bundle
- vendor: [
- 'react',
- 'react-dom',
- 'react-router',
- 'redux',
- 'react-router-redux',
- 'redux-thunk',
- 'semantic-ui-react',
- 'whatwg-fetch',
- 'semantic-ui-css/semantic.css',
- 'offline-plugin/runtime',
- 'prop-types'
- ],
- // your web app's manifest.json
- manifest: {
- name: 'React-Semantic.UI-Starter',
- short_name: 'RSUIS',
- description: 'https://github.com/Metnew/react-semantic.ui-starter',
- icons: [
- {
- src: 'images/touch/icon-128x128.png',
- sizes: '128x128',
- type: 'image/png'
- },
- {
- src: 'images/touch/apple-touch-icon.png',
- sizes: '152x152',
- type: 'image/png'
- },
- {
- src: 'images/touch/ms-touch-icon-144x144-precomposed.png',
- sizes: '144x144',
- type: 'image/png'
- },
- {
- src: 'images/touch/chrome-touch-icon-192x192.png',
- sizes: '192x192',
- type: 'image/png'
- }
- ],
- start_url: '.',
- display: 'standalone',
- background_color: '#f7f7f7',
- theme_color: '#1b1c1d'
- }
+import path from 'path'
+import manifest from '../static/manifest'
+
+const {
+ NODE_ENV = 'development',
+ SENTRY_PUBLIC_DSN,
+ GA_ID,
+ ANALYZE_BUNDLE,
+ SENTRY_DSN,
+ PORT = 3000,
+ HOST = 'localhost',
+ INSPECT_ENABLED = true
+} = process.env
+
+// compute isProduction based on NODE_ENV
+const isProduction = process.env.NODE_ENV === 'production'
+const DEV_SERVER_PORT = +PORT + 1
+
+// Paths
+const rootPath = path.join(__dirname, '../') // = "/"
+const distPath = path.join(rootPath, './dist') // = "/dist"
+const srcPath = path.join(rootPath, './src') // = "/src"
+const srcCommonPath = path.join(srcPath, './common') // = "/src/common"
+const publicPath = !isProduction ? `http://localhost:${PORT}/` : '/'
+
+// Vars for server only
+const CLIENT_STATIC_PATH = path.join(distPath, './client') // = "/dist/client"
+const CLIENT_ASSETS_MANIFEST = path.join(CLIENT_STATIC_PATH, './webpack-assets.json')
+
+export default {
+ isProduction,
+ // Env vars
+ NODE_ENV,
+ SENTRY_PUBLIC_DSN,
+ ANALYZE_BUNDLE,
+ GA_ID,
+ CLIENT_STATIC_PATH,
+ CLIENT_ASSETS_MANIFEST,
+ SENTRY_DSN,
+ PORT,
+ HOST,
+ INSPECT_ENABLED,
+ // Client's webpack-dev-server port
+ DEV_SERVER_PORT,
+ // Paths
+ srcPath,
+ srcCommonPath,
+ distPath,
+ rootPath,
+ publicPath,
+ // text for WebpackBannerPlugin
+ banner: 'Apache 2 License. Copyright (c) 2018 Vladimir Metnew. Repo: https://github.com/Metnew/suicrux',
+ // your manifest.json
+ manifest,
+ vendor: [
+ 'react',
+ 'react-dom',
+ 'redux',
+ 'history',
+ 'react-router',
+ 'react-router-dom',
+ 'react-router-redux',
+ // 'semantic-ui-react',
+ 'redux-thunk',
+ 'react-helmet',
+ 'lodash',
+ 'js-cookie',
+ 'store2',
+ 'styled-components',
+ 'react-headroom'
+ ],
+ polyfills: ['isomorphic-fetch']
}
diff --git a/webpack_config/devServer.js b/webpack_config/devServer.js
new file mode 100644
index 00000000..3a64858b
--- /dev/null
+++ b/webpack_config/devServer.js
@@ -0,0 +1,48 @@
+/**
+ * @file
+ */
+import webpack from 'webpack'
+import DevServer from 'webpack-dev-server'
+import printErrors from 'razzle-dev-utils/printErrors'
+import config from './config'
+import client from './client/webpack.dev.babel'
+import server from './server/webpack.dev.babel'
+
+const {DEV_SERVER_PORT} = config
+const serverCompiler = compile(server)
+
+// Start our server webpack instance in watch mode.
+serverCompiler.watch(
+ {
+ quiet: false,
+ stats: 'info'
+ },
+ /* eslint-disable no-unused-vars */
+ stats => {}
+)
+
+// Compile our assets with webpack
+const clientCompiler = compile(client)
+
+// Create a new instance of Webpack-dev-server for our client assets.
+// This will actually run on a different port than the users app.
+const clientDevServer = new DevServer(clientCompiler, client.devServer)
+
+// Start Webpack-dev-server
+clientDevServer.listen(DEV_SERVER_PORT, err => {
+ if (err) {
+ console.error(err)
+ }
+})
+
+// Webpack compile in a try-catch
+function compile (config) {
+ let compiler
+ try {
+ compiler = webpack(config)
+ } catch (e) {
+ printErrors('Failed to compile.', [e])
+ process.exit(1)
+ }
+ return compiler
+}
diff --git a/webpack_config/log-plugin.js b/webpack_config/log-plugin.js
deleted file mode 100644
index 4fd1ce32..00000000
--- a/webpack_config/log-plugin.js
+++ /dev/null
@@ -1,17 +0,0 @@
-'use strict'
-const chalk = require('chalk')
-
-// this plugin if for loggin url after each time the compilation is done.
-module.exports = class LogPlugin {
- constructor (port) {
- this.port = port
- }
-
- apply (compiler) {
- compiler.plugin('done', () => {
- console.log(
- `> App is running at ${chalk.yellow(`http://localhost:${this.port}`)}\n`
- )
- })
- }
-}
diff --git a/webpack_config/server.js b/webpack_config/server.js
deleted file mode 100644
index c65e67ca..00000000
--- a/webpack_config/server.js
+++ /dev/null
@@ -1,60 +0,0 @@
-'use strict'
-const path = require('path')
-const express = require('express')
-const webpack = require('webpack')
-const webpackConfig = require('./webpack.dev')
-const config = require('./config')
-const LogPlugin = require('./log-plugin')
-
-const app = express()
-
-const port = config.port
-webpackConfig.entry.client = [
- 'react-hot-loader/patch',
- 'webpack-hot-middleware/client?reload=true',
- 'webpack/hot/only-dev-server',
- webpackConfig.entry.client
-]
-
-webpackConfig.plugins.push(new LogPlugin(port))
-
-let compiler
-
-try {
- compiler = webpack(webpackConfig)
-} catch (err) {
- console.log(err.message)
- process.exit(1)
-}
-
-const devMiddleWare = require('webpack-dev-middleware')(compiler, {
- publicPath: webpackConfig.output.publicPath,
- quiet: false,
- hot: true,
- inline: true,
- headers: {
- 'Access-Control-Allow-Origin': '*',
- 'Access-Control-Allow-Methods': '*',
- 'Access-Control-Allow-Headers': '*'
- }
-})
-app.use(devMiddleWare)
-app.use(
- require('webpack-hot-middleware')(compiler, {
- log: console.log
- })
-)
-
-const mfs = devMiddleWare.fileSystem
-const file = path.join(webpackConfig.output.path, 'index.html')
-
-devMiddleWare.waitUntilValid()
-
-app.get('*', (req, res) => {
- devMiddleWare.waitUntilValid(() => {
- const html = mfs.readFileSync(file)
- res.end(html)
- })
-})
-
-app.listen(port)
diff --git a/webpack_config/server/webpack.base.js b/webpack_config/server/webpack.base.js
new file mode 100644
index 00000000..02fc6999
--- /dev/null
+++ b/webpack_config/server/webpack.base.js
@@ -0,0 +1,85 @@
+import path from 'path'
+import webpack from 'webpack'
+import rimraf from 'rimraf'
+import config from '../config'
+import isomorphicWebpackConfig from '../webpack.isomorphic'
+import nodeExternals from 'webpack-node-externals'
+const {SENTRY_DSN, CLIENT_STATIC_PATH, CLIENT_ASSETS_MANIFEST, isProduction, publicPath} = config
+
+// Clear dist dir before run
+rimraf(`${config.distPath}/server`, {}, () => {})
+
+const definePluginArgs = {
+ 'process.env.BROWSER': JSON.stringify(false),
+ 'process.env.SENTRY_DSN': JSON.stringify(SENTRY_DSN),
+ 'process.env.CLIENT_STATIC_PATH': JSON.stringify(CLIENT_STATIC_PATH),
+ 'process.env.CLIENT_ASSETS_MANIFEST': JSON.stringify(CLIENT_ASSETS_MANIFEST)
+}
+
+const devtool = isProduction ? 'cheap-source-map' : 'eval'
+const chunkFilename = isProduction ? '[name].[chunkhash:6].js' : '[name].js'
+
+const baseWebpackConfig = {
+ name: 'server',
+ entry: config.srcPath,
+ devtool,
+ target: 'node',
+ output: {
+ path: path.join(config.distPath, './server'),
+ filename: 'index.js',
+ chunkFilename,
+ publicPath
+ },
+ externals: [
+ nodeExternals({
+ whitelist: [
+ !isProduction ? 'webpack/hot/poll?300' : null,
+ /\.(eot|woff|woff2|ttf|otf)$/,
+ /\.(svg|png|jpg|jpeg|gif|ico)$/,
+ /\.(mp4|mp3|ogg|swf|webp)$/,
+ /\.(css|scss|sass|sss|less)$/
+ ].filter(x => x)
+ })
+ ],
+ performance: {
+ hints: false
+ },
+ resolve: {
+ extensions: isomorphicWebpackConfig.resolve.extensions,
+ modules: isomorphicWebpackConfig.resolve.modules,
+ alias: isomorphicWebpackConfig.resolve.alias
+ },
+ module: {
+ rules: isomorphicWebpackConfig.module.rules.concat(
+ {
+ test: /\.(jpe?g|png|gif|svg)$/,
+ use: [
+ {
+ loader: 'url-loader',
+ options: {
+ limit: 4096,
+ name: 'images/[name].[hash:6].[ext]',
+ emitFile: false
+ }
+ }
+ ]
+ }
+ )
+ },
+ plugins: isomorphicWebpackConfig.plugins.concat([
+ new webpack.DefinePlugin(definePluginArgs),
+ new webpack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1
+ }),
+ // ignore styles, because server hasn't got style-loader
+ new webpack.NormalModuleReplacementPlugin(/\.(css|sass|less|scss|sss)$/, 'node-noop')
+ ]),
+ node: {
+ __dirname: true,
+ __filename: true,
+ console: true,
+ global: true
+ }
+}
+
+export default baseWebpackConfig
diff --git a/webpack_config/server/webpack.dev.babel.js b/webpack_config/server/webpack.dev.babel.js
new file mode 100644
index 00000000..b4e02d2d
--- /dev/null
+++ b/webpack_config/server/webpack.dev.babel.js
@@ -0,0 +1,23 @@
+import baseWebpackConfig from './webpack.base'
+import StartServerPlugin from 'start-server-webpack-plugin'
+import webpack from 'webpack'
+import config from '../config'
+
+const {CLIENT_ASSETS_MANIFEST, INSPECT_ENABLED} = config
+const inspectEnabled = INSPECT_ENABLED ? ['--inspect'] : []
+const nodeArgs = ['-r', 'source-map-support/register', ...inspectEnabled]
+const plugins = [
+ new webpack.HotModuleReplacementPlugin(),
+ new StartServerPlugin({
+ name: 'index.js',
+ nodeArgs
+ }),
+ // Ignore assets.json to avoid infinite recompile bug
+ new webpack.WatchIgnorePlugin([CLIENT_ASSETS_MANIFEST])
+]
+
+export default Object.assign({}, baseWebpackConfig, {
+ entry: [baseWebpackConfig.entry, 'webpack/hot/poll?300'],
+ watch: true,
+ plugins: baseWebpackConfig.plugins.concat(plugins)
+})
diff --git a/webpack_config/server/webpack.prod.babel.js b/webpack_config/server/webpack.prod.babel.js
new file mode 100644
index 00000000..95a062e4
--- /dev/null
+++ b/webpack_config/server/webpack.prod.babel.js
@@ -0,0 +1,32 @@
+import webpack from 'webpack'
+import config from '../config'
+import baseWebpackConfig from './webpack.base'
+import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer'
+import OptimizeJsPlugin from 'optimize-js-plugin'
+
+if (config.ANALYZE_BUNDLE) {
+ baseWebpackConfig.plugins.push(new BundleAnalyzerPlugin({analyzerMode: 'static'}))
+}
+
+baseWebpackConfig.plugins.push(
+ new webpack.ProgressPlugin(),
+ new webpack.optimize.ModuleConcatenationPlugin(),
+ new webpack.optimize.UglifyJsPlugin({
+ sourceMap: true,
+ compress: {
+ warnings: false,
+ unused: true,
+ dead_code: true,
+ // This option removes console.log in production
+ drop_console: true
+ },
+ output: {
+ comments: false
+ }
+ }),
+ new OptimizeJsPlugin({
+ sourceMap: true
+ })
+)
+
+export default baseWebpackConfig
diff --git a/webpack_config/utils.js b/webpack_config/utils.js
deleted file mode 100644
index 199e5fa2..00000000
--- a/webpack_config/utils.js
+++ /dev/null
@@ -1,13 +0,0 @@
-'use strict'
-const path = require('path')
-const _ = (module.exports = {})
-
-_.cwd = file => {
- return path.join(process.cwd(), file || '')
-}
-
-_.outputPath = path.join(__dirname, '../dist')
-
-_.outputIndexPath = path.join(__dirname, '../dist/index.html')
-
-_.target = 'web'
diff --git a/webpack_config/webpack.base.js b/webpack_config/webpack.base.js
deleted file mode 100644
index 5d2b81c5..00000000
--- a/webpack_config/webpack.base.js
+++ /dev/null
@@ -1,98 +0,0 @@
-'use strict'
-const path = require('path')
-const webpack = require('webpack')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const config = require('./config')
-const _ = require('./utils')
-
-module.exports = {
- entry: {
- client: './common/index.jsx'
- },
- output: {
- path: _.outputPath,
- filename: '[name].js',
- publicPath: config.publicPath
- },
- performance: {
- hints: process.env.NODE_ENV === 'production' ? 'warning' : false
- },
- resolve: {
- extensions: ['.js', '.jsx', '.css', '.json', '.scss'],
- alias: {
- actions: `${config.srcPath}/actions/`,
- api: `${config.srcPath}/api/`,
- reducers: `${config.srcPath}/reducers/`,
- components: `${config.srcPath}/components/`,
- containers: `${config.srcPath}/containers/`,
- routing: `${config.srcPath}/routing/`,
- styles: `${config.srcPath}/styles/`,
- scss_vars: `${config.srcPath}/styles/vars.scss`,
- config: `${config.srcPath}/config/` + process.env.REACT_WEBPACK_ENV
- },
- modules: [
- // places where to search for required modules
- _.cwd('common'),
- _.cwd('node_modules')
- ]
- },
- module: {
- rules: [
- {
- test: /\.(js|jsx)$/,
- enforce: 'pre',
- use: [
- {
- loader: 'eslint-loader',
- options: {
- fix: true
- }
- }
- ],
- exclude: [/node_modules/]
- },
- {
- test: /\.(js|jsx)$/,
- use: 'babel-loader',
- exclude: [/node_modules/]
- },
- {
- test: /\.(ico|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
- use: 'file-loader?limit=100000'
- },
- {
- test: /\.(jpe?g|png|gif|svg)$/i,
- use: [
- 'file-loader?limit=100000',
- {
- loader: 'img-loader',
- options: {
- enabled: true,
- optipng: true
- }
- }
- ]
- }
- ]
- },
- plugins: [
- // add index.html
- new HtmlWebpackPlugin({
- title: config.title,
- template: path.resolve(__dirname, '../common/index.html'),
- filename: _.outputIndexPath
- }),
- new webpack.DefinePlugin({
- 'process.env.BUILD_DEMO': JSON.stringify(!!process.env.BUILD_DEMO)
- }),
- new CopyWebpackPlugin([
- {
- from: _.cwd('./static'),
- // to the root of the dist path
- to: './'
- }
- ])
- ],
- target: _.target
-}
diff --git a/webpack_config/webpack.dev.js b/webpack_config/webpack.dev.js
deleted file mode 100644
index c7d6d9c7..00000000
--- a/webpack_config/webpack.dev.js
+++ /dev/null
@@ -1,31 +0,0 @@
-'use strict'
-process.env.NODE_ENV = 'development'
-process.env.REACT_WEBPACK_ENV = 'dev'
-
-const webpack = require('webpack')
-const base = require('./webpack.base')
-const FriendlyErrors = require('friendly-errors-webpack-plugin')
-
-base.devtool = 'eval-source-map'
-base.module.rules.push(
- {
- test: /\.css$/,
- loaders: ['style-loader', 'css-loader', 'resolve-url-loader']
- },
- {
- test: /\.scss$/,
- loaders: ['style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader']
- }
-)
-
-// add dev plugins
-base.plugins.push(
- new webpack.HotModuleReplacementPlugin(),
- new webpack.DefinePlugin({
- 'process.env.NODE_ENV': JSON.stringify('development')
- }),
- new webpack.NoEmitOnErrorsPlugin(),
- new FriendlyErrors()
-)
-
-module.exports = base
diff --git a/webpack_config/webpack.isomorphic.js b/webpack_config/webpack.isomorphic.js
new file mode 100644
index 00000000..5b909954
--- /dev/null
+++ b/webpack_config/webpack.isomorphic.js
@@ -0,0 +1,64 @@
+/**
+ * @file
+ */
+import path from 'path'
+import webpack from 'webpack'
+import CircularDependencyPlugin from 'circular-dependency-plugin'
+import config from './config'
+
+const {srcPath, rootPath, srcCommonPath, PORT, NODE_ENV, HOST} = config
+const definePluginArgs = {
+ 'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
+ 'process.env.PORT': JSON.stringify(PORT),
+ 'process.env.HOST': JSON.stringify(HOST)
+}
+
+export default {
+ resolve: {
+ alias: {
+ actions: `${srcCommonPath}/actions/`,
+ api: `${srcCommonPath}/api/`,
+ components: `${srcCommonPath}/components/`,
+ containers: `${srcCommonPath}/containers/`,
+ reducers: `${srcCommonPath}/reducers/`,
+ routing: `${srcCommonPath}/routing/`,
+ styles: `${srcCommonPath}/styles/`,
+ selectors: `${srcCommonPath}/selectors`,
+ static: `${rootPath}/static`
+ },
+ extensions: ['.js', '.json', '.jsx'],
+ modules: [srcPath, path.join(rootPath, 'node_modules')]
+ },
+ module: {
+ rules: [
+ {
+ test: /\.(js|jsx)$/,
+ enforce: 'pre',
+ use: [
+ {
+ loader: 'eslint-loader',
+ options: {
+ fix: true
+ }
+ }
+ ],
+ exclude: [/node_modules/]
+ },
+ {
+ test: /\.(js|jsx)$/,
+ use: 'babel-loader',
+ exclude: [/node_modules/]
+ }
+ ]
+ },
+ plugins: [
+ new webpack.NamedModulesPlugin(),
+ new webpack.BannerPlugin({
+ banner: config.banner
+ }),
+ new CircularDependencyPlugin({
+ exclude: /node_modules/
+ }),
+ new webpack.DefinePlugin(definePluginArgs)
+ ]
+}
diff --git a/webpack_config/webpack.prod.js b/webpack_config/webpack.prod.js
deleted file mode 100644
index 6226cae1..00000000
--- a/webpack_config/webpack.prod.js
+++ /dev/null
@@ -1,109 +0,0 @@
-'use strict'
-process.env.NODE_ENV = 'production'
-process.env.REACT_WEBPACK_ENV = 'dist'
-
-const exec = require('child_process').execSync
-const path = require('path')
-const glob = require('glob')
-const webpack = require('webpack')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const PurifyCSSPlugin = require('purifycss-webpack')
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-const ProgressPlugin = require('webpack/lib/ProgressPlugin')
-const ManifestPlugin = require('webpack-manifest-plugin')
-const OfflinePlugin = require('offline-plugin')
-const PreloadWebpackPlugin = require('preload-webpack-plugin')
-const base = require('./webpack.base')
-const config = require('./config')
-
-exec('rm -rf dist/')
-base.devtool = 'cheap-source-map'
-base.module.rules.push(
- {
- test: /\.css$/,
- use: ExtractTextPlugin.extract({
- fallback: 'style-loader',
- use: 'css-loader'
- })
- },
- {
- test: /\.scss$/,
- use: ExtractTextPlugin.extract({
- fallback: 'style-loader',
- use: ['css-loader', 'sass-loader']
- })
- }
-)
-
-// a white list to add dependencies to vendor chunk
-base.entry.vendor = config.vendor
-// use hash filename to support long-term caching
-base.output.filename = '[name].[chunkhash:8].js'
-
-// add webpack plugins
-base.plugins.push(
- new ProgressPlugin(),
- new ExtractTextPlugin('[name].[chunkhash:8].css'),
- new webpack.DefinePlugin({
- 'process.env.NODE_ENV': JSON.stringify('production')
- }),
- // remove unused css
- new PurifyCSSPlugin({
- // Give paths to parse for rules. These should be absolute!
- moduleExtensions: ['.jsx', '.html', '.js'],
- paths: glob.sync(
- path.join(__dirname, 'common/*.jsx'),
- path.join(__dirname, 'common/components/**/*.jsx'),
- path.join(__dirname, 'common/containers/**/*.jsx'),
- path.join(__dirname, 'common/containers/**/*.jsx'),
- path.join(__dirname, 'node_modules/semantic-ui-react/dist/**/*.js')
- )
- }),
- new OptimizeCssAssetsPlugin(),
- new webpack.optimize.UglifyJsPlugin({
- sourceMap: true,
- compress: {
- warnings: false
- },
- output: {
- comments: false
- }
- }),
- // extract vendor chunks
- new webpack.optimize.CommonsChunkPlugin({
- name: 'vendor',
- filename: 'vendor.[chunkhash:8].js'
- }),
- new PreloadWebpackPlugin({rel: 'preload', as: 'script', include: 'all'}),
- // For progressive web apps
- // create manifest
- new ManifestPlugin({fileName: 'manifest.json', cache: config.manifest}),
- // AppCache + ServiceWorkers
- new OfflinePlugin({
- safeToUseOptionalCaches: true,
- caches: {
- main: ['vendor.*.css', 'vendor.*.js'],
- additional: [':externals:'],
- optional: [':rest:']
- },
- excludes: ['.htaccess'],
- AppCache: false,
- ServiceWorker: {
- navigateFallbackURL: '/',
- events: true
- }
- })
-)
-// minimize webpack output
-base.stats = {
- // Add children information
- children: false,
- // Add chunk information (setting this to `false` allows for a less verbose output)
- chunks: false,
- // Add built modules information to chunk information
- chunkModules: false,
- chunkOrigins: false,
- modules: false
-}
-
-module.exports = base
+
+ {children}
+
+
+
+
+
+
+ )
+ }
+}
+
+const mapStateToProps = state => {
+ const {sidebarOpened} = getLayoutState(state)
+ const {isMobile} = getLayoutMobileStatuses(state)
+
+ return {
+ sidebarOpened,
+ isMobile
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ let resizer
+ return {
+ toggleSidebar () {
+ dispatch(TOGGLE_SIDEBAR)
+ },
+ handleWindowResize () {
+ clearTimeout(resizer)
+ const innerWidth: number = window.innerWidth
+ resizer = setTimeout(() => dispatch(WINDOW_RESIZE(innerWidth)), 85)
+ }
+ }
+}
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App))
diff --git a/src/common/containers/App/style.jsx b/src/common/containers/App/style.jsx
new file mode 100644
index 00000000..75abfee7
--- /dev/null
+++ b/src/common/containers/App/style.jsx
@@ -0,0 +1,55 @@
+import styled, {css} from 'styled-components'
+import {Sidebar} from 'semantic-ui-react'
+
+export const SidebarSemanticPushable = Sidebar.Pushable
+export const SidebarSemanticPusherStyled = styled(Sidebar.Pusher)`
+ height: 100%;
+ -webkit-overflow-scrolling: touch;
+ ${({sidebar_opened: sidebarOpened}) => {
+ // `sidebar_opened` attr instead of `media` util -> SSRed app looks better
+ return sidebarOpened && css`max-width: calc(100% - 150px);`
+ }};
+`
+
+export const PageLayout = styled.div`
+ height: 100%;
+
+ .pushable {
+ display: initial;
+ height: 100%;
+ overflow-x: hidden;
+ padding: 0;
+ transform: translate3d(0, 0, 0);
+ > ${SidebarSemanticPusherStyled} {
+ overflow: visible !important;
+ }
+ }
+
+ .main-layout {
+ min-height: calc(100% - 72px);
+ display: flex;
+ flex-direction: column;
+ color: ${props => props.theme.black};
+ background-color: ${props => props.theme.white};
+
+ > .main-content {
+ flex-grow: 1;
+ min-height: calc(100% - 72px);
+ display: flex;
+ flex-direction: column;
+
+ > .main-container {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ margin-top: 2em;
+ margin-bottom: 1em;
+ flex-direction: column;
+ display: flex !important;
+ flex-grow: 1;
+ & > *:last-child {
+ flex-grow: 1;
+ }
+ }
+ }
+ }
+`
diff --git a/src/common/containers/Dashboard/index.jsx b/src/common/containers/Dashboard/index.jsx
new file mode 100644
index 00000000..6c836b55
--- /dev/null
+++ b/src/common/containers/Dashboard/index.jsx
@@ -0,0 +1,34 @@
+// @flow
+import React from 'react'
+import {Helmet} from 'react-helmet'
+import {Grid, Header} from 'semantic-ui-react'
+import {FormattedMessage} from 'react-intl'
+
+const Dashboard = () => {
+ return (
+
+
+ Suicrux:Dashboard
+
+
+
+
+ Suicrux
+ Ultimate universal starter with lazy-loading, SSR and i18n
+
+
+
+
+ )
+}
+
+export default Dashboard
diff --git a/src/common/containers/Links/components/LinkItem.jsx b/src/common/containers/Links/components/LinkItem.jsx
new file mode 100644
index 00000000..c1fad531
--- /dev/null
+++ b/src/common/containers/Links/components/LinkItem.jsx
@@ -0,0 +1,28 @@
+// @flow
+import React from 'react'
+import {List} from 'semantic-ui-react'
+
+type Props = {
+ link: string,
+ header: string,
+ desc: string,
+ icon: string
+}
+
+const LinkItem = ({header, icon, desc, link}: Props) => {
+ return (
+
+
+
+
+
+ Suicrux:Links
+
+ {!isLinksLoaded ? (
+ Loading data...
+ ) : (
+
+
+
+
+ )}
+
+ )
+ }
+}
+
+function mapStateToProps (state) {
+ const linksState = getEntitiesLinksState(state)
+ const links = linksState.entities
+ const isLinksLoaded = isLoaded(linksState)
+ return {links, isLinksLoaded}
+}
+
+const mapDispatchToProps = dispatch => ({
+ async getLinks () {
+ return dispatch(GET_LINKS())
+ }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Links)
diff --git a/src/common/containers/NotFound/index.jsx b/src/common/containers/NotFound/index.jsx
new file mode 100644
index 00000000..8d1ca7c8
--- /dev/null
+++ b/src/common/containers/NotFound/index.jsx
@@ -0,0 +1,21 @@
+// @flow
+import React from 'react'
+import {Header, Icon} from 'semantic-ui-react'
+import {Link} from 'react-router-dom'
+import {NotFoundLayout} from './style'
+
+const NotFound = () => {
+ return (
+ -
+ {_.map(links, (linkItem, i) => {
+ return
${app}
+ ${jsTags}
+
+ `
+}
+
+export default HTMLComponent
diff --git a/src/server/ssr/index.js b/src/server/ssr/index.js
new file mode 100644
index 00000000..c642c54b
--- /dev/null
+++ b/src/server/ssr/index.js
@@ -0,0 +1,64 @@
+/**
+ * @flow
+ * @desc
+ */
+import React from 'react'
+import Helmet from 'react-helmet'
+import {renderToString} from 'react-dom/server'
+import {ServerStyleSheet, StyleSheetManager} from 'styled-components'
+import {configureRootComponent, configureApp} from 'common/app'
+import asyncBootstrapper from 'react-async-bootstrapper'
+import {AsyncComponentProvider, createAsyncContext} from 'react-async-component'
+import HTMLComponent from './HTMLComponent'
+import getI18nData from 'server/i18n'
+import {matchPath} from 'react-router'
+import {getRouterRoutes} from 'routing'
+import getAssets from './stats'
+
+export default async (req: express$Request, res: express$Response) => {
+ const assets = await getAssets()
+ const {language} = req.user
+ const initialState: Object = {}
+ const i18n = getI18nData(language)
+ const sheet = new ServerStyleSheet()
+ const location: string = req.url
+ const context = {}
+ const {store, history} = configureApp(initialState)
+ const RootComponent: React$Node = configureRootComponent({
+ store,
+ history,
+ i18n,
+ SSR: {location, context}
+ })
+ const asyncContext = createAsyncContext()
+
+ const app = (
+