Project setup

First, we need to run IPFS by using the appropriate configuration, which will differ from the configuration that we used earlier in the chapter. If IPFS is still running from earlier, first, stop the process.

Next, we need to apply some configurations that will allow IPFS to perform cross-origin requests, or Cross-Origin Resource Sharing (CORS). This will allow our web page, which will be run by a local web server on its own local domain, to interact with the local IPFS gateway, itself hosted locally on a different domain:

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

Having done this, we can start IPFS again by using the ipfs daemon command.

For the purposes of this project, we will run our web page on a local development web server. An exercise for the reader would be to follow the instructions earlier in this chapter to upload the site itself to IPFS, thereby giving us an IPFS-hosted IPFS file uploader!

First, let's create our project directory structure:

$ mkdir packtIpfsUploader
$ cd packtIpfsUploader

We can initialize npm and walk through the suggested values:

npm init

Then, we'll install the web server package:

npm install --save lite-server

And finally, we'll edit the package.json file to include a way to easily start the server:

 ...
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "dev": "lite-server"
 },
 ...