kylefang/reactfire
1
0
Fork 0
mirror of https://github.com/zhigang1992/reactfire.git synced 2026-06-18 07:29:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

ssr example working

Browse Source
This commit is contained in:
jhuleatt
2019-04-22 16:28:54 -07:00
parent 5d053bca61
commit f010461d5d
16 changed files with 6808 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -11,3 +11,4 @@ reactfire/**/*.js.map
reactfire/**/*.jsx.map
reactfire/**/*.d.ts
reactfire/docs/reactfire-metadata.json
sample-complex/.cache/**

3
package.json
View File

@@ -2,6 +2,7 @@
"private": true,
"workspaces": [
"reactfire",
"sample-simple"
"sample-simple",
"sample-complex"
]
}

3
sample-complex/.babelrc Normal file
View File

@@ -0,0 +1,3 @@
{
"presets": [["@babel/preset-env"], "@babel/preset-react"]
}

7
sample-complex/components/App.js
View File

@@ -1,7 +0,0 @@
import React from 'react';
const App = props => {
return <h1>Hello World</h1>;
};
export default App;

24
sample-complex/package.json
View File

@@ -1,26 +1,28 @@
{
"name": "sample-complex",
"version": "1.0.0",
"description": "reactfire sample with SSR",
"main": "index.js",
"license": "MIT",
"scripts": {
"build-server": "webpack --config ./webpack.server.config.js",
"build-client": "webpack --config ./webpack.client.config.js",
"start": "node server.js"
"build": "rimraf dist && npm run build-client && npm run build-server",
"build-client": "parcel build src/client.tsx -d dist/client --no-minify",
"build-server": "parcel build src/server.tsx -d dist/server --target=node10 --no-minify",
"start": "node dist/server/server.js"
},
"dependencies": {
"devDependencies": {
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"parcel-bundler": "^1.12.3",
"rimraf": "^2.6.3"
},
"dependencies": {
"@types/express": "^4.16.1",
"@types/react": "^16.8.14",
"@types/react-dom": "^16.8.4",
"express": "^4.16.4",
"firebase": "^5.10.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"
},
"devDependencies": {
"prettier": "^1.17.0",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0"
}
}

13
sample-complex/server.js
View File

@@ -1,13 +0,0 @@
import React from 'react';
import express from 'express';
const app = express();
const port = 3000;
import App from './components/App';
import ReactDOMServer from 'react-dom/server';
console.log(ReactDOMServer.renderToString(<App />));
app.get('/', (req, res) => res.send('Hello World!'));
app.listen(port, () => console.log(`server listening on port ${port}`));

18
sample-complex/src/App.tsx Normal file
View File

@@ -0,0 +1,18 @@
import * as React from 'react';
const App = ({ initialCount }) => {
const [count, setCount] = React.useState(initialCount);
return (
<>
<h1>Counter</h1>
<span>
<button onClick={() => setCount(count + 1)}>+</button>
{count}
<button onClick={() => setCount(count - 1)}>-</button>
</span>
</>
);
};
export default App;

10
sample-complex/src/client.tsx Normal file
View File

@@ -0,0 +1,10 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
const serverState = window.__initialState;
ReactDOM.hydrate(
<App initialCount={serverState.initialCount} />,
document.getElementById('app')
);

18
sample-complex/src/html-template.ts Normal file
View File

@@ -0,0 +1,18 @@
const x = (appMarkup: string, initialState: string) => {
return `<!DOCTYPE html>
<html>
<head>
<title>Empty project</title>
<meta charset="utf-8" />
</head>
<body>
<script>
window.__initialState = ${initialState}
</script>
<div id="app">${appMarkup}</div>
<script src="dist/client.js"></script>
</body>
</html>`;
};
export default x;

21
sample-complex/src/server.tsx Normal file
View File

@@ -0,0 +1,21 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom/server';
import express from 'express';
import htmlTemplate from './html-template';
import App from './App';
const app = express();
app.use('/dist', express.static(`dist/client`));
app.get('/*', (req, res) => {
console.log('got a request');
const markup = ReactDOM.renderToString(<App initialCount={7} />);
const html = htmlTemplate(markup, JSON.stringify({ initialCount: 7 }));
res.send(html);
});
const PORT = 3030;
app.listen(PORT, () => {
console.log(`Listening on port ${PORT}...`);
});

15
sample-complex/tsconfig.json Normal file
View File

@@ -0,0 +1,15 @@
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"noImplicitAny": true,
"module": "es6",
"moduleResolution": "node",
"target": "es5",
"allowJs": true,
"jsx": "react"
},
"include": ["./src/**/*"]
}

11
sample-complex/webpack.client.config.js
View File

@@ -1,11 +0,0 @@
const baseConfig = require('./webpack.config');
const path = require('path');
module.exports = {
entry: './containers/ClientApp.js',
output: {
filename: 'client.bundle.js',
path: path.resolve(__dirname, '../public/assets')
},
...baseConfig
};

17
sample-complex/webpack.config.js
View File

@@ -1,17 +0,0 @@
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
mode: 'development'
// options: {
// sourceType: 'unambiguous'
// }
};

13
sample-complex/webpack.server.config.js
View File

@@ -1,13 +0,0 @@
const baseConfig = require('./webpack.config');
const path = require('path');
// Note that since this is for the server, it is important to
// set the target to node and set the libraryTarget to commonjs2
module.exports = {
// target: 'node',
entry: './server.js',
output: {
filename: 'server.bundle.js'
},
...baseConfig
};

5807
sample-complex/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff

970
yarn.lock
View File

File diff suppressed because it is too large Load Diff