An InterPlanetary File System (IPFS) photo gallery - example usage of the Fission IPFS Add-on for Heroku
Home Page: https://talk.fission.codes/t/ipfs-photo-gallery-in-beta-on-heroku/388
License: Apache License 2.0
Very abstract / hard to tell what this does without actually running it
Add a screenshot to the README, because...
To see the demo at all, people need to set up their own instance, or get a link from us directly
Add a link to a demo in the README or as the project website
By default, just the basic react app start script will bind to localhost. You can pass in a HOST variable in calling it of 0.0.0.0
Because of how Chromebook's have Ubuntu containers setup, I had a similar thing :) Need to look at port settings a bit deeper.
BUT -- the actual outcome here should be to move this to running Express, then we can build the other server endpoints I have in mind with Express, all in the same app.
Here's an article about that https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851
That's a screenshot from me running it locally, where I use env variables that work with the CLI.
Get the same thing deployed on Heroku.
Direct Axios use is wordy. Also not showing more typical production usage.
We have a helper library! Use the client API!
Uploaded a bunch of photos via ipfs-deploy and the images don't display http://peaceful-journey-31668.herokuapp.com/
This is likely an issue with the Web API https://github.com/fission-suite/web-api returning an array that is being interpreted as a string.
I cloned ipfs-photo-gallery, attached the heroku interplanetary-fission add on (my user is white listed, and this showed success), and the git pushed to Heroku.
When visiting the heroku app URL, the application error shows, and the following logs are available:
2019-08-13T17:23:41.406367+00:00 app[web.1]: 'http://USER:PASS@1337/ipfs/ipfs/cids/' },
2019-08-13T17:23:41.406369+00:00 app[web.1]: response: undefined,
2019-08-13T17:23:41.406371+00:00 app[web.1]: isAxiosError: true,
2019-08-13T17:23:41.406373+00:00 app[web.1]: toJSON: [Function] }
2019-08-13T17:24:11.370649+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/" host=bmann-ipfs-photo-gallery.herokuapp.com request_id=9db64e59-ef1f-4851-affb-469eed037bdf fwd="198.217.118.148" dyno=web.1 connect=0ms service=30000ms status=503 bytes=0 protocol=https
2019-08-13T17:24:11.372205+00:00 app[web.1]: �[0mGET / �[0m- �[0m- ms - -�[0m
2019-08-13T17:24:12.410694+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=bmann-ipfs-photo-gallery.herokuapp.com request_id=2882f00b-177c-4d40-8d20-9a26248a9d09 fwd="198.217.118.148" dyno=web.1 connect=0ms service=3ms status=404 bytes=380 protocol=https
2019-08-13T17:24:12.284290+00:00 app[web.1]: �[0mGET /favicon.ico �[33m404 �[0m319.637 ms - 172�[0m
2019-08-13T17:24:12.406539+00:00 app[web.1]: �[0mGET /favicon.ico �[33m404 �[0m1.091 ms - 172�[0m
2019-08-13T17:24:12.287380+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=bmann-ipfs-photo-gallery.herokuapp.com request_id=b4a0e4e2-fb05-4372-ad18-22bc3fc44b19 fwd="198.217.118.148" dyno=web.1 connect=0ms service=322ms status=404 bytes=380 protocol=https
Also, USER:PASS are show in the clear in logs.
Here is a screenshot of my Heroku vars:
I will manually edit to make this https://hostless.dev/ipfs
This user has nothing uploaded yet, so the call to CIDs should be empty, so I’ll update with more troubleshooting.
This is a super long console log. You can look at it yourself at https://bmann-gallery1.herokuapp.com/
window.ipfs is not available, downloading from CDN...
index.min.js:2 Invalid asm.js: Unexpected token
libp2p.js:33 Swarm listening on /p2p-circuit/ipfs/QmcTv2xjvfFLpfSrs8je7YKSsriCjcRoanfEzMUUutaMdL
client.js:19 WebSocket connection to 'wss://nyc-1.bootstrap.libp2p.io/ipfs/QmSoLueR4xBeUbY9WZ9xGUUxunbKWcrNFTDAadQJmocnWm' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED
t.exports @ client.js:19
client.js:19 WebSocket connection to 'wss://sgp-1.bootstrap.libp2p.io/ipfs/QmSoLSafTMBsPKadTEgaXctDQVcqN88CNLHXMkTNwMKPnu' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED
t.exports @ client.js:19
client.js:19 WebSocket connection to 'wss://nyc-2.bootstrap.libp2p.io/ipfs/QmSoLV4Bbm51jM9C4gDYZQ9Cy3U6aXMJDAbzgu2fzaDs64' failed: Error during WebSocket handshake: Unexpected response code: 502
t.exports @ client.js:19
client.js:19 WebSocket connection to 'wss://ipfs.runfission.com:4003/ipfs/QmVLEz2SxoNiFnuyLpbXsH6SvjPTrHNMU88vCQZyhgBzgw' failed: Error in connection establishment: net::ERR_CERT_DATE_INVALID
t.exports @ client.js:19
get-ipfs.es5.js:206 Could not connect to peer: /dns4/ipfs.runfission.com/tcp/4003/wss/ipfs/QmVLEz2SxoNiFnuyLpbXsH6SvjPTrHNMU88vCQZyhgBzgw
get-ipfs.es5.js:478 connected to: Array(1)0: "/dns4/ipfs.runfission.com/tcp/4003/wss/ipfs/QmVLEz2SxoNiFnuyLpbXsH6SvjPTrHNMU88vCQZyhgBzgw"length: 1__proto__: Array(0)
client.js:19 WebSocket connection to 'wss://nyc-1.bootstrap.libp2p.io/ipfs/QmSoLueR4xBeUbY9WZ9xGUUxunbKWcrNFTDAadQJmocnWm' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED
t.exports @ client.js:19
dial @ index.js:30
(anonymous) @ queue.js:95
(anonymous) @ timeout.js:91
(anonymous) @ initialParams.js:13
_dialWithTimeout @ queue.js:94
_doWork @ queue.js:52
(anonymous) @ queue.js:33
(anonymous) @ queue.js:11
process @ queue.js:192
(anonymous) @ queue.js:90
(anonymous) @ setImmediate.js:33
f @ VM5174:2
h @ VM5174:2
r @ VM5174:2
client.js:19 WebSocket connection to 'wss://sgp-1.bootstrap.libp2p.io/ipfs/QmSoLSafTMBsPKadTEgaXctDQVcqN88CNLHXMkTNwMKPnu' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED
t.exports @ client.js:19
dial @ index.js:30
(anonymous) @ queue.js:95
(anonymous) @ timeout.js:91
(anonymous) @ initialParams.js:13
_dialWithTimeout @ queue.js:94
_doWork @ queue.js:52
(anonymous) @ queue.js:33
(anonymous) @ queue.js:11
process @ queue.js:192
(anonymous) @ queue.js:90
(anonymous) @ setImmediate.js:33
f @ VM5174:2
h @ VM5174:2
r @ VM5174:2
client.js:19 WebSocket connection to 'wss://nyc-2.bootstrap.libp2p.io/ipfs/QmSoLV4Bbm51jM9C4gDYZQ9Cy3U6aXMJDAbzgu2fzaDs64' failed: Error during WebSocket handshake: Unexpected response code: 502
t.exports @ client.js:19
dial @ index.js:30
(anonymous) @ queue.js:95
(anonymous) @ timeout.js:91
(anonymous) @ initialParams.js:13
_dialWithTimeout @ queue.js:94
_doWork @ queue.js:52
(anonymous) @ queue.js:33
(anonymous) @ queue.js:11
process @ queue.js:192
(anonymous) @ queue.js:90
(anonymous) @ setImmediate.js:33
f @ VM5174:2
h @ VM5174:2
r @ VM5174:2
10client.js:19 WebSocket connection to 'wss://nyc-1.bootstrap.libp2p.io/ipfs/QmSoLueR4xBeUbY9WZ9xGUUxunbKWcrNFTDAadQJmocnWm' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED
t.exports @ client.js:19
dial @ index.js:30
(anonymous) @ queue.js:95
(anonymous) @ timeout.js:91
(anonymous) @ initialParams.js:13
_dialWithTimeout @ queue.js:94
_doWork @ queue.js:52
(anonymous) @ queue.js:33
(anonymous) @ queue.js:11
process @ queue.js:192
(anonymous) @ queue.js:90
(anonymous) @ setImmediate.js:33
f @ VM5174:2
h @ VM5174:2
r @ VM5174:2
client.js:19 WebSocket connection to 'wss://sgp-1.bootstrap.libp2p.io/ipfs/QmSoLSafTMBsPKadTEgaXctDQVcqN88CNLHXMkTNwMKPnu' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED
t.exports @ client.js:19
dial @ index.js:30
(anonymous) @ queue.js:95
(anonymous) @ timeout.js:91
(anonymous) @ initialParams.js:13
_dialWithTimeout @ queue.js:94
_doWork @ queue.js:52
(anonymous) @ queue.js:33
(anonymous) @ queue.js:11
process @ queue.js:192
(anonymous) @ queue.js:90
(anonymous) @ setImmediate.js:33
f @ VM5174:2
h @ VM5174:2
r @ VM5174:2
2client.js:19 WebSocket connection to 'wss://nyc-1.bootstrap.libp2p.io/ipfs/QmSoLueR4xBeUbY9WZ9xGUUxunbKWcrNFTDAadQJmocnWm' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED
t.exports @ client.js:19
dial @ index.js:30
(anonymous) @ queue.js:95
(anonymous) @ timeout.js:91
(anonymous) @ initialParams.js:13
_dialWithTimeout @ queue.js:94
_doWork @ queue.js:52
(anonymous) @ queue.js:33
(anonymous) @ queue.js:11
process @ queue.js:192
(anonymous) @ queue.js:90
(anonymous) @ setImmediate.js:33
f @ VM5174:2
h @ VM5174:2
r @ VM5174:2
client.js:19 WebSocket connection to 'wss://nyc-2.bootstrap.libp2p.io/ipfs/QmSoLV4Bbm51jM9C4gDYZQ9Cy3U6aXMJDAbzgu2fzaDs64' failed: Error during WebSocket handshake: Unexpected response code: 502
t.exports @ client.js:19
dial @ index.js:30
(anonymous) @ queue.js:95
(anonymous) @ timeout.js:91
(anonymous) @ initialParams.js:13
_dialWithTimeout @ queue.js:94
_doWork @ queue.js:52
(anonymous) @ queue.js:33
(anonymous) @ queue.js:11
process @ queue.js:192
(anonymous) @ queue.js:90
(anonymous) @ setImmediate.js:33
f @ VM5174:2
h @ VM5174:2
r @ VM5174:2
3client.js:19 WebSocket connection to 'wss://nyc-1.bootstrap.libp2p.io/ipfs/QmSoLueR4xBeUbY9WZ9xGUUxunbKWcrNFTDAadQJmocnWm' failed: Error in connection establishment: net::ERR_NAME_NOT_RESOLVED
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.