How to run IPFS with Embark framework demo program

Question

I'm pretty new to blockchains, I've learnt from various sources that we can use the embark framework along with IPFS to easilt create a DApp.

I've started by running all the instructions from the embark github page

I ran the following command to create the demo of all the functionality

$ embark demo
$ cd embark_demo

then running the embark simulator

$ embark simulator

everything works fine, even the localhost page works , and I'm able to get and set int values. Blockchains with Embark

However I'm not able to use the IPFS tab of the page? It gives the following error : "The node you are using does not support IPFS. Please ensure CORS is setup for the IPFS node."

However I've successfully run the IPFS Daemon properly

I've also uncommented this line from the index.js file

EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'})

Index.js

 /*globals $, SimpleStorage, document*/ var addToLog = function(id, txt) { $(id + " .logs").append("<br>" + txt); }; // =========================== // Blockchain example // =========================== $(document).ready(function() { $("#blockchain button.set").click(function() { var value = parseInt($("#blockchain input.text").val(), 10); SimpleStorage.set(value); addToLog("#blockchain", "SimpleStorage.set(" + value + ")"); }); $("#blockchain button.get").click(function() { SimpleStorage.get().then(function(value) { $("#blockchain .value").html(value.toNumber()); }); addToLog("#blockchain", "SimpleStorage.get()"); }); }); // =========================== // Storage (IPFS) example // =========================== $(document).ready(function() { //var ipfs = window.IpfsApi('localhost', '5001'); var ipfs = ipfsAPI({ host: 'localhost', port: '5001', protocol: 'http' }); // automatic set if config/storage.json has "enabled": true and "provider": "ipfs" EmbarkJS.Storage.setProvider('ipfs', { server: 'localhost', port: '5001' }) $("#storage .error").hide(); EmbarkJS.Storage.ipfsConnection.ping() .then(function() { $("#status-storage").addClass('status-online'); $("#storage-controls").show(); }) .catch(function(err) { if (err) { console.log("IPFS Connection Error => " + err.message); $("#storage .error").show(); $("#status-storage").addClass('status-offline'); $("#storage-controls").hide(); } }); $("#storage button.setIpfsText").click(function() { var value = $("#storage input.ipfsText").val(); EmbarkJS.Storage.saveText(value).then(function(hash) { $("span.textHash").html(hash); $("input.textHash").val(hash); }); addToLog("#storage", "EmbarkJS.Storage.saveText('" + value + "').then(function(hash) { })"); }); $("#storage button.loadIpfsHash").click(function() { var value = $("#storage input.textHash").val(); EmbarkJS.Storage.get(value).then(function(content) { $("span.ipfsText").html(content); }); addToLog("#storage", "EmbarkJS.Storage.get('" + value + "').then(function(content) { })"); }); $("#storage button.uploadFile").click(function() { var input = $("#storage input[type=file]"); EmbarkJS.Storage.uploadFile(input).then(function(hash) { $("span.fileIpfsHash").html(hash); $("input.fileIpfsHash").val(hash); }); addToLog("#storage", "EmbarkJS.Storage.uploadFile($('input[type=file]')).then(function(hash) { })"); }); $("#storage button.loadIpfsFile").click(function() { var hash = $("#storage input.fileIpfsHash").val(); var url = EmbarkJS.Storage.getUrl(hash); var link = '<a href="' + url + '" target="_blank">' + url + '</a>'; $("span.ipfsFileUrl").html(link); $(".ipfsImage").attr('src', url); addToLog("#storage", "EmbarkJS.Storage.getUrl('" + hash + "')"); }); }); // =========================== // Communication (Whisper) example // =========================== $(document).ready(function() { $("#communication .error").hide(); web3.version.getWhisper(function(err, res) { if (err) { $("#communication .error").show(); $("#communication-controls").hide(); + $("#status-communication").addClass('status-offline'); } else { EmbarkJS.Messages.setProvider('whisper'); $("#status-communication").addClass('status-online'); } }); $("#communication button.listenToChannel").click(function() { var channel = $("#communication .listen input.channel").val(); $("#communication #subscribeList").append("<br> subscribed to " + channel + " now try sending a message"); EmbarkJS.Messages.listenTo({ topic: [channel] }).then(function(message) { $("#communication #messagesList").append("<br> channel: " + channel + " message: " + message); }); addToLog("#communication", "EmbarkJS.Messages.listenTo({topic: ['" + channel + "']}).then(function(message) {})"); }); $("#communication button.sendMessage").click(function() { var channel = $("#communication .send input.channel").val(); var message = $("#communication .send input.message").val(); EmbarkJS.Messages.sendMessage({ topic: channel, data: message }); addToLog("#communication", "EmbarkJS.Messages.sendMessage({topic: '" + channel + "', data: '" + message + "'})"); }); }); 

Index.HTML

 <html> <head> <title>Embark - SimpleStorage Demo</title> <link rel="stylesheet" href="css/app.css"> <script src="js/app.js"></script> </head> <body class="container"> <h3>Embark - Usage Example</h3> <ul class="nav nav-tabs" role="tablist" id="myTabs"> <li role="presentation" class="active"><a href="#blockchain" aria-controls="blockchain" role="tab" data-toggle="tab">Blockchain</a></li> <li role="presentation"><a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">Decentralized Storage (IPFS)<span class="pull-right" id="status-storage"></a></li> <li role="presentation"><a href="#communication" aria-controls="communication" role="tab" data-toggle="tab">P2P communication (Whisper/Orbit)<span class="pull-right" id="status-communication"></span></a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="blockchain"> <h3> 1. Set the value in the blockchain</h3> <div class="form-group form-inline"> <input type="text" class="text form-control" value="10"> <button class="set btn btn-primary">Set Value</button> <p>Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.</p> </div> <h3> 2. Get the current value</h3> <div class="form-group"> <div> current value is <span class="value"></span> </div> <button class="get btn btn-primary">Get Value</button> <p>Click the button to get the current value. The initial value is 100.</p> </div> <h3> 3. Contract Calls </h3> <p>Javascript calls being made: </p> <div class="logs"> </div> </div> <div role="tabpanel" class="tab-pane" id="storage"> <div class="error alert alert-danger" role="alert">The node you are using does not support IPFS. Please ensure <a href="https://github.com/ipfs/js-ipfs-api#cors" target="_blank">CORS</a> is setup for the IPFS node.</div> <div id="storage-controls"> <h3>Save text to IPFS</h3> <div class="form-group form-inline"> <input type="text" class="ipfsText text form-control" value="hello world!"> <button class="setIpfsText btn btn-primary">Save</button> <p>generated Hash: <span class="textHash"></span></p> </div> <h3>Load text from IPFS given an hash</h3> <div class="form-group form-inline"> <input type="text" class="textHash text form-control" size="60"> <button class="loadIpfsHash set btn btn-primary">Load</button> <p>result: <span class="ipfsText"></span></p> </div> <h3>upload file to ipfs</h3> <div class="form-group form-inline"> <input type="file" class="form-control"> <button class="uploadFile set btn btn-primary">upload</button> <p>generated hash: <span class="fileIpfsHash"></span></p> </div> <h3>Get file or image from ipfs</h3> <div class="form-group form-inline"> <input type="text" class="fileIpfsHash form-control" size="60"> <button class="loadIpfsFile set btn btn-primary">Load</button> <p>file available at: <span class="ipfsFileUrl"></span></p> <p><img class="ipfsImage" src=""></p> </div> <p>Javascript calls being made: </p> <div class="logs"> <br> EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'}) </div> </div> </div> <div role="tabpanel" class="tab-pane" id="communication"> <div class="error alert alert-danger" role="alert">The node you are using does not support Whisper</div> <div id="communication-controls"> <h3>Listen To channel</h3> <div class="form-group form-inline listen"> <input type="text" class="channel text form-control" placeholder="channel"> <button class="listenToChannel set btn btn-primary">Start Listening</button> <div id="subscribeList"></div> <p>messages received: <p> <div id="messagesList"></div> </div> <h3>Send Message</h3> <div class="form-group form-inline send"> <input type="text" class="channel text form-control" placeholder="channel"> <input type="text" class="message text form-control" placeholder="message"> <button class="sendMessage set btn btn-primary">Send Message</button> </div> <p>Javascript calls being made: </p> <div class="logs"> <br> EmbarkJS.Messages.setProvider('whisper') </div> </div> </div> </div> </body> </html> 

The contract in solidarity :

 pragma solidity ^ 0.4 .7; contract SimpleStorage { uint public storedData; function SimpleStorage(uint initialValue) { storedData = initialValue; } function set(uint x) { storedData = x; } function get() constant returns(uint retVal) { return storedData; } } 

The output is as follows and none of the buttons work, please tell me what's wrong: IPFS tab

I have also tried to run the following commands as per other websites with little to no success

$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin "[*]"
$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials "[\"true\"]"
$ ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods "[\"PUT\", \"POST\", \"GET\"]"

Answer 1

Solved it. Using

ipfs config --json API.HTTPHeaders.Access-Control-Allow-Credentials '["true"]'
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Methods '["PUT", "POST", "GET"]'
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Headers '["Authorization"]'
ipfs config --json API.HTTPHeaders.Access-Control-Expose-Headers '["Location"]'
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["*"]'

Answer 2

I am not sure exactly which one worked for me since I did both before killing and re-running embark simulator and embark run , however running these two commands seemed to fix the issue:

ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin "[\"*\"]"
ipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin "[\"http://localhost:8000\"]"

Also I have no idea if running that * command is dangerous, so use at your own risk!

Answer 3

不要忘记运行ipfs（在守护进程模式下）$ ipfs守护进程