Skip to content

Commit

Permalink
fix(examples): update more examples to use new assets manifest
Browse files Browse the repository at this point in the history
  • Loading branch information
@fivethreeo
fivethreeo committed Oct 13, 2020
1 parent b8c9a9c commit 4ed6730
Show file tree
Hide file tree
Showing 6 changed files with 110 additions and 43 deletions.
30 changes: 18 additions & 12 deletions examples/with-all-experimental/src/server.js
View file
Expand Up @@ -4,7 +4,22 @@ import express from 'express';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';

const chunks = require(process.env.RAZZLE_CHUNKS_MANIFEST);
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].css ?
assets.entrypoints[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};


const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].js ?
assets.entrypoints[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};

const server = express();

Expand All @@ -25,20 +40,11 @@ export const renderApp = (req, res) => {
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${
chunks.client.css
? chunks.client.css.map(css=>`<link rel="stylesheet" href="${css}">`).join('')
: ''
}
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${
chunks.client.js
? chunks.client.js.filter(js=>/\.js$/.test(js))
.map(js=>`<script src="${js}" defer crossorigin></script>`).join('')
: ''
}
${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`;

Expand Down
25 changes: 19 additions & 6 deletions examples/with-custom-babel-config/src/server.js
View file
Expand Up @@ -7,6 +7,21 @@ import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].css ?
assets.entrypoints[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].js ?
assets.entrypoints[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};


const server = express();
server
.disable('x-powered-by')
Expand All @@ -30,15 +45,13 @@ server
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${assets.client.css
? `<link rel="stylesheet" href="${assets.client.css}">`
: ''}
${process.env.NODE_ENV === 'production'
? `<script src="${assets.client.js}" defer></script>`
: `<script src="${assets.client.js}" defer crossorigin></script>`}
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${process.env.NODE_ENV === 'production'
? jsScriptTagsFromAssets(assets, 'client', ' defer')
: jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`
);
Expand Down
24 changes: 18 additions & 6 deletions examples/with-custom-webpack-config/src/server.js
View file
Expand Up @@ -5,6 +5,20 @@ import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].css ?
assets.entrypoints[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].js ?
assets.entrypoints[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};

const server = express();

server
Expand All @@ -20,15 +34,13 @@ server
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${assets.client.css
? `<link rel="stylesheet" href="${assets.client.css}">`
: ''}
${process.env.NODE_ENV === 'production'
? `<script src="${assets.client.js}" defer></script>`
: `<script src="${assets.client.js}" defer crossorigin></script>`}
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${process.env.NODE_ENV === 'production'
? jsScriptTagsFromAssets(assets, 'client', ' defer')
: jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`
);
Expand Down
24 changes: 18 additions & 6 deletions examples/with-experimental-refresh/src/server.js
View file
Expand Up @@ -5,6 +5,20 @@ import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].css ?
assets.entrypoints[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].js ?
assets.entrypoints[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};

const server = express();

server
Expand All @@ -21,15 +35,13 @@ server
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${
assets.client.css
? `<link rel="stylesheet" href="${assets.client.css}">`
: ''
}
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
<script src="${assets.client.js}" defer crossorigin></script>
${process.env.NODE_ENV === 'production'
? jsScriptTagsFromAssets(assets, 'client', ' defer')
: jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`
);
Expand Down
24 changes: 18 additions & 6 deletions examples/with-firebase-functions/src/server.js
View file
Expand Up @@ -5,6 +5,20 @@ import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].css ?
assets.entrypoints[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].js ?
assets.entrypoints[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};

const server = express();

server
Expand All @@ -20,15 +34,13 @@ server
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${assets.client.css
? `<link rel="stylesheet" href="${assets.client.css}">`
: ''}
${process.env.NODE_ENV === 'production'
? `<script src="${assets.client.js}" defer></script>`
: `<script src="${assets.client.js}" defer crossorigin></script>`}
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
${process.env.NODE_ENV === 'production'
? jsScriptTagsFromAssets(assets, 'client', ' defer')
: jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`
);
Expand Down
26 changes: 19 additions & 7 deletions examples/with-heroku/src/server.js
View file
Expand Up @@ -5,6 +5,20 @@ import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].css ?
assets.entrypoints[entrypoint].css.map(asset=>
`<link rel="stylesheet" href="${asset}">`
).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].js ?
assets.entrypoints[entrypoint].js.map(asset=>
`<script src="${asset}"${extra}></script>`
).join('') : '' : '';
};

const server = express();

server
Expand All @@ -21,15 +35,13 @@ server
<meta charSet='utf-8' />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
${
assets.client.css
? `<link rel="stylesheet" href="${assets.client.css}">`
: ''
}
${cssLinksFromAssets(assets, 'client')}
</head>
<body>
<div id="root">${markup}</div>
<script src="${assets.client.js}" defer crossorigin></script>
<div id="root">${markup}</div>
${process.env.NODE_ENV === 'production'
? jsScriptTagsFromAssets(assets, 'client', ' defer')
: jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
</body>
</html>`
);
Expand Down

0 comments on commit 4ed6730

Please sign in to comment.