+ 
+ 
+ 
+ 
+
-
- {children}
-
-
-
- 
+* **[morgan](https://www.npmjs.com/package/morgan)** - request logger middleware.
+* **[helmet](https://github.com/helmetjs/helmet)** - secure your Express app.
+* **[cookie-parser](https://www.npmjs.com/package/cookie-parser)** - cookie parsing middleware.
+* **[body-parser](https://github.com/expressjs/body-parser)** - body parsing middleware
+* **[compression](https://github.com/expressjs/compression)** - compression middleware (gzip).
+* **[raven](https://docs.sentry.io/clients/node/)** - Sentry for Node
-#### Includes:
-- **[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.
-- **[ESDoc](https://github.com/esdoc/esdoc)** - docs generator.
-- **[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,
- - Optimize code with **[Babel React Optimize](https://github.com/thejameskyle/babel-react-optimize)**,
- - Process CSS with **[PostCSS](https://github.com/postcss/postcss)**, **[purifycss-webpack](https://github.com/webpack-contrib/purifycss-webpack)** and other loaders/plugins
- - Check your code with **[Eslint](https://github.com/eslint/eslint)** and **[Stylelint](https://github.com/stylelint/stylelint)** (that you can uncomment inside postcss.config.js)
-- **[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/master/package.json)
-
-### Usage
-
-#### Install:
-```bash
-git clone --depth=1 https://github.com/Metnew/react-semantic.ui-starter.git
-cd react-semantic.ui-starter && rm -rf .git
-npm install
-```
+### Webpack
-#### Run:
+* 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:
-```bash
-npm run dev # run app in dev mode
-npm run db # run mock db for app(from another process)
-```
+- **[Jest](https://facebook.github.io/jest/)** - testing framework.
+- [And more tools for building and testing...](https://github.com/Metnew/suicrux/blob/master/package.json)
-#### Build:
+## Suicrux FAQ
-```bash
-npm run build # build app
-npm run build:demo # build with process.env.BUILD_DEMO = true
-```
+#### Static assets?
-These commands generate the `dist` folder.
+`/static` folder + `url-loader`.
+Everything in `/static/public/` is copied to `/dist/client` with _copy-webpack-plugin_.
-#### Test:
+#### Is it possible to change Webpack config?
-```bash
-npm run test # run tests with Jest
-```
+Of course, config is intuitive! Webpack universality is inspired by Razzle.
-#### Lint:
+#### SSR?
-```bash
-npm run lint:styles # lint styles with Stylelint
-npm run lint:scripts # lint scripts with ESlint
-```
+Check `/src/server/ssr/`.
-#### Docs:
+#### Code-splitting?
-```bash
-npm run docs # generate docs and `serve`
-```
+**[react-async-component](https://github.com/ctrlplusb/react-async-component)**.
-#### Nearest future:
-- Implement **SSR with code-splitting**. See [React Router docs](https://reacttraining.com/react-router/web/guides/code-splitting/code-splitting-server-rendering). This docs say that it's a very hard task. So, maybe let's try to accomplish it? :smiling_imp:
+#### Server-side data-fetching?
-- **Project must be isomorphic**. Code must works with React-Native too. I'll be very happy, if you can help me with this task :wink:, or just recommend something.
+Using **[react-async-bootstrapper](https://github.com/ctrlplusb/react-async-bootstrapper)** - a wrapper around `react-tree-walker`.
-### FAQ
+#### Theming?
-#### Where are static assets?
-You can store static assets (images, videos) in `/static` folder.
+Yes, with `styled-components'` `
+
+
+
+
+
+
+ Suicrux
+
+ Best carefully selected libs β€οΈ
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Suicrux
+
+ Best carefully selected libs β€οΈ
+
+
+
+
+
+
+
+
+
+
+
+
- {isLoggedIn &&
-
-
-
-
- {routes}
-
-
- {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 &&
-
+type Props = {
+ children: React$Node,
+ location: any,
+ history: any,
+ sidebarOpened: boolean,
+ toggleSidebar: Function,
+ handleWindowResize: Function,
+ isMobile: boolean
+}
-
- )
- }
+class App extends Component */}
+
-
-
- {title}
-
-
-
- Post's "id" is {id}
-
-
-
- {body}
-
-
-
-
- User's id is "{userId}"
-
-
-
- )
- }
-}
diff --git a/src/common/containers/Dashboard/components/index.js b/src/common/containers/Dashboard/components/index.js
deleted file mode 100644
index 4c009247..00000000
--- a/src/common/containers/Dashboard/components/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, {Component} from 'react'
-import {Card, Loader, Grid} from 'semantic-ui-react'
-import PropTypes from 'prop-types'
-import _ from 'lodash'
-import DashboardCardComponent from './DashboardCardComponent'
-
-export default class DashboardComponent extends Component {
- static propTypes = {
- statistics: PropTypes.array
- }
-
- shouldComponentUpdate (nextProps) {
- const {statistics} = this.props
- const nextStatistics = nextProps.statistics
- return !_.isEqual(statistics, nextStatistics)
- }
-
- render () {
- const {statistics} = this.props
-
- return (
- -
-
- {name} "{username}"
-
- {phone}
-
- {address.city} {address.street}
-
-
-
-
-
-
- )
- }
-}
diff --git a/src/common/containers/Inbox/index.jsx b/src/common/containers/Inbox/index.jsx
deleted file mode 100644
index 05207472..00000000
--- a/src/common/containers/Inbox/index.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, {Component} from 'react'
-import {connect} from 'react-redux'
-import PropTypes from 'prop-types'
-import {GET_INBOX} from 'actions/inbox'
-import InboxComponent from './components/InboxComponent'
-import './Inbox.scss'
-
-class Inbox extends Component {
- static propTypes = {
- // react-router `Route` component's props
- location: PropTypes.object,
- history: PropTypes.object,
- // match can force component to re-render
- match: PropTypes.object,
- conversations: PropTypes.array,
- getConversations: PropTypes.func
- }
-
- componentDidMount () {
- this.props.getConversations()
- }
-
- render () {
- let {conversations} = this.props
- let props = {conversations}
- return
+
+
+ {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 (
+
-
-
-
-
- )
- }
-}
diff --git a/src/common/containers/Login/index.jsx b/src/common/containers/Login/index.jsx
deleted file mode 100644
index efdee539..00000000
--- a/src/common/containers/Login/index.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, {Component} from 'react'
-import {connect} from 'react-redux'
-import PropTypes from 'prop-types'
-import {LOGIN_AUTH, RECOVER_PASSWORD_AUTH, REGISTER_AUTH} from 'actions/auth'
-import LoginComponent from './components/LoginComponent'
-
-class Login extends Component {
- static propTypes = {
- login: PropTypes.func.isRequired,
- register: PropTypes.func.isRequired,
- forgetPassword: PropTypes.func.isRequired,
- componentState: PropTypes.object.isRequired // login component state
- }
-
- render () {
- const {props} = this
- 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/containers/index.js b/src/common/containers/index.js
deleted file mode 100644
index 132c3fc8..00000000
--- a/src/common/containers/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export App from './App'
-export Dashboard from './Dashboard'
-export Inbox from './Inbox'
-export Login from './Login'
diff --git a/src/common/index.html b/src/common/index.html
deleted file mode 100644
index 7119927b..00000000
--- a/src/common/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-
-
-
-
-
- React-Semantic.UI Starter
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/common/index.jsx b/src/common/index.jsx
deleted file mode 100644
index 213efdb0..00000000
--- a/src/common/index.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react'
-// Devtools
-import {composeWithDevTools} from 'redux-devtools-extension'
-// Redux stuff
-import thunk from 'redux-thunk'
-import {createStore, applyMiddleware, compose} from 'redux'
-import {routerMiddleware} from 'react-router-redux'
-// Application
-import {rootReducer} from 'reducers'
-import {Root} from 'components'
-import {Routing, history} from 'routing'
-
-export const configureStore = initialState => {
- const routerMiddlewareApplied = applyMiddleware(routerMiddleware(history))
- const thunkApplied = applyMiddleware(thunk)
- let middlewares = null
-
- if (process.env.NODE_ENV === 'development') {
- middlewares = composeWithDevTools(routerMiddlewareApplied, thunkApplied)
- } else {
- middlewares = compose(routerMiddlewareApplied, thunkApplied)
- }
-
- return createStore(rootReducer, initialState, middlewares)
-}
-
-export const configureRootComponent = store => {
- const propsRoot = {
- routes: Routing,
- history,
- store
- }
-
- return
+
+ Loading page...
+
+
+ )
+ },
+ ErrorComponent () {
+ return (
+
+
+ Got error while loading page.
+
+
+ )
+ },
+ autoResolveES2015Default: true,
+ env: process.env.BROWSER ? 'browser' : 'node',
+ serverMode: 'resolve'
+ })
+}
-/**
- * Returns application routing with protected by AuthCheck func routes
- * @param {Function} authCheck checks is user logged in
- */
-export const Routing = authCheck => {
- // remove components that aren't application routes, (e.g. github link in sidebar)
- const routes = appRouting.filter(a => a.tag || a.component)
- // render components that are inside Switch (main view)
- const routesRendered = routes.map((a, i) => {
- // get tag for Route. is it RouteAuth `protected route` or Route?
- const Tag = a.tag
- const {path, exact, strict, component} = a
- // can visitor access this route?
- const canAccess = authCheck
- // select only props that we need
- const b = {path, exact, strict, component, canAccess}
+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'
+ }
+ ]
- return
-
- {routesRendered}
-
-
- )
+ return fns[useFor]
}
-function getHistory () {
- const basename = process.env.BUILD_DEMO ? '/react-semantic.ui-starter' : ''
- return createBrowserHistory({basename})
-}
+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/base.scss b/src/common/styles/base.scss
deleted file mode 100644
index 727fdc9b..00000000
--- a/src/common/styles/base.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.spacer {
- flex-grow: 1;
-}
-
-.hidden {
- display: none;
-}
-
-.text-center {
- text-align: center;
-}
-
-* {
- box-sizing: border-box;
-}
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/index.scss b/src/common/styles/index.scss
deleted file mode 100644
index 6437da4b..00000000
--- a/src/common/styles/index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import './base.scss';
diff --git a/src/common/styles/mixins.scss b/src/common/styles/mixins.scss
deleted file mode 100644
index 24da933b..00000000
--- a/src/common/styles/mixins.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-// mixin for responsive grid, but I'm sure it's far from the best solution
-
-$xs: 0; // Extra small screen / phone
-$sm: 480px; // Small screen / phone
-$md: 768px; // Medium screen / tablet
-$lg: 1024px; // Large screen / desktop
-$xl: 1200px; // Extra large screen / wide desktop
-@mixin respond-to($media...) {
- @for $i from 1 through length($media){
- @include privat-respond-to(nth($media, $i)) {
- @content;
- };
- }
-}
-
-@mixin privat-respond-to($current-media) {
- @if $current-media == 'xs' {
- @media only screen and (max-width: $sm) {
- @content;
- }
- }
-
- @else if $current-media == 'sm' {
- @media only screen and (min-width: $sm + 1) {
- @content;
- }
- }
-
- @else if $current-media == 'only-sm' {
- @media only screen and (min-width: $sm + 1) and (max-width: $md) {
- @content;
- }
- }
-
- @else if $current-media == 'md' {
- @media only screen and (min-width: $md + 1) {
- @content;
- }
- }
-
- @else if $current-media == 'only-md' {
- @media only screen and (min-width: $md + 1) and (max-width: $lg + 1) {
- @content;
- }
- }
-
- @else if $current-media == 'lg' {
- @media only screen and (min-width: $lg + 1) {
- @content;
- }
- }
-
- @else if $current-media == 'only-lg' {
- @media only screen and (min-width: $lg + 1) and (max-width: $xl - 1) {
- @content;
- }
- }
-
- @else if $current-media == 'xl' {
- @media only screen and (min-width: $xl) {
- @content;
- }
- }
-}
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/common/styles/vars.scss b/src/common/styles/vars.scss
deleted file mode 100644
index 5bee51d2..00000000
--- a/src/common/styles/vars.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// File with all scss variables. Import it in your .scss file as "~scss_vars"
-@import './mixins.scss';
-// UI
-$sidebar-size: 150px;
-// COLORS
-$white: #fff;
-$background: #f3f3f3;
-$grey: #dbe2e8;
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
index 171e461e..bce4de0b 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -1,7 +1,23 @@
-require('babel-core/register')
-// require.extensions['.scss'] = () => {}
-// require.extensions['.css'] = () => {}
-global.window = {}
-console.log('It\'s still under development. Do not try to use!')
-require('./server')
-// SSR is under development, be patient :)
+/**
+ * @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/server.js b/src/server/server.js
deleted file mode 100644
index 63bd973c..00000000
--- a/src/server/server.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import express from 'express'
-import path from 'path'
-import React from 'react'
-import {renderToString} from 'react-dom/server'
-// react-router
-import {StaticRouter} from 'react-router'
-// Application
-import {configureStore, configureRootComponent} from '../common/index'
-// const compression = require('compression')
-// const Helmet = require('react-helmet')
-
-const app = express()
-const port = 8080
-
-app.use(express.static(path.join(__dirname, 'dist')))
-app.get('/', handleRender)
-
-function handleRender (req, res) {
- const initialState = {auth: {loggedIn: true}}
- const context = {}
- const store = configureStore(initialState)
- const RootComponent = configureRootComponent(store)
- const App = (
- {RootComponent}
- )
- const html = renderToString(App)
- const finalState = store.getState()
-
- res.send(renderFullPage(html, finalState))
-}
-
-function renderFullPage (html, preloadedState) {
- return `
-
-
-
-
-
-
-
+ {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 7c7662f8..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, '../src/client'),
- commonFolderPath: path.join(__dirname, '../src/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',
- '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 746ddcc8..00000000
--- a/webpack_config/log-plugin.js
+++ /dev/null
@@ -1,18 +0,0 @@
-'use strict'
-const chalk = require('chalk')
-
-// Just prints `App is running...` after every compilation
-module.exports = class LogPlugin {
- constructor (port) {
- this.port = port
- }
-
- apply (compiler) {
- compiler.plugin('done', () => {
- const url = `http://localhost:${this.port}`
- console.log(
- `> App is running at ${chalk.yellow(url)}\n`
- )
- })
- }
-}
diff --git a/webpack_config/server.js b/webpack_config/server.js
deleted file mode 100644
index cabe2490..00000000
--- a/webpack_config/server.js
+++ /dev/null
@@ -1,63 +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 open = require('open')
-
-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)
-
-open(`http://localhost:${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 64e3bf62..00000000
--- a/webpack_config/webpack.base.js
+++ /dev/null
@@ -1,101 +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: path.join(__dirname, '../src/client/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.commonFolderPath}/actions/`,
- api: `${config.commonFolderPath}/api/`,
- reducers: `${config.commonFolderPath}/reducers/`,
- components: `${config.commonFolderPath}/components/`,
- containers: `${config.commonFolderPath}/containers/`,
- routing: `${config.commonFolderPath}/routing/`,
- styles: `${config.commonFolderPath}/styles/`,
- scss_vars: `${config.commonFolderPath}/styles/vars.scss`,
- config:
- `${config.commonFolderPath}/config/` + process.env.REACT_WEBPACK_ENV
- },
- modules: [
- // places where to search for required modules
- _.cwd('src/common'),
- _.cwd('src'),
- _.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, '../src/common/index.html'),
- filename: _.outputIndexPath
- }),
- new webpack.DefinePlugin({
- 'process.env.BUILD_DEMO': JSON.stringify(!!process.env.BUILD_DEMO),
- 'process.env.BROWSER': true
- }),
- 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 e9cfddbc..00000000
--- a/webpack_config/webpack.dev.js
+++ /dev/null
@@ -1,49 +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')
-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}}
-}
-
-base.devtool = 'eval-source-map'
-base.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
- ]
- }
-)
-
-// 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 362947c2..00000000
--- a/webpack_config/webpack.prod.js
+++ /dev/null
@@ -1,113 +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 PrepackWebpackPlugin = require('prepack-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 CompressionPlugin = require('compression-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', 'postcss-loader']
- })
- },
- {
- test: /\.scss$/,
- use: ExtractTextPlugin.extract({
- fallback: 'style-loader',
- use: ['css-loader', 'postcss-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(process.env.NODE_ENV)
- }),
- // 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, 'src/common/*.jsx'),
- // path.join(__dirname, 'src/common/components/**/*.jsx'),
- // path.join(__dirname, 'src/common/containers/**/*.jsx'),
- // path.join(__dirname, 'src/common/containers/**/*.jsx'),
- // path.join(__dirname, 'node_modules/semantic-ui-react/dist/**/*.js')
- // )
- // }),
- new OptimizeCssAssetsPlugin(),
- // extract vendor chunks
- new webpack.optimize.CommonsChunkPlugin({
- name: 'vendor',
- filename: 'vendor.[chunkhash:8].js'
- }),
- new webpack.optimize.UglifyJsPlugin({
- sourceMap: true,
- compress: {
- warnings: false
- },
- output: {
- comments: false
- }
- }),
- new webpack.optimize.AggressiveMergingPlugin(),
- 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: ['client.*.css', 'vendor.*.js'],
- additional: [':externals:'],
- optional: [':rest:']
- },
- excludes: ['.htaccess'],
- AppCache: false,
- ServiceWorker: {
- navigateFallbackURL: '/',
- events: true
- }
- }),
- new CompressionPlugin()
-)
-// 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}
+
+
+
+
+
+
+ )
+ }
}
-function mapStateToProps (state) {
- return {
- sidebarOpened: state.layout.sidebarOpened,
- isMobile: state.layout.isMobile,
- isLoggedIn: state.auth.loggedIn
- }
+const mapStateToProps = state => {
+ const {sidebarOpened} = getLayoutState(state)
+ const {isMobile} = getLayoutMobileStatuses(state)
+
+ return {
+ sidebarOpened,
+ isMobile
+ }
}
-function mapDispatchToProps (dispatch) {
- let resizer
- return {
- closeSidebar: () => {
- dispatch(CLOSE_SIDEBAR())
- },
- logout: () => {
- dispatch(LOGOUT_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?]
- */
- checkAuthLogic: (path, isLoggedIn) => {
- const authPath = '/auth'
- const homePath = '/'
- if (isLoggedIn && path === authPath) {
- dispatch(push(homePath))
- }
- },
- handleWindowResize: () => {
- clearTimeout(resizer)
- resizer = setTimeout(() => dispatch(WINDOW_RESIZE()), 100)
- }
- }
+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/components/DashboardCardComponent.jsx b/src/common/containers/Dashboard/components/DashboardCardComponent.jsx
deleted file mode 100644
index 08778a9e..00000000
--- a/src/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/src/common/containers/Dashboard/index.jsx b/src/common/containers/Dashboard/index.jsx
index 6af546cc..6c836b55 100644
--- a/src/common/containers/Dashboard/index.jsx
+++ b/src/common/containers/Dashboard/index.jsx
@@ -1,38 +1,34 @@
-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'
+// @flow
+import React from 'react'
+import {Helmet} from 'react-helmet'
+import {Grid, Header} from 'semantic-ui-react'
+import {FormattedMessage} from 'react-intl'
-class Dashboard extends Component {
- static propTypes = {
- statistics: PropTypes.array,
- getStatistics: PropTypes.func.isRequired
- }
-
- componentDidMount () {
- this.props.getStatistics()
- }
-
- render () {
- const {statistics} = this.props
- const props = {statistics}
-
- return
+
+ Suicrux:Dashboard
+
+
+
+
+ Suicrux
+ Ultimate universal starter with lazy-loading, SSR and i18n
+
+
+
+
+ )
}
-export default connect(mapStateToProps, mapDispatchToProps)(Dashboard)
+export default Dashboard
diff --git a/src/common/containers/Inbox/Inbox.scss b/src/common/containers/Inbox/Inbox.scss
deleted file mode 100644
index 78df629b..00000000
--- a/src/common/containers/Inbox/Inbox.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '~scss_vars';
-
-.item.align-row {
- flex-direction: row!important;
-}
diff --git a/src/common/containers/Inbox/components/DateItemComponent.jsx b/src/common/containers/Inbox/components/DateItemComponent.jsx
deleted file mode 100644
index e067f2ca..00000000
--- a/src/common/containers/Inbox/components/DateItemComponent.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, {PureComponent} from 'react'
-import PropTypes from 'prop-types'
-import {Statistic} from 'semantic-ui-react'
-
-export default class DateItemComponent extends PureComponent {
- static propTypes = {
- date: PropTypes.string
- }
-
- render () {
- let {date} = this.props
- if (!date) {
- date = '1900-01-01'
- }
- const dateStr = date.split('-')
- const monthNames = [
- 'January',
- 'February',
- 'March',
- 'April',
- 'May',
- 'June',
- 'July',
- 'August',
- 'September',
- 'October',
- 'November',
- 'December'
- ]
- const monthIndex = Number(dateStr[1]) - 1
- const monthString = monthNames[monthIndex]
- const year = dateStr[0]
- const day = dateStr[2]
-
- return (
-
+
+
+
- {noConversations && Loading... }
-
-
- {!noConversations &&
-
- {conversations.map((obj, i) => {
- return }
-
-
-
- )
- }
-}
diff --git a/src/common/containers/Inbox/components/InboxItemComponent.jsx b/src/common/containers/Inbox/components/InboxItemComponent.jsx
deleted file mode 100644
index 8ea962fd..00000000
--- a/src/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 (
-
+
+ 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/Login/Login.scss b/src/common/containers/Login/Login.scss
deleted file mode 100644
index 2328944b..00000000
--- a/src/common/containers/Login/Login.scss
+++ /dev/null
@@ -1 +0,0 @@
-// Login css
diff --git a/src/common/containers/Login/components/LoginComponent.jsx b/src/common/containers/Login/components/LoginComponent.jsx
deleted file mode 100644
index fcae2954..00000000
--- a/src/common/containers/Login/components/LoginComponent.jsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import {Button, Form, Message, Grid} from 'semantic-ui-react'
-import InputComponent from 'components/common/InputComponent'
-import {isRequired, maxSize, latin, noSpace, composition} from 'api/validate'
-
-export default class LoginComponent extends Component {
- state = {
- username: '',
- password: '',
- btn_loading: false,
- invalid: {},
- form: [
- {
- validate: composition([isRequired, maxSize(36), latin, noSpace]),
- value: '',
- placeholder: 'Email or Username',
- type: 'text',
- name: 'username',
- labelText: 'Your username'
- },
- {
- validate: composition([isRequired, maxSize(36), noSpace]),
- value: '',
- placeholder: 'Password',
- type: 'password',
- name: 'password',
- labelText: 'Your password'
- }
- ]
- }
-
- static propTypes = {
- login: PropTypes.func,
- forgetPassword: PropTypes.func,
- register: PropTypes.func,
- componentState: PropTypes.object
- }
-
- invalidExists () {
- for (let key in this.state.invalid) {
- if (this.state.invalid[key]) {
- return true
- }
- }
- return false
- }
-
- async login (e) {
- e.preventDefault()
- let {login} = this.props
- let {username, password} = this.state
- let data = {username, password}
- // set loading state
- this.setState({
- btn_loading: true
- })
- // make request
- let result = await login(data)
-
- if (result.error) {
- // reset loading state
- this.setState({
- btn_loading: false
- })
- }
- }
-
- getPrettyError () {
- // fires twice
- // first render - result of LOGIN_AUTH,
- // second - change btn_loading state
-
- // we must return formatted error from server,
- // but it's just a boilerplate
- return {
- header: 'Invalid credentials',
- content: 'Please, check your credentials'
- }
- }
-
- connectInputToParent (inputReceivedState) {
- let {state} = this // current state before receiving child state
- let {name, error, value} = inputReceivedState // receive child state
- state.invalid[name] = error // get child error
- state[name] = value // get child value
- this.setState(state) // update state
- }
-
- render () {
- const {btn_loading} = this.state
- const {componentState} = this.props
-
- // error from server
- const {loginError} = componentState
-
- // props for form
- const loginFormProps = {error: !!loginError}
-
- // login form error message
- const prettyLoginError = this.getPrettyError(loginError)
-
- // submit btn props
- const loginBtnProps = {
- disabled: this.invalidExists(),
- content: 'Login',
- icon: 'sign in',
- loading: btn_loading
- }
-
- let inputComponents = this.state.form.map((a, i) => {
- const inputName = a.name
- const error = loginError[inputName] ? loginError[inputName][0] : null
-
- const inputComponentProps = {
- ...a,
- error,
- connectToParent: ::this.connectInputToParent
- }
- return -
+ {_.map(links, (linkItem, i) => {
+ return
${html}
-
- SSR
- - - - ` -} - -app.listen(port, () => { - console.log(`SSR IS LISTENING ON PORT ${port}!`) -}) 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} + + + + + + +${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 = (
+