HW6: Midterm

CS 359B Spring 2018

Deadline:  Monday, May 14, 2018, 11:00 am

Goal

Your goal is to have the first working version of your project deployed for the midterm studio class on Monday. During the studio your classmates will actually use your dapp from their computers. So it's important for your app to be deployed on a web server.

Goal:
A working “v1” web app (or equivalent) on https://dapps.stanford.edu/your-project-name with its associated smart contract deployed on the Rinkeby test network. (see FAQ)

Midterm-studio, in class instructions

As presenter

Each team will have 5 minutes, including time for feedback. During those 5 minutes other students will try your dapp from their computers. You will be operating the class computer at the front to demonstrate others how to use your dapp, through a concrete scenario.

Prepare to speak a concrete scenario. Here is an example scenario for the cryptotrees dapp:

Hey everyone your goal is to buy a new cryptotree and then make it party until it is hungover. To do this, first click on this button, then move to this tab, and click on that button repeatedly until your tree pukes.

As audience

  1. Make sure you have enough Ether on the Rinkeby testnet before class so that you can try all 16 dapps of the class. Use the faucet to get more free ether.
  2. Try out every single dapp. Follow the presenters scenario, but also explore on your own. Make it break if you can, and report the issues. Envision improvements and ideas.
  3. Report bugs, issues, feedback, and suggestions for each team on dapps.stanford.edu

You get grading points for participating. See grading below.

Server Deployment

  1. Submit your ssh public keys here so that we can create user accounts for you on the server.
  2. After we create your accounts, find your username here 
  1. Update your necessary technologies in the same sheet
  1. Login to the server as such:  
    $ ssh your_username@dapps.nofaults.org
    (nofaults.org is an alias to the class server. Nothing else is running on that server right now). No password necessary, as it is using your ssh key as authentication method.

Things you can do on the server (e.g.)

Ethereum smart contract deployment

We will be deploying on Rinkeby test network. For simplicity, you will deploy your contracts on Rinkeby directly from your computers using remix.

1. Get 18.75 free Ether from the Rinkeby faucet, by clicking on the dropdown menu next to “Give me Ether” button.

2. Switch your network on MetaMask to Rinkeby.

3. Go to remix.ethereum.org and paste or upload your contracts. Make sure are using the “injected web3 provider” so that you funded account on Rinkeby is the contract deployer. Hit “Deploy” to deploy your contract. Wait for the transaction to get mined.

4. After your contract is deployed, get the contract and transaction address from etherscan (https://rinkeby.etherscan.io/), by clicking on MetaMask’s creation transaction.

For example in this transaction, the contract address is in the line that starts with “[Contract 0xeed04...”

5. Take your contract’s ABI JSON file from under the build/contracts folder, modify it to contain the correct values for the following:

Upload the modified file to the web server so that your application can access it. (the exact location depends on your app)

Grading

As a reminder, 70% of your grade is from the project and homeworks, 30% from participation and 20% is extra credit. So, during the midterm-studio your team gets points for presenting a working v1 of your dapp usable with metamask or equivalent (from the 70% pool). And you personally get points for submitting valuable feedback to other projects (from the 30% participation pool). Reporting security vulnerabilities gives you points from the 20% extra credit pool.

Midterm grades will be based on having a working “v1” dapp. We will not penalize you for extra functionality that is incomplete. So if you have a basic feature-A that works and an extra feature-B that is still quite buggy, we will not penalize you for feature-B. We appreciate that you have more features and some are already working well. Also we do not take into consideration bugs or constructive feedback you receive from your peers. That is there only to help you. The class staff team makes its own assessment.

As you know well by now, this project-based class is not grading on a curve. Performance is not zero sum. Genuinely helping others not only doesn’t harm your position, but also gives you participation points.

Server and dapp security [extra points]

If you find any vulnerabilities on the server or class dapps, let us know and you get extra credit points. Ideally suggest solutions along with your reports. These could be serious issues, such as XSS on one’s app, or a way for an intruder to SSH to the server or the database, or a buggy smart contract. But these could also be smaller issues or internal issues, such as someone forgot to lock an important directory on their server UNIX account.

Preview of plan for next few weeks

Weekly deadline - Monday 11am - that includes:

FAQ

How to get my app to appear on https://dapps.stanford.edu/project-name?

There are many ways to do this, depending on the web technologies you are using for your app. Below are some example answers.

Example Solution 1:

If you have cloned your repo in the folder

~/cs356-my-project/

And your front end files are living exclusively on

~/cs356-my-project/compiled-frontend

You can delete the www folder and create a symlink of your frontend folder to www

$ rm -rf ~/www

$ ln -s ~/cs356-my-project/compiled-frontend ~/www

Example Solution 2:

If your app comes out at https://dapps.stanford.edu/project-name/app you can modify this line in your nginx.conf file

alias /home/your_project/www;

to make it

alias /home/your_project/www/app;

This will move the web root of your project to the right place for you.

⇒ Let us know every time you change your nginx.conf so that we can restart nginx. ⇐

Since deploying on the class server is optional, how can I deploy my app under this URL https://dapps.stanford.edu/project-name?

You can change your nginx.config on the class server accordingly. This should be straightforward for you if you are already comfortable running your own server for your dapp. We are also happy to help, as always.

My app is using React without a backend database. How do I deploy?

If you don’t have an active backend with a database connection, then most likely you don’t need to change `nginx.conf` much. All you need to do is run `npm run build` (or `yarn build`) and point the `nginx.conf` alias directive to the `build_webpack` directory.

My app needs node.js. Do you have an example nginx.conf for node?

Check this `/home/test-node-app-2/nginx.conf` for a working example node configuration that is served here https://dapps.stanford.edu/test-node-app-2. The file `/home/test-node-app-2/www/app/index.js` is the entry point to this app.

Any hints for deploying under /project-name on the server?

The main challenge is that your app runs under “/” on development but under “/project-name/” on the server. This may have implications with the links of your web app if they are absolute (ie. start with a leading “/”). You have to update your routes to accomodate for the initial “/project-name/”. For React see the first 2 steps of this article. The relevant parts are here:

<Router basename={'/directory-name'}>

"homepage": "https://dapps.stanford.edu/directory-name",