Skip to content

Commit

Permalink
add example
Browse files Browse the repository at this point in the history
  • Loading branch information
AlexSergey committed Jan 24, 2021
1 parent c0e977c commit 25d3e10
Show file tree
Hide file tree
Showing 5 changed files with 136 additions and 0 deletions.
38 changes: 38 additions & 0 deletions examples/2.1-simple-express-only-client/build.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
const { isomorphicCompiler, backendCompiler, frontendCompiler, getArgs } = require('@rockpack/compiler');

if (getArgs().client) {
frontendCompiler({
src: 'src/client.jsx',
global: {
client: true
},
dist: 'public',
babel: {
plugins: [
'@issr/babel-plugin'
]
},
});
} else {
isomorphicCompiler(
frontendCompiler({
src: 'src/client.jsx',
dist: 'public',
babel: {
plugins: [
'@issr/babel-plugin'
]
},
}),
backendCompiler({
src: 'src/server.jsx',
dist: 'dist',
babel: {
plugins: [
'@issr/babel-plugin'
]
},
})
);

}
20 changes: 20 additions & 0 deletions examples/2.1-simple-express-only-client/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"name": "@issr/example-2.1",
"version": "1.0.0",
"scripts": {
"start": "cross-env NODE_ENV=development node build",
"start:client": "cross-env NODE_ENV=development node build --client",
"build": "cross-env NODE_ENV=production node build"
},
"dependencies": {
"@issr/core": "1.0.0",
"express": "^4.17.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"serialize-javascript": "3.0.0"
},
"devDependencies": {
"@issr/babel-plugin": "1.0.0",
"@rockpack/compiler": "1.9.0"
}
}
19 changes: 19 additions & 0 deletions examples/2.1-simple-express-only-client/src/App.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import { useSsrState, useSsrEffect } from '@issr/core';

const asyncFn = () => new Promise((resolve) => setTimeout(() => resolve('Hello world'), 1000));

export const App = () => {
const [state, setState] = useSsrState('text here');

useSsrEffect(async () => {
const data = await asyncFn()
setState(data);
});

return (
<div>
<h1>{state}</h1>
</div>
);
};
26 changes: 26 additions & 0 deletions examples/2.1-simple-express-only-client/src/client.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import React from 'react';
import { hydrate, render } from 'react-dom';
import { App } from './App';
import createSsr from '@issr/core';

const onlyClient = Boolean(process.env.client);

const SSR = createSsr(window.SSR_DATA, { onlyClient });

const rootElement = document.getElementById("root");

if (rootElement.hasChildNodes()) {
hydrate(
<SSR>
<App />
</SSR>,
rootElement
);
} else {
render(
<SSR>
<App />
</SSR>,
rootElement
);
}
33 changes: 33 additions & 0 deletions examples/2.1-simple-express-only-client/src/server.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';
import express from 'express';
import serialize from 'serialize-javascript';
import { App } from './App';
import { serverRender } from '@issr/core';

const app = express();

app.use(express.static('public'));

app.get('/*', async (req, res) => {
const { html, state } = await serverRender(() => <App />);
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.SSR_DATA = ${serialize(state, { isJSON: true })}
</script>
</head>
<body>
<div id="root">${html}</div>
<script src="/index.js"></script>
</body>
</html>
`);
});

app.listen(4000, () => {
console.log('Example app listening on port 4000!');
});

0 comments on commit 25d3e10

Please sign in to comment.