feat(create-after-app): update default template

jaredpalmer · Apr 25, 2020 · ae581ee · ae581ee
1 parent 42171fd
commit ae581ee
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 32 deletions.
diff --git a/packages/create-after-app/templates/default/.babelrc b/packages/create-after-app/templates/default/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": ["razzle/babel"],
+ "plugins": ["after"]
+}
diff --git a/packages/create-after-app/templates/default/package.json b/packages/create-after-app/templates/default/package.json
@@ -1,5 +1,5 @@
 {
- "name": "razzle-examples-with-afterjs",
+ "name": "after-examples-basic",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
@@ -11,10 +11,10 @@
  "dependencies": {
  "@jaredpalmer/after": "latest",
  "express": "^4.16.2",
- "razzle": "^3.0.0",
+ "razzle": "^3.1.0",
  "react": "^16.2.0",
  "react-dom": "^16.2.0",
- "react-helmet": "^5.2.0",
- "react-router-dom": "^4.2.2"
+ "react-helmet": "^6.0.0",
+ "react-router-dom": "^5.1.2"
  }
 }
diff --git a/packages/create-after-app/templates/default/src/About.js b/packages/create-after-app/templates/default/src/About.js
@@ -1,9 +1,7 @@
-import React, { Component } from 'react';
+import React from 'react';
 
-class About extends Component {
- render() {
- return <div>about</div>;
- }
+function About() {
+ return <div>about</div>;
 }
 
 export default About;
diff --git a/packages/create-after-app/templates/default/src/Home.js b/packages/create-after-app/templates/default/src/Home.js
@@ -3,26 +3,31 @@ import logo from './react.svg';
 import './Home.css';
 import { Link } from 'react-router-dom';
 
-class Home extends Component {
- static async getInitialProps({ req, res, match, history, location, ...ctx }) {
- return { whatever: 'stuff' };
- }
-
- render() {
- return (
- <div className="Home">
- <div className="Home-header">
- <img src={logo} className="Home-logo" alt="logo" />
- <h2>Welcome to After.js</h2>
- </div>
- <p className="Home-intro">
- To get started, edit <code>src/Home.js</code> or{' '}
- <code>src/About.js</code>and save to reload.
- </p>
- <Link to="/about">About -></Link>
+function Home() {
+ return (
+ <div className="Home">
+ <div className="Home-header">
+ <img src={logo} className="Home-logo" alt="logo" />
+ <h2>Welcome to After.js</h2>
  </div>
- );
- }
+ <p className="Home-intro">
+ To get started, edit <code>src/Home.js</code> or{' '}
+ <code>src/About.js</code>and save to reload.
+ </p>
+ <Link to="/about">About -></Link>
+ </div>
+ );
 }
 
+Home.getInitialProps = async ({
+ req,
+ res,
+ match,
+ history,
+ location,
+ ...ctx
+}) => {
+ return { whatever: 'stuff' };
+};
+
 export default Home;
diff --git a/packages/create-after-app/templates/default/src/routes.js b/packages/create-after-app/templates/default/src/routes.js
@@ -7,16 +7,16 @@ export default [
  path: '/',
  exact: true,
  component: asyncComponent({
- loader: () => import('./Home'), // required
- Placeholder: () => <div>...LOADING...</div>, // this is optional, just returns null by default
+ loader: () => import('./Home'),
+ Placeholder: () => <div>...LOADING...</div>,
  }),
  },
  {
  path: '/about',
  exact: true,
  component: asyncComponent({
- loader: () => import('./About'), // required
- Placeholder: () => <div>...LOADING...</div>, // this is optional, just returns null by default
+ loader: () => import('./About'),
+ Placeholder: () => <div>...LOADING...</div>,
  }),
  },
 ];
diff --git a/packages/create-after-app/templates/default/src/server.js b/packages/create-after-app/templates/default/src/server.js
@@ -3,6 +3,7 @@ import { render } from '@jaredpalmer/after';
 import routes from './routes';
 
 const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
+const chunks = require(process.env.RAZZLE_CHUNKS_MANIFEST);
 
 const server = express();
 server
@@ -15,6 +16,7 @@ server
  res,
  routes,
  assets,
+ chunks,
  });
  res.send(html);
  } catch (error) {