zecfoundation
/
zcash-grant-system
mirror of https://github.com/ZcashFoundation/zcash-grant-system.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Check in WIP

This commit is contained in:
William O'Beirne 2019-01-31 20:49:13 -05:00
parent 4091deaf2f
commit 006ece5fe4
7 changed files with 44 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/.env.example
View File

@ -1,7 +1,7 @@
# Disable typescript checking for dev building (reduce build time & resource usage)
NO_DEV_TS_CHECK=true
NODE_ENV=development
# NODE_ENV=development
# Set the public host url (no trailing slash)
PUBLIC_HOST_URL=https://grants.zfnd.org
@ -15,3 +15,6 @@ BACKEND_URL=http://localhost:5000
# Blockchain explorer to link to. Top for mainnet, bottom for testnet.
# EXPLORER_URL="https://explorer.zcha.in/"
EXPLORER_URL="https://testnet.zcha.in/"
# Normally production runs with SSL, this disables that
DISABLE_SSL=true

1
frontend/client/Routes.tsx
View File

@ -13,6 +13,7 @@ import AuthRoute from 'components/AuthRoute';
import Template, { TemplateProps } from 'components/Template';
// wrap components in loadable...import & they will be split
// Make sure you specify chunkname! Must replace slashes with dashes.
const opts = { fallback: <Loader size="large" /> };
const Home = loadable(() => import('pages/index'), opts);
const Create = loadable(() => import('pages/create'), opts);

6
frontend/config/webpack.config.js/loaders.js
View File

@ -4,12 +4,6 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isDev = process.env.NODE_ENV === 'development';
const babelPresets = [
'@babel/react',
// '@babel/typescript', (using ts-loader)
['@babel/env', { useBuiltIns: 'entry', modules: false }],
];
const lessLoader = {
loader: 'less-loader',
options: { javascriptEnabled: true },

22
frontend/config/webpack.config.js/plugins.js
View File

@ -1,7 +1,6 @@
const webpack = require('webpack');
const path = require('path');
const ManifestPlugin = require('webpack-manifest-plugin');
const { StatsWriterPlugin } = require('webpack-stats-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ModuleDependencyWarning = require('./module-dependency-warning');
const WebappWebpackPlugin = require('webapp-webpack-plugin');
@ -55,27 +54,6 @@ const client = [
},
},
]),
// this allows the server access to the dependency graph
// so it can find which js/css to add to initial page
new StatsWriterPlugin({
fileName: 'stats.json',
fields: null,
transform(data) {
const trans = {};
trans.publicPath = data.publicPath;
trans.modules = data.modules.map(m => ({
id: m.id,
chunks: m.chunks,
reasons: m.reasons,
}));
trans.chunks = data.chunks.map(c => ({
id: c.id,
files: c.files,
origins: c.origins,
}));
return JSON.stringify(trans, null, 2);
},
}),
new LoadablePlugin(),
];

12
frontend/server/components/HTML.tsx
View File

@ -24,6 +24,16 @@ const HTML: React.SFC<Props> = ({
extractor,
}) => {
const head = Helmet.renderStatic();
console.log(extractor);
console.log((extractor as any).chunks);
console.log((extractor as any).entrypoints);
try {
console.log('About to extract');
console.log(extractor.getStyleTags());
console.log(extractor.getStyleElements());
} catch(err) {
console.log(err);
}
return (
<html lang="">
<head>
@ -61,7 +71,7 @@ const HTML: React.SFC<Props> = ({
{extractor.getStyleElements()}
{css.map(href => {
return <link key={href} rel="stylesheet" href={href} />;
return <link key={href} type="text/css" rel="stylesheet" href={href} />;
})}
{extractor.getScriptElements()}

6
frontend/server/index.tsx
View File

@ -28,8 +28,8 @@ Sentry.init({
const app = express();
// ssl
if (!isDev) {
console.log('Enabling HTTPS redirect.');
if (!isDev && !process.env.DISABLE_SSL) {
log.warn('PRODUCTION mode, enforcing HTTPS redirect');
app.use(enforce.HTTPS({ trustProtoHeader: true }));
}
@ -51,7 +51,7 @@ if (isDev) {
res.send('');
});
} else {
log.warn('PRODUCTION mode, serving static assets from node server.');
log.warn('PRODUCTION mode, serving static assets from node server');
app.use(
paths.publicPath,
express.static(path.join(paths.clientBuild, paths.publicPath)),

43
frontend/server/render.tsx
View File

@ -6,6 +6,7 @@ import { ChunkExtractor } from '@loadable/server';
import { StaticRouter as Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import { I18nextProvider } from 'react-i18next';
import * as Sentry from '@sentry/node';
import log from './log';
import { configureStore } from '../client/store/configure';
@ -53,11 +54,12 @@ const serverRenderer = () => async (req: Request, res: Response) => {
const disp = `Error getting loadable state for SSR`;
e.message = disp + ': ' + e.message;
log.error(e);
Sentry.captureException(e);
return res.status(500).send(disp + ' (more info in server logs)');
}
// 2. render and collect state
const content = renderToString(reactApp);
const content = renderToString(extractor.collectChunks(reactApp));
const state = JSON.stringify(store.getState());
// ! ensure manifest.json is available
@ -66,7 +68,8 @@ const serverRenderer = () => async (req: Request, res: Response) => {
} catch (e) {
const disp =
'ERROR: Could not load client manifest.json, there was probably a client build error.';
log.error(disp);
log.error(e);
Sentry.captureException(e);
return res.status(500).send(disp);
}
@ -83,22 +86,26 @@ const serverRenderer = () => async (req: Request, res: Response) => {
.map(m => ({ ...m, content: res.locals.assetPath(m.content) }))
.filter(m => !!m.content);
return res.send(
'<!doctype html>' +
renderToString(
<Html
css={cssFiles}
scripts={jsFiles}
linkTags={mappedLinkTags}
metaTags={mappedMetaTags}
state={state}
i18n={i18nClient}
extractor={extractor}
>
{content}
</Html>,
),
);
try {
const html = renderToString(
<Html
css={cssFiles}
scripts={jsFiles}
linkTags={mappedLinkTags}
metaTags={mappedMetaTags}
state={state}
i18n={i18nClient}
extractor={extractor}
>
{content}
</Html>,
);
return res.send('<!doctype html>' + html);
} catch (e) {
log.error(e);
Sentry.captureException(e);
return res.send('ERROR: Failed to render app');
}
};
export default serverRenderer;