Background & CryptoDoggies
CryptoDoggies is a small ERC721 Token Application that I create as part of a Udemy course I taught about a month ago. At the end of the tutorials I had the site up and running on GitHub pages since all the code is more or less just static javascript, html and css.
I'd always known about IPFS but never really took the plunge on actually trying to deploy anything using it; partially due to not having a project but mostly due to laziness.
That changed tonight however when I decided Id give it a crack on the code written for CryptoDoggies... and it turns out it was dang easy.
Installing IPFS
Installing IPFS is simple, more detailed instructions can be found on https://ipfs.io/docs/install/, however If you're running on MacOS you can use brew to install it really easily using the following command:
brew install ipfs
Once installed you'll need to init your IPFS configuration by running the following:
$ ipfs init
initializing IPFS node at /Users/nathan/.ipfs
generating 2048-bit RSA keypair...done
peer identity: QmQjxYU9dL9K1c2GuqyJg6YAB85ntmxENaX4BS7hrf4HqW
to get started, enter:
ipfs cat /ipfs/QmS4ustL54uo8FzR9455qaxZwuMiUhyvMcX9Ba8nUH4uVv/readme
This will create you an identifier that will serve are your identity in the swarm of IPFS peers, mine is:
QmQjxYU9dL9K1c2GuqyJg6YAB85ntmxENaX4BS7hrf4HqW
Running the ipfs cat command they recommend will bring up the following readme.
$ ipfs cat /ipfs/QmS4ustL54uo8FzR9455qaxZwuMiUhyvMcX9Ba8nUH4uVv/readme
Hello and Welcome to IPFS!
██╗██████╗ ███████╗███████╗
██║██╔══██╗██╔════╝██╔════╝
██║██████╔╝█████╗ ███████╗
██║██╔═══╝ ██╔══╝ ╚════██║
██║██║ ██║ ███████║
╚═╝╚═╝ ╚═╝ ╚══════╝
If you're seeing this, you have successfully installed
IPFS and are now interfacing with the ipfs merkledag!
-------------------------------------------------------
| Warning: |
| This is alpha software. Use at your own discretion! |
| Much is missing or lacking polish. There are bugs. |
| Not yet secure. Read the security notes for more. |
-------------------------------------------------------
Check out some of the other files in this directory:
./about
./help
./quick-start <-- usage examples
./readme <-- this file
./security-notes
Finally start the IPFS daemon by running the following:
$ ipfs daemon
Initializing daemon...
Swarm listening on /ip4/127.0.0.1/tcp/4001
Swarm listening on /ip6/::1/tcp/4001
Swarm listening on /p2p-circuit/ipfs/QmQjxYU9dL9K1c2GuqyJg6YAB85ntmxENaX4BS7hrf4HqW
Swarm announcing /ip4/127.0.0.1/tcp/4001
Swarm announcing /ip6/::1/tcp/4001
API server listening on /ip4/127.0.0.1/tcp/5001
Gateway (readonly) server listening on /ip4/127.0.0.1/tcp/8080
View Swarm
You can view the connected notes to your daemon by running the following:
ipfs swarm peers
/ip4/1.53.84.133/tcp/4001/ipfs/QmcqE9TEhBj7W72wLYtfoN8WmtgBT2u4qfL7ym1Y6C6Kug
/ip4/103.254.153.113/tcp/9147/ipfs/QmRLuxGLHjaQ4LZd3JnFaFptFw5pAGdVVmtSKqkuqUonu5
/ip4/104.131.75.54/tcp/4001/ipfs/Qmc15cc5DVKURgyBz82GYoBJsdZPtaAfA7u9i5yTAmD97R
/ip4/104.154.195.157/tcp/4001/ipfs/QmdZZdh63ZVCGdqnyJ3eBaup71bReQmFTZ7hkxxnufEyTd
/ip4/104.223.59.174/tcp/4001/ipfs/QmeWdgoZezpdHz1PX8Ly8AeDQahFkBNtHn6qKeNtWP1jB6
/ip4/104.236.151.122/tcp/4001/ipfs/QmSoLju6m7xTh3DuokvT3886QRYqxAzb1kShaanJgW36yx
/ip4/104.236.176.52/tcp/4001/ipfs/QmSoLnSGccFuZQJzRadHn95W2CrSFmZuTdDWP8HXaHca9z
/ip4/104.236.176.59/tcp/4001/ipfs/QmQ8MYL1ANybPTM5uamhzTnPwDwCFgfrdpYo9cwiEmVsge
/ip4/104.236.179.241/tcp/4001/ipfs/QmSoLPppuBtQSGwKDZT2M73ULpjvfd3aZ6ha4oFGL1KrGM
/ip4/104.236.76.40/tcp/4001/ipfs/QmSoLV4Bbm51jM9C4gDYZQ9Cy3U6aXMJDAbzgu2fzaDs64
/ip4/106.14.194.229/tcp/4001/ipfs/Qmeks8FTvRvVhDNErVMv1nDo5ouTpqvC6PEtNr8aZpPZvM
/ip4/106.185.33.144/tcp/4001/ipfs/QmcWd3iB7Ncn4d8icq2ZmTGqjAbQqbaGRu3w9tNAyXVwcn
/ip4/107.170.114.33/tcp/4001/ipfs/QmSYgR8E3da3PPWprowaU1QN5B5nuEMSWH79qZN6rvSRCk
/ip4/108.168.59.253/tcp/32017/ipfs/QmRiAM4XyMqWhiWmwFwVfD8uLQf1SQaYQJqp7tRQ1NUFSh
/ip4/108.196.200.233/tcp/4011/ipfs/QmQ5hdj2zaV1BXGxkTU2sGAP75v4fqnxZMbs7CDc8a3MZg
/ip4/108.61.187.18/tcp/4001/ipfs/QmdweBdRgazhfTaiPMUD4PQaBDYp8q3M5jAgMepyPg4RBD
/ip4/109.190.250.124/tcp/53325/ipfs/QmTXXDvDs1ToNEudqSXG4RxUABAnTyDPwomKkWbVaG5CyZ
/ip4/109.197.214.120/tcp/29506/ipfs/QmRicz2SktKRXiH9DGPPYrL4ZqsVLrBhuPVz2qkK5pRCKn
You'll get a list of endpoint that are connects to you, some of these peers might end up seeding some of our site files.
Moving CryptoDoggies to IPFS
Now we want to move the files in our project over to IPFS, If you want to follow along the repository for CryptoDoggies is still updated at https://github.com/t04glovern/cryptodoggies
Navigate to the root directory of the cryptodoggies project and run the following to add the files in the docs/ directory to IPFS
$ ipfs add -r docs/
added QmcTAqNZu3p6sNmguJej9od1v8NKmcs8dTRFfQFQHdptys docs/CNAME
added QmauV7yMSwzRakesrpqbPiQ6faQKBAtaobCGc99RveN5Rg docs/CryptoDoggies.json
added QmW35Gf7cJFcxKKKb5YPFUsebmyAewBGgPgMytph8JRsaa docs/banner-udemy.png
added QmQRyd4k2p8DeuKCwPQoSZcRd1o3WHxF4gmTmedjAWjgHV docs/banner.png
added QmWyfMYN9u4ub7yHqYeF4rSRxgzcdhrxhk7tm6Wf38dHe2 docs/css/card.css
added QmcwTenWTMPqn8jZspDp9Lu7AF8scps4umwHAmcjUYhaGz docs/css/main.css
added QmaTghkDoQsbpFGSnPDHD1c9Lbmw4rUQAnNM9SPFVhnuqZ docs/css/ribbon.css
added QmQLs7ytPa1Fytp5jCLTa3enoTytcMtenvUoMovHjoScWH docs/img/favicon.ico
added QmSKV5jRHUvD4wUoEC7FVUhXhAY9NXaczXSrmaZtXo9THe docs/img/pawbg.jpg
added QmWdzVMEeTs2ZgfDurzofrNZcmBSgw52XESnQCEg1ndZYm docs/img/udemy-cryptodoggies.png
added QmPyAAM1jtwKL8HEKPjbmzNqx8AXVvFhJsA8PSMawK2UKD docs/index.html
added QmT4pAvhpqBz7rChb6SxSguz8HawUPpZxvs6Jmbm4EFrmD docs/js/doggies.js
added QmNgMFn7FWQfvoBxSMNx6ZaRUfXq2eoDdgsTnEaXvnc9HU docs/js/lib/bignumber.js.map
added QmYY8jThWcv6pRCpzLjXLe877yqqBxRF36u2XZdb226yh8 docs/js/lib/bignumber.min.js
added QmQ2dVD7EA5W2KhAvaTEL3m7k3DzXcUTdRBraztA2AhfMx docs/js/lib/doggyidparser.js
added Qme3Vucnh7TuQN7q8pb5qeMoUQung7bzCqRFykgMdNxpUW docs/js/lib/truffle-contract.min.js
added QmXN6AkHJtYh8ZrbZHFvfxrJRLq8nW71BYM9fCXhkGDNJL docs/js/lib/web3.min.js
added QmNrAfvdz5WnRoSoMdMjxk6FfkD4Pcu2SzofxrmhJzmALv docs/css
added QmcgZQGd6fgTUz3yNx1FG3zo3MiycgETFSWeC5LTMZ89ih docs/img
added QmNmEY5ATv76sRMFdxHE5ve1hf8LmyvWddEAzuzdyfNEmD docs/js/lib
added QmTtTDDaDMDGQkjuxtcijPmUg6GisqZhrWUT7ssWPu5oQF docs/js
added QmUG11KGVbNMPehiEwADXDRazH1SNXYhSehzrbNWpKT111 docs
You'll see all the files that make up the CryptoDoggies site queued up and ready to be pushed to IPFS. To publish these files simply run ipfs name publish with the last hash in the list (the once listed as docs):
$ ipfs name publish QmUG11KGVbNMPehiEwADXDRazH1SNXYhSehzrbNWpKT111
This process can take quite some time depending on how many files your distributing to the nodes in the swarm. Eventually you should receive a confirmation message like the following:
Published to QmQjxYU9dL9K1c2GuqyJg6YAB85ntmxENaX4BS7hrf4HqW: /ipfs/QmUG11KGVbNMPehiEwADXDRazH1SNXYhSehzrbNWpKT111
Now just take the first hash (the one after Published to and navigate to gateway.ipfs.io/ipns/<hash> in your browser.
Mine for example is: gateway.ipfs.io/ipns/QmQjxYU9dL9K1c2GuqyJg6YAB85ntmxENaX4BS7hrf4HqW/
LOADTIMES WILL VARY
Remember, this is effectively just P2P for your website, similarly to downloading from Torrents, there needs to be seeds of your files ready to offer them up, eventually you should see your site
Updating Content
If you ever need to update the content at your address you can run the same commands in order again and redeploy to your address. You should end up with the same endpoint as this is your peer identity.
Conclusion
This summarises the basics of deployment, honestly it really is a piece of cake (I regret not doing it sooner). If you're interested in taking the Full Smart Contract Development: CryptoDoggies Token Game Udemy course, you can use one of my coupons to get it discounted https://www.udemy.com/cryptodoggies/?couponCode=STEEMIT2018.
