diff --git a/examples/with-carlo/README.md b/examples/with-carlo/README.md new file mode 100644 index 00000000..65a022b6 --- /dev/null +++ b/examples/with-carlo/README.md @@ -0,0 +1,45 @@ +# Carlo example + +## How to use + +### Using `create-next-app` + +Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example: + +```bash +npx create-next-app --example with-carlo with-carlo-app +# or +yarn create next-app --example with-carlo with-carlo-app +``` + +### Download manually + +Download the example: + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-carlo +cd with-carlo +``` + +### Development + +Install it and run: + +```bash +npm install +npm run dev +# or +yarn +yarn dev +``` + +### Build it + +```bash +npm run build +npm start +``` + +## The idea behind the example + +This example show how you can use Next.js with [Carlo](https://github.com/GoogleChromeLabs/carlo). Here we use a [Custom server](https://github.com/zeit/next.js/blob/canary/examples/custom-server/README.md) to fit the carlo configs. \ No newline at end of file diff --git a/examples/with-carlo/carlo.js b/examples/with-carlo/carlo.js new file mode 100644 index 00000000..0fe30dea --- /dev/null +++ b/examples/with-carlo/carlo.js @@ -0,0 +1,23 @@ +const carlo = require('carlo') + +/** + * ref: https://github.com/GoogleChromeLabs/carlo#usage + */ + +module.exports = async url => { + // Launch the browser. + const app = await carlo.launch() + + // Terminate Node.js process on app window closing. + app.on('exit', () => process.exit()) + + // Fetch from the next.js server + app.serveOrigin(url) + + // Expose functions in the web environment. + await app.exposeFunction('env', _ => process.env) + await app.exposeFunction('getName', _ => 'next.js') + + // Navigate to the main page of your app. + await app.load('/') +} diff --git a/examples/with-carlo/package.json b/examples/with-carlo/package.json new file mode 100644 index 00000000..5348c990 --- /dev/null +++ b/examples/with-carlo/package.json @@ -0,0 +1,16 @@ +{ + "name": "with-carlo", + "version": "1.0.0", + "scripts": { + "dev": "node server.js", + "build": "next build", + "start": "NODE_ENV=production node server.js" + }, + "dependencies": { + "carlo": "0.9.43", + "next": "latest", + "react": "^16.0.0", + "react-dom": "^16.0.0" + }, + "license": "ISC" +} diff --git a/examples/with-carlo/pages/about.js b/examples/with-carlo/pages/about.js new file mode 100644 index 00000000..6e3ff1a8 --- /dev/null +++ b/examples/with-carlo/pages/about.js @@ -0,0 +1,23 @@ +import * as React from 'react' +import Link from 'next/link' + +export default class About extends React.Component { + state = { name: '' }; + + async componentDidMount () { + const name = await window.getName() + this.setState({ name }) + } + + render () { + return ( +
+

About {this.state.name}

+ + + back + +
+ ) + } +} diff --git a/examples/with-carlo/pages/index.js b/examples/with-carlo/pages/index.js new file mode 100644 index 00000000..5a7f3f8d --- /dev/null +++ b/examples/with-carlo/pages/index.js @@ -0,0 +1,11 @@ +import Link from 'next/link' + +export default () => ( +
+

Hello World

+ + + About + +
+) diff --git a/examples/with-carlo/server.js b/examples/with-carlo/server.js new file mode 100644 index 00000000..f5a06dc8 --- /dev/null +++ b/examples/with-carlo/server.js @@ -0,0 +1,20 @@ +const { createServer } = require('http') +const next = require('next') +const carlo = require('./carlo') + +const port = parseInt(process.env.PORT, 10) || 3000 +const dev = process.env.NODE_ENV !== 'production' +const app = next({ dev }) +const handle = app.getRequestHandler() + +app.prepare().then(async () => { + const url = `http://localhost:${port}` + + app.setAssetPrefix(url) + createServer(handle).listen(port, err => { + if (err) throw err + console.log(`> Ready on ${url}`) + }) + + await carlo(url) +})