From fd198d28a82f35768b721daea3f895c201eff2f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sergio=20Xalambr=C3=AD?= Date: Wed, 30 Aug 2017 13:03:36 -0500 Subject: [PATCH] Example: with absolute imports (#2863) * Add with-absolute-imports example * Fix examples repo urls to point to master instead of v3-beta --- examples/with-absolute-imports/.babelrc | 14 ++++++++++ examples/with-absolute-imports/README.md | 27 +++++++++++++++++++ .../components/header.js | 5 ++++ examples/with-absolute-imports/package.json | 13 +++++++++ examples/with-absolute-imports/pages/index.js | 7 +++++ examples/with-apollo-auth/README.md | 10 +++---- examples/with-dynamic-import/README.md | 2 +- 7 files changed, 72 insertions(+), 6 deletions(-) create mode 100644 examples/with-absolute-imports/.babelrc create mode 100644 examples/with-absolute-imports/README.md create mode 100644 examples/with-absolute-imports/components/header.js create mode 100644 examples/with-absolute-imports/package.json create mode 100644 examples/with-absolute-imports/pages/index.js diff --git a/examples/with-absolute-imports/.babelrc b/examples/with-absolute-imports/.babelrc new file mode 100644 index 00000000..0e194558 --- /dev/null +++ b/examples/with-absolute-imports/.babelrc @@ -0,0 +1,14 @@ +{ + "presets": "next/babel", + "plugins": [ + [ + "module-resolver", + { + "root": ["./"], + "alias": { + "components": "./components" + } + } + ] + ] +} diff --git a/examples/with-absolute-imports/README.md b/examples/with-absolute-imports/README.md new file mode 100644 index 00000000..6897209c --- /dev/null +++ b/examples/with-absolute-imports/README.md @@ -0,0 +1,27 @@ +# Example app with absolute imports + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-absolute-import +cd with-absolute-import +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example shows how to configure Babel to have absolute imports instead of relative imports without modifying the Webpack configuration. diff --git a/examples/with-absolute-imports/components/header.js b/examples/with-absolute-imports/components/header.js new file mode 100644 index 00000000..31971a9b --- /dev/null +++ b/examples/with-absolute-imports/components/header.js @@ -0,0 +1,5 @@ +export default () => ( +
+

Hello world!

+
+) diff --git a/examples/with-absolute-imports/package.json b/examples/with-absolute-imports/package.json new file mode 100644 index 00000000..9bc2c63d --- /dev/null +++ b/examples/with-absolute-imports/package.json @@ -0,0 +1,13 @@ +{ + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "babel-plugin-module-resolver": "^2.7.1", + "next": "^3.0.6", + "react": "^15.6.1", + "react-dom": "^15.6.1" + } +} diff --git a/examples/with-absolute-imports/pages/index.js b/examples/with-absolute-imports/pages/index.js new file mode 100644 index 00000000..e1706907 --- /dev/null +++ b/examples/with-absolute-imports/pages/index.js @@ -0,0 +1,7 @@ +import Header from 'components/header.js' + +export default () => ( +
+
+
+) diff --git a/examples/with-apollo-auth/README.md b/examples/with-apollo-auth/README.md index b54cd4ef..4b241eb3 100644 --- a/examples/with-apollo-auth/README.md +++ b/examples/with-apollo-auth/README.md @@ -10,7 +10,7 @@ https://next-with-apollo-auth.now.sh Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash -curl https://codeload.github.com/zeit/next.js/tar.gz/v3-beta | tar -xz --strip=2 next.js-3-beta/examples/with-apollo-auth +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-apollo-auth cd with-apollo-auth ``` @@ -32,13 +32,13 @@ now This is an extention of the _[with Apollo](https://github.com/zeit/next.js/tree/master/examples/with-apollo#the-idea-behind-the-example)_ example: > [Apollo](http://dev.apollodata.com) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server. -> +> > In this simple example, we integrate Apollo seamlessly with Next by wrapping our *pages* inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application. -> +> > On initial page load, while on the server and inside `getInitialProps`, we invoke the Apollo method, [`getDataFromTree`](http://dev.apollodata.com/react/server-side-rendering.html#getDataFromTree). This method returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized. -> +> > This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend. -> +> > *Note: Apollo uses Redux internally; if you're interested in integrating the client with your existing Redux store check out the [`with-apollo-and-redux`](https://github.com/zeit/next.js/tree/master/examples/with-apollo-and-redux) example.* [graph.cool](https://www.graph.cool) can be setup with many different diff --git a/examples/with-dynamic-import/README.md b/examples/with-dynamic-import/README.md index b960b3c6..3c16ce44 100644 --- a/examples/with-dynamic-import/README.md +++ b/examples/with-dynamic-import/README.md @@ -5,7 +5,7 @@ Download the example [or clone the repo](https://github.com/zeit/next.js): ```bash -curl https://codeload.github.com/zeit/next.js/tar.gz/v3-beta | tar -xz --strip=2 next.js-3-beta/examples/with-dynamic-import +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-dynamic-import cd with-dynamic-import ```