Skip to content

Instantly share code, notes, and snippets.

@Zodiase
Last active June 17, 2018 05:53
Show Gist options
  • Save Zodiase/7883c9f811da1145d1b2b17f99ed093f to your computer and use it in GitHub Desktop.
Save Zodiase/7883c9f811da1145d1b2b17f99ed093f to your computer and use it in GitHub Desktop.
Meteor App Template Files with React Setup
import '/imports/startup/client';
<body>
<div id="app"></div>
</body>
# The Meteor folder should not contain any code.
/.meteor/
# Do not lint third party code.
/node_modules/
# The private folder should not contain any code.
/private/
# The public folder should not contain any code.
/public/
{
"extends": "@meteorjs/eslint-config-meteor",
"rules": {
"import/prefer-default-export": "off",
"jsx-a11y/label-has-for": "off",
"jsx-a11y/no-static-element-interactions": "warn",
"react/prefer-stateless-function": "off",
"react/require-default-props": "warn",
"react/no-multi-comp": "warn",
"react/no-array-index-key": "warn",
"react/prop-types": "warn",
"react/forbid-prop-types": "off",
"arrow-body-style": "off",
"arrow-parens": [
"error",
"always"
],
"max-len": "warn",
"no-nested-ternary": "warn",
"no-param-reassign": [
"error",
{
"props": false
}
],
"no-return-assign": "off",
"no-underscore-dangle": "off",
"no-unused-expressions": "off",
"linebreak-style": "off"
}
}
import React from 'react';
import { Route } from 'react-router-dom';
import Homepage from '/imports/ui/components/page-main';
export default (
<React.Fragment>
<Route exact path="/" component={Homepage} />
</React.Fragment>
);
import '/imports/startup/server';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import Raven from 'raven-js';
import objectPath from 'object-path';
import { Meteor } from 'meteor/meteor';
import { onPageLoad } from 'meteor/server-render';
import routes from '/imports/ui/routes';
import { store as globalStateStore } from '/imports/ui/redux-store';
((sentryDsn) => {
if (!sentryDsn) {
return;
}
Raven.config(sentryDsn, {
logger: 'client',
}).install();
})(objectPath.get(Meteor.settings.public, 'sentry.dsn'));
const App = () => (
<Provider store={globalStateStore}>
<BrowserRouter>
<Switch>
{routes}
</Switch>
</BrowserRouter>
</Provider>
);
onPageLoad(() => {
ReactDOM.hydrate(<App />, document.getElementById('app'));
});
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router';
import { Provider } from 'react-redux';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import objectPath from 'object-path';
import Raven from 'raven';
import { Meteor } from 'meteor/meteor';
import { onPageLoad } from 'meteor/server-render';
import routes from '/imports/ui/routes';
import { store as globalStateStore } from '/imports/ui/redux-store';
((sentryDsn) => {
if (!sentryDsn) {
return;
}
Raven.config(sentryDsn, {
logger: 'server',
}).install();
})(objectPath.get(Meteor.settings, 'sentry.dsn'));
onPageLoad((sink) => {
const context = {};
const App = (props) => (
<Provider store={globalStateStore}>
<StaticRouter location={props.location} context={context}>
{routes}
</StaticRouter>
</Provider>
);
App.propTypes = {
location: PropTypes.object.isRequired,
};
const preloadedState = globalStateStore.getState();
sink.renderIntoElementById('app', renderToString(<App location={sink.request.url} />));
const helmet = Helmet.renderStatic();
sink.appendToHead(helmet.meta.toString());
sink.appendToHead(helmet.title.toString());
sink.appendToBody(`
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
</script>
`);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment