Initial commit of create-razzle-app
This commit is contained in:
5
src/App.css
Normal file
5
src/App.css
Normal file
@@ -0,0 +1,5 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
13
src/App.js
Normal file
13
src/App.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import Route from 'react-router-dom/Route';
|
||||
import Switch from 'react-router-dom/Switch';
|
||||
import Home from './Home';
|
||||
import './App.css';
|
||||
|
||||
const App = () => (
|
||||
<Switch>
|
||||
<Route exact path="/" component={Home} />
|
||||
</Switch>
|
||||
);
|
||||
|
||||
export default App;
|
||||
16
src/App.test.js
Normal file
16
src/App.test.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import App from './App';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import MemoryRouter from 'react-router-dom/MemoryRouter';
|
||||
|
||||
describe('<App />', () => {
|
||||
test('renders without exploding', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(
|
||||
<MemoryRouter>
|
||||
<App />
|
||||
</MemoryRouter>,
|
||||
div
|
||||
);
|
||||
});
|
||||
});
|
||||
37
src/Home.css
Normal file
37
src/Home.css
Normal file
@@ -0,0 +1,37 @@
|
||||
.Home {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.Home-logo {
|
||||
animation: Home-logo-spin infinite 20s linear;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.Home-header {
|
||||
background-color: #222;
|
||||
height: 150px;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.Home-intro {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.Home-resources {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.Home-resources > li {
|
||||
display: inline-block;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@keyframes Home-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
33
src/Home.js
Normal file
33
src/Home.js
Normal file
@@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import logo from './react.svg';
|
||||
import './Home.css';
|
||||
|
||||
class Home extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="Home">
|
||||
<div className="Home-header">
|
||||
<img src={logo} className="Home-logo" alt="logo" />
|
||||
<h2>Welcome to Razzle</h2>
|
||||
</div>
|
||||
<p className="Home-intro">
|
||||
To get started, edit <code>src/App.js</code> or{' '}
|
||||
<code>src/Home.js</code> and save to reload.
|
||||
</p>
|
||||
<ul className="Home-resources">
|
||||
<li>
|
||||
<a href="https://github.com/jaredpalmer/razzle">Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://palmer.chat">Community Slack</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Home;
|
||||
15
src/client.js
Normal file
15
src/client.js
Normal file
@@ -0,0 +1,15 @@
|
||||
import App from './App';
|
||||
import BrowserRouter from 'react-router-dom/BrowserRouter';
|
||||
import React from 'react';
|
||||
import { hydrate } from 'react-dom';
|
||||
|
||||
hydrate(
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>,
|
||||
document.getElementById('root')
|
||||
);
|
||||
|
||||
if (module.hot) {
|
||||
module.hot.accept();
|
||||
}
|
||||
26
src/index.js
Normal file
26
src/index.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import app from './server';
|
||||
import http from 'http';
|
||||
|
||||
const server = http.createServer(app);
|
||||
|
||||
let currentApp = app;
|
||||
|
||||
server.listen(process.env.PORT || 3000, error => {
|
||||
if (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
console.log('🚀 started');
|
||||
});
|
||||
|
||||
if (module.hot) {
|
||||
console.log('✅ Server-side HMR Enabled!');
|
||||
|
||||
module.hot.accept('./server', () => {
|
||||
console.log('🔁 HMR Reloading `./server`...');
|
||||
server.removeListener('request', currentApp);
|
||||
const newApp = require('./server').default;
|
||||
server.on('request', newApp);
|
||||
currentApp = newApp;
|
||||
});
|
||||
}
|
||||
6
src/react.svg
Normal file
6
src/react.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.7 KiB |
51
src/server.js
Normal file
51
src/server.js
Normal file
@@ -0,0 +1,51 @@
|
||||
import App from './App';
|
||||
import React from 'react';
|
||||
import { StaticRouter } from 'react-router-dom';
|
||||
import express from 'express';
|
||||
import { renderToString } from 'react-dom/server';
|
||||
|
||||
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
|
||||
|
||||
const server = express();
|
||||
server
|
||||
.disable('x-powered-by')
|
||||
.use(express.static(process.env.RAZZLE_PUBLIC_DIR))
|
||||
.get('/*', (req, res) => {
|
||||
const context = {};
|
||||
const markup = renderToString(
|
||||
<StaticRouter context={context} location={req.url}>
|
||||
<App />
|
||||
</StaticRouter>
|
||||
);
|
||||
|
||||
if (context.url) {
|
||||
res.redirect(context.url);
|
||||
} else {
|
||||
res.status(200).send(
|
||||
`<!doctype html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<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>`
|
||||
}
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">${markup}</div>
|
||||
</body>
|
||||
</html>`
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
export default server;
|
||||
Reference in New Issue
Block a user