-
Notifications
You must be signed in to change notification settings - Fork 31
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SSR functionality #258
base: ssr
Are you sure you want to change the base?
SSR functionality #258
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,10 @@ | ||
import { file, group, match } from 'webpack-blocks' | ||
|
||
export default function(config) { | ||
export default function assets(config = {}) { | ||
return group([ | ||
// will copy font files to build directory and link to them | ||
match(['*.eot', '*.ttf', '*.woff', '*.woff2', '*.png', '*.jpg', '*.svg'], [ | ||
file(), | ||
file({ emitFile: !config.ssr }), | ||
]), | ||
]) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
import { group, devServer as devServerBlock } from 'webpack-blocks' | ||
import path from 'path' | ||
import get from 'lodash/get' | ||
import { getFilenameFromUrl } from 'webpack-dev-middleware/lib/util' | ||
import { match as proxyMatch } from 'http-proxy-middleware/lib/context-matcher' | ||
import getContent from '../src/ssr/get-content' | ||
import decache from 'decache' | ||
|
||
|
||
const publicPath = path.resolve(`${process.env.OUTPUT_PATH}`) | ||
|
||
export default function devServer() { | ||
return devServerBlock({ | ||
contentBase: path.resolve(`${process.env.OUTPUT_PATH}`), | ||
port: process.env.DEV_SERVER_PORT || 3000, | ||
overlay: true, | ||
clientLogLevel: 'info', // FIXME move to VERBOSE mode (add loglevel/verbose option) | ||
stats: 'minimal', | ||
host: process.env.DEV_SERVER_HOST, | ||
|
||
// FIXME | ||
filename: 'bundle.js', | ||
|
||
allowedHosts: [ | ||
'.localhost', | ||
`.${process.env.MAIN_HOST}`, | ||
], | ||
|
||
writeToDisk: true, | ||
|
||
before: middleware, | ||
}) | ||
} | ||
|
||
function middleware(app, server, compiler) { | ||
app.get('*', function(req, res, next) { | ||
if(!process.env.SSR) { | ||
return next() | ||
} | ||
|
||
let accept = String(get(req, 'headers.accept', '')) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. where do you use this variable? |
||
|
||
let isWebpackAsset = getFilenameFromUrl( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. const |
||
process.env.PUBLIC_PATH, | ||
compiler, | ||
req.url | ||
) | ||
|
||
let isProxyMatched = proxyMatch( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. const |
||
JSON.parse(process.env.PROXY), | ||
req.originalUrl || req.url, | ||
req | ||
) | ||
|
||
// skip | ||
if(isWebpackAsset || isProxyMatched) { | ||
return next() | ||
} | ||
|
||
// run SSR | ||
// TODO ensure that compilation is completed | ||
decache('../dist/ssr/ssr') | ||
return getContent(req.url) | ||
.then(c => res.send(c.content)) | ||
.catch(e => { | ||
res.status(500).send('Internal server error.') | ||
console.error(e) | ||
}) | ||
}) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { group, match, devServer, env, addPlugins } from 'webpack-blocks' | ||
import path from 'path' | ||
import webpack from 'webpack' | ||
|
||
export default function ssr(config) { | ||
|
||
return group([ | ||
match(['*.css', '*.sass', '*.scss', '*polyfills.js'], [ | ||
nothing(), | ||
]), | ||
|
||
/* | ||
env('development', [ | ||
devServer({ | ||
inline: false, | ||
// FIXME hot updates still created | ||
hot: false, | ||
}) | ||
]), | ||
*/ | ||
]) | ||
} | ||
|
||
function nothing(options = {}) { | ||
return (context, util) => | ||
util.addLoader( | ||
Object.assign( | ||
{ | ||
use: 'null-loader', | ||
}, | ||
context.match | ||
) | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,24 +1,48 @@ | ||
import { Fragment } from 'react' | ||
import { Provider } from 'react-redux' | ||
import { Router } from 'common/router' | ||
import { CheckCache } from '@ds-frontend/cache' | ||
import { hot } from 'react-hot-loader/root' | ||
import routes from './routes' | ||
import PropTypes from 'prop-types' | ||
|
||
AppProvider.propTypes = { | ||
App.propTypes = { | ||
store: PropTypes.object.isRequired, | ||
history: PropTypes.object.isRequired, | ||
routerContext: PropTypes.object, | ||
origin: PropTypes.string, | ||
staticUrl: PropTypes.string, | ||
} | ||
|
||
App.defaultProps = { | ||
routerContext: {}, | ||
origin: undefined, | ||
staticUrl: undefined, | ||
} | ||
|
||
|
||
function AppProvider({ store, history }) { | ||
return ( | ||
<Provider store={store}> | ||
<CheckCache> | ||
<Router history={history} routes={routes}/> | ||
</CheckCache> | ||
</Provider> | ||
) | ||
function App({ store, staticUrl, origin, routerContext }) { | ||
try { | ||
const CheckCacheComponent = process.env.SSR ? Fragment : CheckCache | ||
return ( | ||
<Provider store={store}> | ||
<CheckCacheComponent> | ||
<Router staticUrl={staticUrl} origin={origin} routerContext={routerContext} routes={routes}/> | ||
</CheckCacheComponent> | ||
</Provider> | ||
) | ||
} catch(error) { | ||
// TODO log to sentry | ||
console.error('[e][%s] render', process.env.SSR ? 'SSR' : 'SPA ⬇️') | ||
console.error(error) | ||
return ( | ||
<Fragment> | ||
{process.env.SSR && ( | ||
<h2>500</h2> | ||
)} | ||
<p>Something went wrong.</p> | ||
<p>Please try to reload the page or go to <a href="/">home</a></p> | ||
</Fragment> | ||
) | ||
} | ||
} | ||
|
||
export default hot(AppProvider) | ||
export default process.env.SSR ? App : require('react-hot-loader/root').hot(App) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we need to make SPA=true and SSR=?