getstream / stream-react-example Goto Github PK

Use React and Redux to build your own feature-rich and scalable social network app! Visit cabin.getstream.io for an overview of all 8 tutorials and a live demo.

Home Page: http://cabin.getstream.io

JavaScript 8.11% HTML 88.32% CSS 3.22% Shell 0.05% HCL 0.14% Smarty 0.17%

stream-react-example's Introduction

8 Step - React/Redux tutorial series

This example application created by getstream.io teaches you how to to build an Instagram style application with activity streams and newsfeeds.

Visit cabin.getstream.io for an overview of all 8 tutorials and a live demo. If you enjoy this tutorial please star this repo.

Note: Cabin requires Node v8.x or above.

Blog Posts

Integrations

Quick start

This quick start is a minimal set of instructions for experienced developers and folks who have already setup their development environment in the past.

For beginners and those new to the project, we strongly recommend starting with the introductory Cabin – React & Redux Example App – Introduction blog post.

Note: Paths below are relative to the root project directory.

0. Setup

Install the API package dependencies:
```
cd ./api && npm install
```
Install the App package dependencies:
```
cd ./app && npm install
```
Install a database server (if necessary) and create a database.
Set local environment configuration in the .env environment.

1. Run the API

Start your database server

Run the following shell command:

cd ./api
source ../env.sh; node index.js

2. Run the App

Run the following shell command:

cd ./app
source ../env.sh; webpack --watch --progress

3. Run the Website

Run the following shell command:
```
npm start
```

4. Win.

Browse to http://localhost:3000.

stream-react-example's People

Contributors

Stargazers

Watchers

Forkers

tracyloisel chrisjenglish oswaldpale jfjcn coerick lukevance miketembo crudbug mkovacek tiengtinh chaabni stasonhub cdfpaz fayway madibalive ruxandrafed tbarbugli sirio7g truongthanh1303 ssalevan phonbopit pramodsvidyarthi anusanthya nagarjun-reddy agbiyani andrew-icf laughingturtle jackson- rawrsome donaldosalas thisismk kaleroberts nullnotfound mkliu hanwro glongh msylvia kingdev29 cquezpro tonybuivn ypan8240 we-eat-brains zuberalimir davidberglund ozmursleen ccheung0926 gentleshark horacioh b-rucel keya254 formaldehydeson kimmoda dieface devrabbiz butonix abrophy amaryana appdirectory binarygrrl dwightgunning deepsun80 reymyster samjaninf ingleashish bbroderick7 jykim16 kdasay16 marcelopspereira linweiwei123 konkura wadsonfourrien 01deckerr nmwallace niteshjain132 holgerw huokedu chiuw nayansphere priscilaaris94 bongsokkang netlogic jhonnymakis slimui devibez olandachocobear vincentroman md1116 riccardo-ravaro devautor mehmetkursunlu jayanthkmr inceptioncode grazerjink jimjampieman dannystella zhileichen resilientred jozue06 ramanasha linuxguy2017

stream-react-example's Issues

How do I update props sent to Activity?

I am following the stream-react-example to create a feed. However, my app has a login process that updates the state with the correct token (passed as this.props.token). I see that this.props.token is updated when StreamApp is rerendered, but for some reason actions related to removing a post via HeaderRight do not work until I manually refresh the page. Creating a post via StatusUpdateForm does not have this issue. I tried to force rerender the Stream component, but only reloading the entire page works. My feeling is that Activity={(props) => {<removed>}} copies the older version of props with the old stream token but does not update again when rerendering StreamApp. If that's true, how do I update props` to contain the latest token? If that is not true, how do I resolve the permissions issue without having the reload the page on receiving a new token?

        <StreamApp apiKey="" appId="" token={this.props.token}>
          { localStorage.getItem("Id") &&
            <StatusUpdateForm
              feedGroup={this.props.submitFeedGroup}
              userId={this.props.submitUserId}
              modifyActivityData={!(this.props.location.pathname === '/')
                ? ((data) => ({...data, 'to': ['timeline:' + this.props.flatFeedUserId]}))
                : undefined
              }
              submitHandler={(e) => {
                alert(e);
              }}
            />
          }
          <FlatFeed
            feedGroup={this.props.flatFeedGroup}
            userId={this.props.flatFeedUserId}
            options={limit_feed}
            notify
            Activity={(props) => {
              const hasSubActivity = Boolean(props.activity.object.object);
              const activity = hasSubActivity
                ? props.activity.object
                : props.activity;
              return (
                localStorage.getItem("Id") ?
                  <Activity
                    {...props}
                    activity={activity}
                    HeaderRight={ (this.props.location.pathname === '/')
                      ? (() => (
                        <Dropdown>
                          <div>
                            <Link
                              onClick={() => {
                                props.onRemoveActivity(props.activity.id);
                              }}
                            >
                              Remove
                            </Link>
                          </div>
                        </Dropdown>
                      ))
                      : undefined
                    }
                    Footer={() => (
                      <div style={{ padding: '8px 16px' }}>
                        <LikeButton {...props} />
                        <CommentField
                          activity={props.activity}
                          onAddReaction={props.onAddReaction}
                        />
                        <CommentList activityId={props.activity.id} />
                      </div>
                    )}
                  /> :
                <Activity
                  {...props}
                  activity={activity}
                />
              );
            }}
          />

Webpack issue in app

I'm getting this error on while running the app using webpack

`10% building 1/1 modules 0 active
Webpack is watching the files…

(node:22516) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
(node:22516) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
70% building 4/4 modules 0 activeTypeError: dep.getResourceIdentifier is not a function
at addDependency (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:796:30)
at iterationOfArrayCallback (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:208:3)
at addDependenciesBlock (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:816:5)
at Compilation.processModuleDependencies (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:827:4)
at afterBuild (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:954:15)
at buildModule.err (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:998:11)
at callback (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:734:5)
at module.build.error (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\lib\Compilation.js:782:12)
at handleParseResult (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:478:12)
at doBuild.err (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:500:6)
at runLoaders (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:358:12)
at C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at iterateNormalLoaders (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
at C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:236:3
at Object.context.callback (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Object.module.exports (C:\wamp\www\cabin2\client\app\node_modules\jsx-loader\index.js:27:8)
at LOADER_EXECUTION (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:119:14)
at runSyncOrAsync (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:120:4)
at iterateNormalLoaders (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
at iterateNormalLoaders (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
at C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:236:3
at Object.context.callback (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Object.module.exports (C:\wamp\www\cabin2\client\app\node_modules\babel-loader\lib\index.js:184:8)
at LOADER_EXECUTION (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:119:14)
at runSyncOrAsync (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:120:4)
at iterateNormalLoaders (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
at Array. (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at provider (C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9)
at C:\Users\M. Awais\AppData\Roaming\npm\node_modules\webpack\node_modules\graceful-fs\graceful-fs.js:115:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:532:3)`

Node Version: v9.9.0
NPM: 6.13.0
Webpack: 3.11.0
webpack-cli: 2.0.10

How can I resolve this issue?

Ability to delete posts / accounts

I'd like to have the ability to delete posts / accounts.

In part to make the app more feature complete and in part to delete my test post / account. Is this something that can be added to the roadmap, or would you potentially be open to PRs?

Connection Timeout @ http://cabin.getstream.io:3000/

I'm not sure if you've noticed but the live demo at http://cabin.getstream.io/demo seems to be broken.

The web console shows the following error:

http://cabin.getstream.io:3000/ Failed to load resource: net::ERR_CONNECTION_TIMED_OUT

Demo not working

Seems like the demo is not working?
All I see is a blank page.

Opening the console, I see that Keen is not defined?

Database import imports nothing

mysql> CREATE DATABASE cabin; USE cabin; SOURCE cabin.sql;
Query OK, 1 row affected (0.00 sec)

Database changed
Query OK, 0 rows affected (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

ERROR 1293 (HY000): Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON
 UPDATE clause
Query OK, 0 rows affected (0.00 sec)

ERROR 1293 (HY000): Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON
 UPDATE clause
Query OK, 0 rows affected (0.00 sec)

ERROR 1293 (HY000): Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON
 UPDATE clause
Query OK, 0 rows affected (0.00 sec)

ERROR 1293 (HY000): Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON
 UPDATE clause
Query OK, 0 rows affected (0.00 sec)

ERROR 1293 (HY000): Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON
 UPDATE clause
Query OK, 0 rows affected (0.00 sec)

ERROR 1293 (HY000): Incorrect table definition; there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON
 UPDATE clause
Query OK, 0 rows affected (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

Query OK, 0 rows affected (0.00 sec)

mysql>

Any idea why?

API and the UX shows error but the image is uploaded to S3

After the part in the series where I configured IMGX, Algolia and Keen, I tried uploading an image out of curiosity. But saw an error message on the upload button as well as the API since I had not put the MapBox credentials.

Even then, the images got uploaded to the S3 bucket. Ideally this should have not been uploaded since it's an error on API and UX.

OS: Ubuntu 16.04; Browser: Chrome

CORS issue

Access to fetch at 'https://www.facebook.com/x/oauth/status?ancestor_origins=https%3A%2F%2Fgetstream.io&client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' from origin 'https://cabin-api.getstream.io:3043' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://www.facebook.com' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

App is not working

Hello there I have go through with tha app setup steps but when I am hitting on http://localhost:3000

I am having error message on chrome console attaching screenshot please have a look

App keeps reloading

I tried tutorial 1 a few weeks ago and at the end of it - It was working just fine. Then after a break I resumed and I re-ran it after Tutorial 6 and it'd do nothing but it kept reloading. I see the Loading... on the browser and nothing else. I thought I misconfigured it so I did a new clone and retried tutorial 1 but it still the same.

Any pointers?

Demo App has 500 Internal server error while getting users on first load

I am getting 500 Internal server error while getting users on first load as in image below

Demo & "Run Webpack & Check Out Your App" not working with Facebook Logged In

Hi guys, thanks for the wonderful work that went into putting together this great tutorial. Before proceeding with the tutorial, I attempted to give the demo a go by logging in through Facebook. It didn't log me in and it kept displaying "loading" continuously. I ignored everything and proceeded to build the app by following the tutorial directives.

After running "npm start" and opening http://localhost:3000 at the "Run Webpack & Check Out Your App" section of the tutorial, instead of getting the landing page, I got the continuous message, "loading."

Immediately I logged out of my Facebook in the browser, however, the landing page showed. I am guessing there is a problem with my Facebook . I have gone to check my Facebook settings to make sure that I have given the proper permissions. Again, I can't take the demo app for a spin through Facebook logging in and my app's landing page won't run while Facebook is logged in. The problem is the same in my Google Chrome, internet explorer, and Firefox. I am also using a Windows 7 PC, by the way. Gracias for your help.

what the correct callback url to add to facebook developer to get the working like the demo and not to stuck on loading screen

Can't find 'env' file

When I run node index.js in the api directory, I get the following error:
Error: ENOENT: no such file or directory, open 'env'

Changing the path in index.js to point directly to the env.sh file seems to fix this.

ER_WRONG_VALUE_FOR_VAR: Variable 'sql_mode' can't be set to the value of 'NO_AUTO_CREATE_USER'

I'm getting the following error when running:

source ../env.sh ;node index.js

ER_WRONG_VALUE_FOR_VAR: Variable 'sql_mode' can't be set to the value of 'NO_AUTO_CREATE_USER'

I'm running on Windows and your setup seem tailored to Linux.

{"code":"InvalidCredentials","message":"No authorization token was found"}

@nparsons08 i have been having issue setting up this app for months as i have now osolved many of the issues my self but still cant get pass this one my url is trendit.pro and my api is trendit.pro/api but every time i click the Facebook login it keeps reloading and i get this error if i visit the api link {"code":"InvalidCredentials","message":"No authorization token was found"} please help me thank you

The demo site https://getstream.io/cabin/demo/ is not working.

@nparsons08 After facebook login authentication, nothing happens. I don't that what is supposed to happen.

After login, the same screen comes again. I think your site is outdated or something.

Demo not working?

The Live Demo doesnt seem to be working at all.
Same when trying to run the app locally.

Typo in code

Was getting an error after each upload and traced it back to this line:

stream-react-example/app/modules/actions/Stream.js

Line 19 in de0c1e8

Promise.all(data.news.map(p => {

I believe it should be data.new.map instead of data.news.map

Thanks

please how do i get https to work for this app

i have been trying to get this app to work on a live server as i have noticed that i need https in order for the app to work with facebook login but i have tried using the free ssl certificates to install lets-encrypt but to no success please how do i get https to work on it... i do have the app working fine on my local machine though but not on the server like yours

Demo still not working

When I try to connect with Facebook, although I enable the email scope

I get these errors in the API several times:

"The following feeds are not configured: 'timeline_flat'"
"The following feeds are not configured: 'notification'"
"The following feeds are not configured: 'timeline_aggregated'"

CORS not working on api

@nparsons08 i think the problem with the cabin app not working is due to cors issue on the resitfy version or somthings please help me fix it my domain name is trendit.pro/api

Uploading a file causes an API error: "TypeError: Cannot read property 'path' of undefined"

A user reported this error via email. I've replicated on the live demo app and my own development environment.

/Users/dwight/projects/git/stream/stream-react-example/api/routes/uploads.js:244
					file.image.path,
					          ^

TypeError: Cannot read property 'path' of undefined
    at /Users/dwight/projects/git/stream/stream-react-example/api/routes/uploads.js:244:16
    at nextTask (/Users/dwight/projects/git/stream/stream-react-example/api/node_modules/async/dist/async.js:5297:14)
    at Object.waterfall (/Users/dwight/projects/git/stream/stream-react-example/api/node_modules/async/dist/async.js:5307:5)
    at Server.<anonymous> (/Users/dwight/projects/git/stream/stream-react-example/api/routes/uploads.js:231:8)
    at next (/Users/dwight/projects/git/stream/stream-react-example/api/node_modules/restify/lib/server.js:997:30)
    at f (/Users/dwight/projects/git/stream/stream-react-example/api/node_modules/once/once.js:25:25)
    at /Users/dwight/projects/git/stream/stream-react-example/api/node_modules/restify-jwt/lib/index.js:104:9
    at /Users/dwight/projects/git/stream/stream-react-example/api/node_modules/restify-jwt/node_modules/jsonwebtoken/index.js:98:18
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickDomainCallback (internal/process/next_tick.js:218:9)

runing the api leads me to this failure

source ../env.sh; node index.js
{
"level": "info",
"message": "GetStream.io - React Example App v1.0.0 ready to accept connections on port listening on port 8000 in development environment",
"timestamp": "Sat Jul 07 2018 21:15:54 GMT+0100 (West Africa Standard Time)"
}
/home/roman/stream-react-example/api/node_modules/mysql/lib/protocol/Parser.js:80
throw err; // Rethrow non-MySQL errors
^

Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client
at Handshake.Sequence._packetToError (/home/roman/stream-react-example/api/node_modules/mysql/lib/protocol/sequences/Sequence.js:52:14)
at Handshake.ErrorPacket (/home/roman/stream-react-example/api/node_modules/mysql/lib/protocol/sequences/Handshake.js:130:18)
at Protocol._parsePacket (/home/roman/stream-react-example/api/node_modules/mysql/lib/protocol/Protocol.js:279:23)
at Parser.write (/home/roman/stream-react-example/api/node_modules/mysql/lib/protocol/Parser.js:76:12)
at Protocol.write (/home/roman/stream-react-example/api/node_modules/mysql/lib/protocol/Protocol.js:39:16)
at Socket. (/home/roman/stream-react-example/api/node_modules/mysql/lib/Connection.js:103:28)
at Socket.emit (events.js:182:13)
at Socket.EventEmitter.emit (domain.js:442:20)
at addChunk (_stream_readable.js:283:12)
at readableAddChunk (_stream_readable.js:264:11)
at Socket.Readable.push (_stream_readable.js:219:10)
at TCP.onread (net.js:638:20)
--------------------
at Protocol._enqueue (/home/roman/stream-react-example/api/node_modules/mysql/lib/protocol/Protocol.js:145:48)
at Protocol.handshake (/home/roman/stream-react-example/api/node_modules/mysql/lib/protocol/Protocol.js:52:23)
at Connection.connect (/home/roman/stream-react-example/api/node_modules/mysql/lib/Connection.js:130:18)
at Object. (/home/roman/stream-react-example/api/index.js:88:4)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:236:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:560:3)
Emitted 'error' event at:
at Connection._handleProtocolError (/home/roman/stream-react-example/api/node_modules/mysql/lib/Connection.js:433:8)
at Protocol.emit (events.js:182:13)
at Protocol.EventEmitter.emit (domain.js:442:20)
at Protocol._delegateError (/home/roman/stream-react-example/api/node_modules/mysql/lib/protocol/Protocol.js:392:10)
at Handshake. (/home/roman/stream-react-example/api/node_modules/mysql/lib/protocol/Protocol.js:154:12)
at Handshake.emit (events.js:182:13)
at Handshake.EventEmitter.emit (domain.js:442:20)
at Handshake.Sequence.end (/home/roman/stream-react-example/api/node_modules/mysql/lib/protocol/sequences/Sequence.js:83:12)
at Handshake.ErrorPacket (/home/roman/stream-react-example/api/node_modules/mysql/lib/protocol/sequences/Handshake.js:132:8)
at Protocol._parsePacket (/home/roman/stream-react-example/api/node_modules/mysql/lib/protocol/Protocol.js:279:23)
[... lines matching original stack trace ...]
at TCP.onread (net.js:638:20)

typo for maps

typo on http://blog.getstream.io/cabin-react-redux-example-app-mapbox/

app/routes/Location/Location.js doesnt exist

its /app/modules/routes/Location/Location.js

what the correct url details for facebook developer i need to get the app working like the demo cus is mine is stuck on reloading

@nparsons08 @tilton @jaapbakker88 please nick what are the correct info i need to aadd to my facebook developer console to make the app work cus on my site https://trendme.pro it just keep reloading after i click the facebook login what i my doing wrong?

Having issues when running "source ../env.sh; webpack --watch --progress"

when executing source ../env.sh; webpack --watch --progress
I get the following output:

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "yarn" to install the CLI via "yarn add -D".
Do you want to install 'webpack-cli' (yes/no): yarn add -D

I then run 'yarn add -D webpack-cli'

Installing 'webpack-cli' (running 'yarn add -D webpack-cli')...
yarn add v1.13.0
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/5] 🔍  Validating package.json...
error [email protected]: The engine "node" is incompatible with this module. Expected version "9.x". Got "11.6.0"
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
undefined

however, there's seems to be some package incompatibilities with node. Can please some advise on how to overcome this issue?

thanks

DB connection in index.js not using port configured in env.sh

If you attempt to configure a custom port in the env.sh file it is not respected by the mysql connection initiated in index.js .

The port key is missing from the config object passed to the createConnection method.

Cannot resolve module 'react/lib/ReactComponentTreeHook'

Hello, I have just cloned the repo and ran the following with errors and therefore cannot run the app:

This is in reference to the "Run Webpack & Check Out Your App" section here http://blog.getstream.io/cabin-react-redux-example-app-introduction

app$ source ../env.sh; webpack --watch --progress
Hash: f5f7ded937ddcef9f8be  
Version: webpack 1.13.3
Time: 8643ms
                  Asset     Size  Chunks             Chunk Names
     ./public/js/app.js  2.24 MB       0  [emitted]  app
./public/css/styles.css    23 kB       0  [emitted]  app
   [0] multi app 28 bytes {0} [built]
    + 715 hidden modules

ERROR in ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js
Module not found: Error: Cannot resolve module 'react/lib/ReactComponentTreeHook' in /Users/seenickcode/code/stream-react-example/app/node_modules/react-dom/lib
 @ ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js 13:29-72

ERROR in ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js
Module not found: Error: Cannot resolve module 'react/lib/ReactComponentTreeHook' in /Users/seenickcode/code/stream-react-example/app/node_modules/react-dom/lib
 @ ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js 15:29-72

ERROR in ./~/react-dom/lib/ReactDOMInvalidARIAHook.js
Module not found: Error: Cannot resolve module 'react/lib/ReactComponentTreeHook' in /Users/seenickcode/code/stream-react-example/app/node_modules/react-dom/lib
 @ ./~/react-dom/lib/ReactDOMInvalidARIAHook.js 14:29-72

ERROR in ./~/react-dom/lib/ReactDebugTool.js
Module not found: Error: Cannot resolve module 'react/lib/ReactComponentTreeHook' in /Users/seenickcode/code/stream-react-example/app/node_modules/react-dom/lib
 @ ./~/react-dom/lib/ReactDebugTool.js 16:29-72

ERROR in ./~/react-dom/lib/ReactChildReconciler.js
Module not found: Error: Cannot resolve module 'react/lib/ReactComponentTreeHook' in /Users/seenickcode/code/stream-react-example/app/node_modules/react-dom/lib
 @ ./~/react-dom/lib/ReactChildReconciler.js 29:27-70 37:31-74

ERROR in ./~/react-dom/lib/flattenChildren.js
Module not found: Error: Cannot resolve module 'react/lib/ReactComponentTreeHook' in /Users/seenickcode/code/stream-react-example/app/node_modules/react-dom/lib
 @ ./~/react-dom/lib/flattenChildren.js 26:27-70 42:33-76

ERROR in ./~/react-dom/lib/checkReactTypeSpec.js
Module not found: Error: Cannot resolve module 'react/lib/ReactComponentTreeHook' in /Users/seenickcode/code/stream-react-example/app/node_modules/react-dom/lib
 @ ./~/react-dom/lib/checkReactTypeSpec.js 29:27-70 71:37-80
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules

Demo wont load

After connecting to the demo with OAuth (I didnt provide my email address in the provided information), an infinite cycle of post/exceptions occur. The iframe is just forever loading..

external "react":1POST http://cabin.getstream.io:8000/users 500 (Internal Server Error)

external "react":1Uncaught (in promise) TypeError: Cannot read property 'notification' of undefined(…)

Intermittent demo breakage (after FB Connect)

The demo seems to be breaking intermittently after authorizing Cabin via Facebook Connect.

The following is logged to the browser console:

external "react":1 Uncaught (in promise) TypeError: Cannot read property 'charAt' of null
    at http://cabin.getstream.io:3000/js/app.js:61765:48
    at Array.map (native)
    at Onboarding.render (http://cabin.getstream.io:3000/js/app.js:61751:35)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://cabin.getstream.io:3000/js/app.js:15609:35)
    at ReactCompositeComponentWrapper._renderValidatedComponent (http://cabin.getstream.io:3000/js/app.js:15635:33)
    at ReactCompositeComponentWrapper.performInitialMount (http://cabin.getstream.io:3000/js/app.js:15145:31)
    at ReactCompositeComponentWrapper.mountComponent (http://cabin.getstream.io:3000/js/app.js:15038:22)
    at Object.mountComponent (http://cabin.getstream.io:3000/js/app.js:8167:36)
    at ReactDOMComponent.mountChildren (http://cabin.getstream.io:3000/js/app.js:14246:45)
    at ReactDOMComponent._createInitialChildren (http://cabin.getstream.io:3000/js/app.js:11235:33)```

App won't load

I'm trying to run the app by following the instructions here: https://getstream.io/blog/cabin-react-redux-introduction/

I followed all the steps but when I go to http://localhost:3000 I get a blank page and my console reads like this:

What's causing this error?

UNMET PEER DEPENDENCY [email protected]

on Ubuntu Xenial host

working through the tutorials and getting this error

http://blog.getstream.io/cabin-react-redux-example-app-stream/

npm install getstream --save
[email protected] /home/devekko/Projects/cabon-app/stream-react-example/app
├── [email protected] 
└── UNMET PEER DEPENDENCY [email protected]

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] requires a peer of react@^15.2.1 but none was installed.
npm WARN [email protected] requires a peer of react@^15.2.1 but none was installed.
npm WARN [email protected] No description

inside the api directory works fine

npm install getstream --save
[email protected] /home/devekko/Projects/cabin-app/stream-react-example/api
└── [email protected] 

npm WARN [email protected] No description

related?
facebook/react-native#7803

it doesn't run on my windows pc

SyntaxError: Use of const in strict mode.

[root@JLLT002 api]# node -v
v0.10.42
[root@JLLT002 api]# source ../env.sh; node index.js

/usr/share/nginx/react/stream-react-example/api/lib/cors/index.js:5
    const defaultAllowHeaders = ['Authorization', 'Content-Type'];
    ^^^^^
SyntaxError: Use of const in strict mode.
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/usr/share/nginx/react/stream-react-example/api/index.js:51:12)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
[root@JLLT002 api]#

I also tried updating nodejs but same error again and again. I am using Cent OS 6.

it is mistake in stream-react-example/api/processes.json file

You write unnecessary code at the end of JSON.

ChannelList reaload everytime parent state change

Hello,
I want to change my location from message -> message/:channelId when the user clicks on the channel. But I face with the problem that every time location changes (eg: message/channel1 -> message/channel2). I find it out because this line in usePaginatedChannels.js. useEffect always run because it can't compare filters. (line 82) I replace it with use-deep-compare-effect and it work.

useEffect(() => {
    queryChannels('reload');
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [filters]);

import useDeepCompareEffect from 'use-deep-compare-effect'

useDeepCompareEffect(() => {
    queryChannels('reload');
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [filters]);

Sorry wrong repo. I will close this.

{"code":"InvalidCredentials","message":"No authorization token was found"}

@dwightgunning i have beent trying to login the app for months and now am getting have sent many message about this but no reply please help me

Deploying to Heroku Errors

Because the api and app are in two different folders I am having a lot of issues deploying this app to heroku. What I have done so far is make a package.json at the root and Im using npm concurrently to run these commands:

"scripts": {
    "app": "cd app && source ../env.sh; webpack --watch --progress",
    "api": "cd api && source ../env.sh; nodemon",
    "www": "cd app && source ../env.sh; npm start",
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "concurrently \"npm run api\" \"npm run app\" \"npm run www\""
  },

When heroku runs "npm start" I get this error and the app wont load:

> [email protected] start /app
> concurrently "npm run api" "npm run app" "npm run www"

[1] 
[1] > [email protected] app /app
[1] > cd app && source ../env.sh; webpack --watch --progress
[1] 
[1] sh: 1: source: not found
[0] 
[0] > [email protected] api /app
[0] > cd api && source ../env.sh; nodemon
[0] 
[0] sh: 1: source: not found
[0] sh: 1: nodemon: not found
[0] npm ERR! file sh
[0] npm ERR! code ELIFECYCLE
[0] npm ERR! errno ENOENT
[0] npm ERR! syscall spawn
[0] npm ERR! [email protected] api: `cd api && source ../env.sh; nodemon`
[0] npm ERR! spawn ENOENT
[0] npm ERR! 
[0] npm ERR! Failed at the [email protected] api script.
[0] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[0] 
[0] npm ERR! A complete log of this run can be found in:
[0] npm ERR!     /app/.npm/_logs/2018-02-17T22_48_01_788Z-debug.log
[2] 
[2] > [email protected] www /app
[2] > cd app && source ../env.sh; npm start
[2] 
[2] sh: 1: source: not found
[0] npm run api exited with code 1
[2] 
[2] > [email protected] start /app/app
[2] > node ./bin/www
[2] 
[1] You tried to inline "JWT_SECRET", but it is not defined.
[1] You tried to inline "DB_USERNAME", but it is not defined.
[1] You tried to inline "DB_HOST", but it is not defined.
[1] You tried to inline "DB_PASSWORD", but it is not defined.
[1] You tried to inline "DB_PORT", but it is not defined.
[1] You tried to inline "MAPBOX_ACCESS_TOKEN", but it is not defined.
[1] You tried to inline "S3_KEY", but it is not defined.
[1] You tried to inline "S3_SECRET", but it is not defined.
[1] You tried to inline "S3_BUCKET", but it is not defined.
[1] You tried to inline "STREAM_APP_ID", but it is not defined.
[1] You tried to inline "STREAM_KEY", but it is not defined.
[1] You tried to inline "STREAM_SECRET", but it is not defined.
[1] You tried to inline "ALGOLIA_APP_ID", but it is not defined.
[1] You tried to inline "ALGOLIA_SEARCH_ONLY_KEY", but it is not defined.
[1] You tried to inline "ALGOLIA_API_KEY", but it is not defined.
[1] You tried to inline "KEEN_PROJECT_ID", but it is not defined.
[1] You tried to inline "KEEN_WRITE_KEY", but it is not defined.
[1] You tried to inline "KEEN_READ_KEY", but it is not defined.
[1] You tried to inline "IMGIX_BASE_URL", but it is not defined.
[1] You tried to inline "API_URL", but it is not defined.
[1] You tried to inline "JWT_SECRET", but it is not defined.
[1] You tried to inline "DB_USERNAME", but it is not defined.
[1] You tried to inline "DB_HOST", but it is not defined.
[1] You tried to inline "DB_PASSWORD", but it is not defined.
[1] You tried to inline "DB_PORT", but it is not defined.
[1] You tried to inline "MAPBOX_ACCESS_TOKEN", but it is not defined.
[1] You tried to inline "S3_KEY", but it is not defined.
[1] You tried to inline "S3_SECRET", but it is not defined.
[1] You tried to inline "S3_BUCKET", but it is not defined.
[1] You tried to inline "STREAM_APP_ID", but it is not defined.
[1] You tried to inline "STREAM_KEY", but it is not defined.
[1] You tried to inline "STREAM_SECRET", but it is not defined.
[1] You tried to inline "ALGOLIA_APP_ID", but it is not defined.
[1] You tried to inline "ALGOLIA_SEARCH_ONLY_KEY", but it is not defined.
[1] You tried to inline "ALGOLIA_API_KEY", but it is not defined.
[1] You tried to inline "KEEN_PROJECT_ID", but it is not defined.
[1] You tried to inline "KEEN_WRITE_KEY", but it is not defined.
[1] You tried to inline "KEEN_READ_KEY", but it is not defined.
[1] You tried to inline "IMGIX_BASE_URL", but it is not defined.
[1] You tried to inline "API_URL", but it is not defined.
[1]  10% building modules 1/1 modules 0 active                        
[1] Webpack is watching the files...
[1] 
Hash: fb514be0ca7735ac8d98                                                    s [1] Version: webpack 3.11.0
[1] Time: 28100ms
[1]                       Asset     Size  Chunks                    Chunk Names
[1]          ./public/js/app.js  2.22 MB       0  [emitted]  [big]  app
[1] ./public/css/styles.min.css    23 kB       0  [emitted]         app
[1]   [10] ./config.js 613 bytes {0} [built]
[1]  [154] ./modules/main.js 3.09 kB {0} [built]
[1]  [379] multi ./modules/main.js 28 bytes {0} [built]
[1]  [697] ./modules/routes/Landing/index.js 247 bytes {0} [built]
[1]  [699] ./modules/routes/Home/index.js 436 bytes {0} [built]
[1]  [703] ./modules/routes/Upload/index.js 245 bytes {0} [built]
[1]  [705] ./modules/routes/Search/index.js 706 bytes {0} [built]
[1]  [709] ./modules/routes/SearchResults/index.js 1.27 kB {0} [built]
[1]  [713] ./modules/routes/Explore/index.js 709 bytes {0} [built]
[1]  [715] ./modules/routes/Trending/index.js 1.15 kB {0} [built]
[1]  [717] ./modules/routes/Profile/index.js 1.15 kB {0} [built]
[1]  [721] ./modules/routes/FollowingActivity/index.js 1.31 kB {0} [built]
[1]  [723] ./modules/routes/Stats/index.js 1.29 kB {0} [built]
[1]  [725] ./modules/routes/Contributions/index.js 1.3 kB {0} [built]
[1]  [727] ./modules/routes/Location/index.js 936 bytes {0} [built]
[1]     + 714 hidden modules
[1] 
[1] ERROR in ./public/js/app.js from UglifyJs
[1] Unexpected character '`' [./public/js/app.js:64514,41]
[1] Child extract-text-webpack-plugin ../node_modules/extract-text-webpack-plugin/dist ../node_modules/css-loader/index.js!../node_modules/sass-loader/lib/loader.js!modules/style.css:
[1]        [0] ../node_modules/css-loader!../node_modules/sass-loader/lib/loader.js!./modules/style.css 23.8 kB {0} [built]
[1]         + 1 hidden module
[1] Child extract-text-webpack-plugin ../node_modules/extract-text-webpack-plugin/dist ../node_modules/css-loader/index.js!../n

Do you know how I should go about setting this app up with heroku?

Live demo not working

The live demo at "https://getstream.io/cabin/demo" doesn't load at all.
It gets stuck on "Loading..." screen

There is one console log --

Can't load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and sub-domains of your app to the App Domains field in your app settings.

Continue support for Node versions < v8.0.0?

The recent Prettier styling (43a3acd) seems to have introduced trailing commas in function calls throughout the codebase. This ES2017 syntax causes errors with Node versions <v8.0.0 as raised in #35.

Should we strip these trailing commas in order to return to supporting Node v7 (and earlier)? Or rather update the README and blog posts to highlight the minimum version of Node?

Error thrown when running "source ../env.sh; node index.js" command in tutorial step

When following the set up tutorial i get an error on the step for the command above "source ../env.sh; node index.js"

The error generated in the terminal is
`/github/stream-react-example/api/index.js:74
);
^

SyntaxError: Unexpected token )
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:389:7)
at startup (bootstrap_node.js:149:9)`

To this point i run the npm install commands in both /api and /app dirs and installed the DB, i think added the db info into the env.sh as well as the getstream id, key and secret.

The error codes to this section of code
server.use( jwt({ secret: config.jwt.secret }).unless({ path: ['/users'], }), );
the link it refers to is the end ');'

I have no idea how to overcome this or what the problem is. If you need more information let me know?

Upload not working 😞

Everytime an upload request is made, it returns:

POST http://localhost:8000/uploads 500 (Internal Server Error)

No error in the terminal, just this error in the console.

Consider adding a License

Hi!

Even though seems like this repository hasn't activity anymore, I think it is still offers a good reference to start building and trying stuff.

Because it hasn't a License, we cannot download and modify the source code in a legal way. So, it somehow loses the purpose of the repository.

Thank you for your time! :D

runing api always fails

Please update code with the one from demo

@nparsons08 please update the code with the demo cus the demo is now working and this is not

api not working on my machine

my api doesn't work always shows this please help me i really need to see this app am using Ubuntu 18.4
internal/modules/cjs/loader.js:583
throw err;
^

Error: Cannot find module 'base64url'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/home/roman/stream-react-example/api/node_modules/jws/lib/sign-stream.js:2:17)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)