Dog Treats

An internationalized GraphQL Apollo-based application, built on top of the Apollo Starter Kit by Saikat. View the demo. Versioning corresponds to the version of Apollo Server being used, currently 0.3.2

Internationalization

• react-intl Read the wiki for a deeper understanding of the library
• react-intl-redux
• Checks language server side via url query parameter for bookmarking ability.

GraphQL

• graphiql allows you to play with the mocks used in this app.
• Use casual for mock data: npm install casual
• App uses the Apollo Client (built with redux) for data-batching and normalization.

Heroku Deployment tweaks

• Remove react-intl plugin from babelrc before deploying to heroku (message directories used in development only)
• Change DEV_APP_PORT in server.js to PORT before deploying to heroku.

Stack

• React for frontend development
• GraphQL for backend API
• Apollo for backend/frontend data flow management
• Redux for frontend data management. Apollo integrates with Redux.
• React-router for clientside routing
• Aphrodite for styling
• Express for the server
• Webpack for development server + hot reloading clientside stuff
• Nodemon for hot reloading backend code
• Minilog for client and server logging
• Node-foreman for running both the Webpack server and Express server
• ESLint to keep your Javascript style consistent
• Babel to use the latest Javascript language features

Other features

• Automatic asset versioning so that you can aggressively cache your assets in production
• Server side rendering out of the box
• Custom Apollo network interface that lets you add middleware to handle responses from GraphQL. This would be a good place to put any error handling that you want to do globally (e.g. unexpected errors from GraphQL, user authorization or authentication errors, etc.).
• Error handling by Rollbar has been removed in this version, due to fs module not found error.

Making and deploying a new app

1. Install Node.js.
2. Clone this starter kit
3. Change the git remote to point to your new project's repo with git remote set-url origin <new-url>
4. Change the README and update package.json to reflect the new package name, package license, description, keywords, repository, bugs url, homepage, and author.
5. Set up an ESLint plugin in your code editor so that you catch coding errors and follow code style guidelines more easily!
6. Install the redux-devtools-extension in Chrome to get advanced Redux debugging features.
7. npm install
8. npm run dev
9. Navigate to http://localhost:3000 to see your app in action.
10. Navigate to http://localhost:3000/graphql to mess around with the GraphQL API.
11. Start making changes by working in the src directory
12. Deploy your app to Heroku. Make sure to set the correct environment variables there based on what exists in .env in this project!