CS 359B Spring 2018
Deadline: Monday, May 14, 2018, 11:00 am
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.
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)
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.”
You get grading points for participating. See grading below.
Things you can do on the server (e.g.)
We will be deploying on Rinkeby test network. For simplicity, you will deploy your contracts on Rinkeby directly from your computers using remix.
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)
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.
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.
Weekly deadline - Monday 11am - that includes:
There are many ways to do this, depending on the web technologies you are using for your app. Below are some example answers.
If you have cloned your repo in the folder
And your front end files are living exclusively on
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
If your app comes out at https://dapps.stanford.edu/project-name/app you can modify this line in your nginx.conf file
to make it
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. ⇐
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.
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.
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.
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: