Keeping Apollo and Recompose in Check

git clone git@github.com:idkjs/books-recompose.git

npm install

npm start

npm install -g now

npm run deploy

I love functional style programming and GraphQL. I had to see how the demo code from this article worked so I worked backwards from the example to add a backend to it. Below are the steps I took.

Important Points:

• Only way I know how to run a search with graphql is to use MongoDB on the backend and use the ReGex operator there. So I had to be put up a quick sandbox on [mLab] (www.mlab.com)

• For a functioning graphql endpoint to test against that I could connect to MongoDB, I went with Apollo's awesome Launchpad. My first run at this was with GraphCool but you don't have control of the resolvers as I understand it so I could not really get at the Regex thing. They do have an Algolia integration that seems worth checking out.

• For fake data, I used Mockeroo because there regex functionality is super cool and makes it easy to create nested objects which the demo schema required.

• deploying the demo was pretty easy with create-react-app-now. It was my first time using it so it wasnt so clear but if you just follow the instructions, it apparently works! deployed

• Go to mlab and get you a sandbox. Create a user for the db. Note the user's login and password. (NOT THE SAME AS WHAT YOU LOGGED INTO MLAB WITH)
• Also note your connection string.
• connection string: mongodb://<dbuser>:<dbuserpassword>@ds0305555.mlab .com:305555/books-recompose
• books.json is a json array so add --jsonArray flag to mongoimport command mongoimport -h ds0305555.mlab.com:305555 -d books-recompose -c books -u <dbuser> -p <dbuserpasswrod> --file ./books.json --jsonArray

Get Launchpad MongoDB example, click fork.

Add your mLab sandbox connection string.

Change Launchpad schema to conform to apollo-recompose example

Get fake data that conforms to the example from www.mockeroo.com

Import fake data to mLab sandbox MongoDB instance.

Get generated Launchpad Endpoint: https://k7mmlwwl7.lp.gql.zone/graphql at bottom of screen.

Add endpoint to Apollo's networkInterface object in app.js.

Create a boilerplate app with create-react-app-now, instead of create-react-app to ease deployment later on.

Drop in refactored demo code from the article. The refactor in the article not expected to run so I had to clean it up just a bit.

Put some minimum css in it so it doesn't hurt the eyes (even if you don't know css)

Deploye with Now-CLI

Deploy React.js Static Web Apps generated with facebookincubator/create-react-app to Zeit's awesome Now.sh service.

I wrote an article about this project here: Zero Configuration Deployment for React app with Zeit Now

I personally and strongly recommend you to check out Next.js by Zeit team. That will be my personal go to choice as well when creating new React project, and deploy to now seamlessly.

Though create-react-app-now can serves as an example on how you can use create-react-app and zeit's now together.

Having said that, it is likely that I will not actively maintain this repo anymore (e.g. update the dependencies). I will still accept PR though.

create-react-app-now is created using facebookincubator/create-react-app. Although it supports deployment to github pages and heroku, it does not feel intuitive just yet, as we need to run lots of commands.

This project is specifically to solve just that, with just 1 command: npm run deploy

This is achieved by using Zeit's awesome Now.sh service. It is fast, easy, and intuitive way of deploying your React app.

Simply follow this step from getting started to deployment:

$ npm install -g now
$ git clone https://github.com/xkawi/create-react-app-now
$ npm install
$ npm run deploy

First command installs the now cli globally as npm package. Another (or suggested) approach is to install Now Desktop to ensure automatic updates of now cli.

Subsequent commands simply clone this repo, install necessary npm packages and deploy it to Now.

Whenever you want to deploy new changes, just run npm run deploy again to get new public link, for free! 😄

You will enjoy all the benefits that Now offers out-of-the-box: real-time and immutable deployments all within 1 command.

You might see some red text appears or warnings in the log. You can safely ignore this, because your project will still be deployed successfully.

If you prefer something else, please refer to create-react-app documentation here.

Read more about create-react-app here

Read more about Zeit's Now.sh here