The rubix/redux/redux-example app is a complete implementation of the following tutorial. If you find yourself getting stuck in any part of the tutorial please refer to the source code of the redux-example app. For any other issues get in touch with us at email@example.com
A solid understanding of React, Redux and GraphQL is required. Here are some tutorials/articles that can help you get up to speed with Redux and GraphQL:
The Application structure for the Redux starter kit is as follows:
. ├── .babelrc ├── .bowerrc ├── .gitignore ├── LICENSE.txt ├── bower.json ├── data │ ├── database.js │ └── schema.js ├── graphql.json ├── node_modules ├── package.json ├── public ├── sass ├── server.babel.js ├── src │ ├── common │ ├── main.js │ ├── plugins.js │ ├── redux │ ├── routes │ └── routes.js ├── test ├── tmp ├── tools └── views
src folder contains all the client-side Rubix source code.
sass folder contains all the client-side Rubix SASS files.
When you first launched the server and navigated to http://localhost:8080 you were greeted by a "received: Hello, World!" page. This page is defined in
The routes for all pages are defined in
src/routes.js. Sidebar navigation items are defined in
src/common/sidebar.js. Similarly, the header is defined in
src/common/header.js and the footer in
The main layout file that loads the scripts/styles is located in
views/layout.pug. The main entry file for the client is
src/main.js. The main entry file for SASS stylesheets is
The server code is located in
Redux actions and reducers are defined in
src/redux. The backend GraphQL schema and related database functions are defined in
With this basic understanding of the Application structure in mind, let's proceed to the next section of the tutorial where we will seed the Mongo database with some sample data (a list of todo items).