|
| 1 | +# Todo App example with SN7, React and Redux |
| 2 | + |
| 3 | +[](https://travis-ci.org/SenseNet/sn-react-redux-todo-app) |
| 4 | +[](https://codecov.io/gh/SenseNet/sn-react-redux-todo-app) |
| 5 | +[](https://www.codacy.com/app/herflis33/sn-react-redux-todo-app?utm_source=github.com&utm_medium=referral&utm_content=SenseNet/sn-react-redux-todo-app&utm_campaign=Badge_Grade) |
| 6 | +[](https://github.com/SenseNet/sn-client-js/LICENSE.txt) |
| 7 | +[](https://github.com/semantic-release/semantic-release) |
| 8 | +[](http://commitizen.github.io/cz-cli/) |
| 9 | + |
| 10 | +This example is simple todo app built with React+Redux upon Sense/Net ECM which has been prepared to demonstrate how to use the new Sense/Net ECM related libraries [sn-client-js](https://github.com/SenseNet/sn-client-js) |
| 11 | +and [sn-redux](https://github.com/SenseNet/sn-redux). The app and a steps of the related tutorial are based on two awesome Redux courses of Dan Abramov: |
| 12 | +[Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux) and [Building React Applications with Idiomatic Redux](https://egghead.io/courses/building-react-applications-with-idiomatic-redux). |
| 13 | +These two courses are extremely helpful and essential, recommended for everyone who is interested in building scalable apps with [Redux](http://redux.js.org/). |
| 14 | + |
| 15 | +## Quick start |
| 16 | + |
| 17 | +``` |
| 18 | +$ git clone https://github.com/SenseNet/sn-react-redux-todo-app.git |
| 19 | +$ cd sn-react-redux-todo-app |
| 20 | +$ npm install |
| 21 | +$ npm start |
| 22 | +``` |
| 23 | + |
| 24 | +## Settings |
| 25 | + |
| 26 | +To use this example you'll need a Sense/Net ECM portal. To connect the app with the portal set your site's url as the app's siteUrl |
| 27 | + |
| 28 | +``` |
| 29 | +import { SetSiteUrl } from 'sn-client-js'; |
| 30 | +
|
| 31 | +SetSiteUrl('https://mysite.com'); |
| 32 | +``` |
| 33 | + |
| 34 | +Go to your portal's Portal.setting (/Root/System/Settings/Portal.settings) and check the allowed origins. To get the app working you have to add the app's domain as an allowed origin so that the app can send requests to the |
| 35 | +portal and get or set data. |
| 36 | + |
| 37 | +``` |
| 38 | +{ |
| 39 | + AllowedOriginDomains: [ "localhost:13505" ] |
| 40 | +} |
| 41 | +``` |
| 42 | + |
| 43 | +For further information about CORS in Sense/Net ECM check [this](http://wiki.sensenet.com/Cross-origin_resource_sharing) article. |
| 44 | + |
| 45 | +The example app uses one of the built-in TaskList Content in the default Sense/Net ECM install (/workspaces/Project/budapestprojectworkspace/Tasks). If you removed this Content and its children tasks earlier |
| 46 | +or want to try with another TaskList change the value of the ```url``` variable in ```VisibleTodoList.tsx``` and ```AddTodo.tsx``` to the chosen list's path. |
| 47 | + |
| 48 | +The example app demonstrates not only how to fetching data but also Content creation and delete. The app doesn't provide authentication because of it's simplicity so you have to make some permission changes |
| 49 | +in your Sense/Net ECM portal to let Visitor users adding and removing tasks from the chosen parent list. |
| 50 | +If you are not familiar with Sense/Net's permission system check the following wiki articles: |
| 51 | +* [Sense/Net ECM Permission System](http://wiki.sensenet.com/Permission_System) |
| 52 | +* [How to set permissions on a content in Sense/Net ECM](http://wiki.sensenet.com/How_to_set_permissions_on_a_content) |
| 53 | + |
| 54 | +## Deploy |
| 55 | + |
| 56 | +To make trying out the app quick and simple there's a gulpfile added to the repository with all of the required tasks. |
| 57 | + |
| 58 | +To build the project run |
| 59 | + |
| 60 | +``` |
| 61 | +gulp build |
| 62 | +``` |
| 63 | + |
| 64 | +It will transpile the .ts and .tsx files to JavaScript and copy them along with the sourcemaps to the dist folder. |
| 65 | + |
| 66 | +To run the tests and create a coverage report run |
| 67 | + |
| 68 | +``` |
| 69 | +gulp test |
| 70 | +``` |
| 71 | + |
| 72 | +To create a bundle.js with all the required modules run |
| 73 | +``` |
| 74 | +gulp bundle |
| 75 | +``` |
| 76 | +It uses Browserify to bundle the JavaScript modules into on file and place it to the 'dist' folder. |
| 77 | + |
| 78 | +If you want to run all the gulp tasks at once use simply the ```gulp``` command. |
| 79 | + |
| 80 | +## Related documents |
| 81 | + |
| 82 | +* [sn-client-js API reference](http://www.sensenet.com/documentation/sn-client-js/index.html) |
| 83 | +* [sn-redux API reference](http://www.sensenet.com/documentation/sn-redux/index.html) |
| 84 | +* [Redux](https://github.com/reactjs/redux) |
| 85 | +* [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux) |
| 86 | +* [Building React Applications with Idiomatic Redux](https://egghead.io/courses/building-react-applications-with-idiomatic-redux) |
0 commit comments