Todo App example with SN7, React and Redux

---

This package is not under active development. You can find our latest packages in the sensenset/sn-client monorepo.

---

This example is simple todo app built with React+Redux upon sensenet which has been prepared to demonstrate how to use the new sensenet related libraries sn-client-js and sn-redux. The app and a steps of the related tutorial are based on two awesome Redux courses of Dan Abramov: Getting Started with Redux and Building React Applications with Idiomatic Redux. These two courses are extremely helpful and essential, recommended for everyone who is interested in building scalable apps with Redux.

Quick start

$ git clone https://github.com/SenseNet/sn-react-redux-todo-app.git
$ cd sn-react-redux-todo-app
$ npm install
$ npm start

Settings

To use this example you'll need a sensenet portal. To connect the app with the portal create a repository and set its RepositoryUrl

import { Repository } from 'sn-client-js';

const repository = new Repository.SnRepository({
  RepositoryUrl: 'https://sn-services/'
});

If you've created your app, with sn-client-cli you can set the RepositoryUrl in the related config file (sn.config.js in your projets root) too.

{
    RepositoryUrl: "https://sn-services/"
}

In this case you can define your repository the following way:

import { Repository } from 'sn-client-js';
import * as snConfig from './sn.config.js';

const repository = new Repository.SnRepository(snConfig);

To allow outer origins go to your portal's Portal.setting (/Root/System/Settings/Portal.settings). 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 portal and get or set data.

{
   AllowedOriginDomains: [ "localhost:13505" ]
}

For further information about CORS in sensenet check this article.

The example app uses a TaskList Content that should be created in sensenet portal. In the downloadable example it is '/Root/Sites/Default_Site/tasks' so if you want to try it with your custom sensenet install (no matter which one, eg, services, webpages, etc), you can create it at the same path, or modify it in the VisibleTodoList.tsx and the App.tsx files.

The example app demonstrates not only how to fetching data but also Content creation, edit and delete. The app provides authentication (for further information please check the docs with the 'jwt' tag), please check that the permission of the users are set correctly to run the mentioned applications.

If you are not familiar with sensenet's permission system check the following wiki articles:

• sensenet Permission System
• How to set permissions on a content in sensenet

Deployment

The app became now create-react-app based, which means you can use its great tools with no extra configurations. Since all our related projects are written in Typescript we used here [create-react-app-typescript].(https://github.com/wmonk/create-react-app-typescript).

To build the project run

npm build

It will transpile the .ts and .tsx files to JavaScript and copy them along with the sourcemaps to the dist folder along with the .css files.

To run the tests

npm test

Related documents

• sn-client-js API reference
• sn-redux API reference
• Redux
• Getting Started with Redux
• Building React Applications with Idiomatic Redux