Image for post
Image for post

Building Chatty — Part 1: Setup

A WhatsApp clone with React Native and Apollo

Simon Tucker
Apr 9, 2017 · 9 min read

Overview

Image for post
Image for post
7 Steps later…

Steps

The Stack

Part 1 Goals

Getting started

/chatty
/node_modules
package.json
/server
... server files
/client
/node_modules
package.json
... RN files
# make our directory
mkdir chatty
cd chatty
# start npm package managing
npm init
# build some server folders and files
mkdir server
cd server
touch index.js

Setting up the dev environment

# from root dir..# add dev dependencies
npm i -g eslint-cli # eslint is an excellent linter
# i -D is short for install --save-dev ;)
npm i -D babel-cli babel-preset-es2015 babel-preset-stage-2 nodemon eslint babel-eslint
eslint --init # choose airbnb preset or your preferred setup

Step 1.2: Add eslint, babel, and nodemon

...module.exports = {
"parser": "babel-eslint",
"extends": "airbnb",
"plugins": [
"react",
"jsx-a11y",
"import"
],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
"react/require-default-props": [0],
"react/no-unused-prop-types": [2, {
"skipShapeProps": true
}],
"react/no-multi-comp": [0],
"no-bitwise": [0],
},
};

Step 1.3: Create start script

...  "repository": "https://github.com/srtucker22/chatty.git",
"author": "Simon Tucker <srtucker22@gmail.com>",
"license": "MIT",
"scripts": {
"start": "nodemon --watch server --watch package.json server/index.js --exec babel-node --presets es2015,stage-2"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-eslint": "^8.2.1",

Starting the Express server

Step 1.4: Add ApolloServer

...    "eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.5.1",
"nodemon": "^1.11.0"
},
"dependencies": {
"apollo-server": "^2.0.0",
"graphql": "^0.13.2"
}
}
...import { ApolloServer, gql } from 'apollo-server';const PORT = 8080;// basic schema
const typeDefs = gql`
type Query {
testString: String
}
`;
const server = new ApolloServer({ typeDefs, mocks: true });server.listen({ port: PORT }).then(({ url }) => console.log(`🚀 Server ready at ${url}`));
Image for post
Image for post

Starting the React Native client

# you'll need to also install XCode for iOS development
# double check these setup instructions at https://facebook.github.io/react-native/docs/getting-started.html#installing-dependencies
brew install node
brew install watchman
# from root dir...
npm i -g react-native-cli
# initialize RN with name chatty
react-native init chatty
# --- from here on out we'll be doing our own thing ---# change name of RN folder to client
mv chatty client
# run the app in simulator
cd client
react-native run-ios # and grab a snack or something cause this might take a while the first run...

Step 1.6: Move app code to /src

.../** @format */import {AppRegistry} from 'react-native';
import App from './src/app';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
...    'Shake or press menu button for dev menu',
});
export default class App extends Component {
render() {
return (
<View style={styles.container}>

Adding Apollo to React Native

# **make sure we're adding all react native and client related packages to package.json in the client folder!!!**
cd client
npm i apollo-cache-redux apollo-client apollo-link apollo-link-error apollo-link-http apollo-link-redux graphql graphql-tag react-apollo react-redux redux redux-devtools-extension

Step 1.7: Add ApolloClient

...{
"name": "chatty",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"apollo-cache-redux": "^0.1.0-alpha.7",
"apollo-client": "^2.2.5",
"apollo-link": "^1.1.0",
"apollo-link-error": "^1.0.7",
"apollo-link-http": "^1.3.3",
"apollo-link-redux": "^0.2.1",
"graphql": "^0.12.3",
"graphql-tag": "^2.4.2",
"react": "16.4.1",
"react-apollo": "^2.0.4",
"react-native": "0.56.0",
"react-redux": "^5.0.5",
"redux": "^3.7.2",
"redux-devtools-extension": "^2.13.2"
},
"devDependencies": {
"babel-jest": "23.4.0",
"babel-preset-react-native": "^5",
"jest": "23.4.1",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native"
}
}
...import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
} from 'react-native';
import { ApolloClient } from 'apollo-client';
import { ApolloLink } from 'apollo-link';
import { ApolloProvider } from 'react-apollo';
import { composeWithDevTools } from 'redux-devtools-extension';
import { createHttpLink } from 'apollo-link-http';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { ReduxCache, apolloReducer } from 'apollo-cache-redux';
import ReduxLink from 'apollo-link-redux';
import { onError } from 'apollo-link-error';
const URL = 'localhost:8080'; // set your comp's url hereconst store = createStore(
combineReducers({
apollo: apolloReducer,
}),
{}, // initial state
composeWithDevTools(),
);
const cache = new ReduxCache({ store });const reduxLink = new ReduxLink(store);const errorLink = onError((errors) => {
console.log(errors);
});
const httpLink = createHttpLink({ uri: `http://${URL}` });const link = ApolloLink.from([
reduxLink,
errorLink,
httpLink,
]);
export const client = new ApolloClient({
link,
cache,
});
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',

Step 1.8: Add ApolloProvider to App

...export default class App extends Component {
render() {
return (
<ApolloProvider client={client}>
<Provider store={store}>
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
</Provider>
</ApolloProvider>
);
}
}
Image for post
Image for post
That’s one small step for man…

Hello world!

You can view the code for this tutorial here

Continue to Building Chatty — Part 2 (GraphQL Queries with Express)



React Native Training

Stories and tutorials for developers interested in React…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store