Dev.Series — Deploy your ÐApp on the evan.network
In my last blogpost we created a simple ÐApp, which shows you the greeting of a Greeter contract. This development happened all locally on your laptop or pc. Now, we want to deploy the ÐApp on the IPFS storage servers of the evan.network and register the ÐApp with an associated ENS address on the evan.network, too.
So the first question is: What the heck is the ENS on evan.network and where can I get an address for it.
What is the ENS?
The ENS is like the DNS on the internet, just for Ethereum :-) The Ethereum name service is a smart contract, in which you can claim custom names and register contract addresses on them. For example, you can deploy a smart contract on evan.network and then, you can register the contract address on the ENS domain yourcustomdomain.evan. On this way, you can forget the contract address and access the contract by calling the ENS smart contract. Then you get your contract address back on the ENS registered address yourcustomdomain.evan.
The ENS smart contract on evan.network is managed by the organization, so you can claim different addresses only from us. To make this process easier, we have made the domain *.fifs.registrar.test.evan open for all, so you can claim all different domains under this parent.
Get a demo ENS address on evan.network
We have released a new generator version to claim custom ENS addresses for your development ÐApps.
Simply update your global installation of the generator with
npm update -g generator-evanAfter updating the generator, you must generate a new project space to get a custom ENS address on the evan.network. Upon creating the new project space, you will be asked if you want to claim a custom ENS address for your project.
Provide your generated mnemonic to the console window, and with this account your custom ENS domain will be claimed.
All demo addresses on evan.network testnet are free.
The generator will claim the address:
[YOUR PROJECT NAME].fifs.registrar.test.evanYour generated ÐApp will be deployed to this ENS address on the evan.network afterwards.
Generate a new sample ÐApp for the deployment
Now navigate to the created folder and run npm install after the generation. When the installation process is done, you can generate a custom ÐApp in your project folder.
We also generate a Single Page ÐApp with the generator in your newly created project folder.
After the generation of the ÐApp, we have to build the JS files out of the Typescript Angular application like the last time with the command
npm run dapps-buildWhen the application is built, you can run the ÐApp locally, as showed in the last blogpost, with the command:
npm run serveThen you can view your sample ÐApp on the url http://localhost:3000/dev.html#/[YOURDAPPNAME].[YOURPROJECTNAME].fifs.registrar.test.evan (in my example it is sampledapp.greeterens.fifs.registrar.test.evan)
When you have finished your development on the ÐApp, you can deploy it to the remote evan.network.
Where and how will my ÐApp be deployed?
The deployment for a ÐApp on the evan.network is separated into two steps.
- Upload the JS/ CSS sources to the evan.network IPFS
The generated files for each ÐApp will be uploaded as a folder to the evan.network IPFS servers. The IPFS server returns an unique hash for the folder. This hash will be attached to the DBCP definition
2. Set the DBCP definition for the ÐApp on the ENS name (or contract ID)
The DBCP definition is a JSON file, which defines the needed files to display your ÐApp. Its like the package.json with dependencies and entrypoints for a ÐApp on evan.network. You can read more about DBCP at https://github.com/evannetwork/dbcp
When you now want to deploy your ÐApp to the remote source, go to your project folder and run the command
npm run deployThis opens a deployment tool for persisting your ÐApp on the evan.network. Choose the default values when you are asked on which domain you want to deploy a ÐApp.
Afterwards, you can select what you want to deploy. In this step, you should choose the menu point ‘Specific ÐApp’ or ‘All ÐApp’. When you choose ‘Specific ÐApp’, you can select all available and built ÐApps, which exist in your project folder. When you choose “All ÐApps”, the script takes all current built ÐApp and deploys them on the evan.network.
When you have selected your ÐApps, confirm the selection with ‘enter’. You can also increase or replace the current deployed version and choose between minification of the code or not.
Now the process described above will be executed for all ÐApps. Afterwards, you can add your deployed ÐApp on the evan.network remote dashboard with your custom ENS address.
In the next post, I will show you how you can use the evan.network “DataContract” smart contract template to store simple values or images on the blockchain smart contract.
If you have any further questions, feel free to contact the evan.network team via gitter or via our contact form.
For more information follow us on twitter!
