$ npm install -g truffle

$ truffle init

pragma solidity ^0.4.24;

contract IdeaFactory {

  event NewIdea(uint id, string content);

  struct Idea {
    uint ideaId;
    string content;
  }

  Idea[] public ideas;

  mapping(uint => address) public ideaToOwner;

  function comeUpWithIdea(string _content) public returns (uint) {
    uint id = ideas.length;
    ideas.push(Idea(id, _content));
    ideaToOwner[id] = msg.sender;
    emit NewIdea(id, _content);

    return id;
  }

  function getIdea(uint _id) public view returns (string) {
    return ideas[_id].content;
  }

  function getIdeaCount() public view returns (uint) {
    return ideas.length;
  }

}

$ truffle compile

module.exports = {
  networks: {
    development: {
      host: '127.0.0.1',
      port: 7545,
      network_id: '*'
    }
  }
};

var IdeaFactory = artifacts.require("./IdeaFactory.sol");

module.exports = function (deployer) {
  deployer.deploy(IdeaFactory);
};

$ truffle migrate

pragma solidity ^0.4.24;

import "truffle/Assert.sol";
import "truffle/DeployedAddresses.sol";
import "../contracts/IdeaFactory.sol";

contract TestIdea {
  IdeaFactory ideaFactory = IdeaFactory(DeployedAddresses.IdeaFactory());

  function testComeUpWithIdea() public {
    uint returned = ideaFactory.comeUpWithIdea("Get more money!");

    uint expected = 0;

    Assert.equal(returned, expected, "Idea ID 0 should be recorded.");
  }

  function testGetIdea() public {
    string memory expected = "Get more money!";

    string memory returned = ideaFactory.getIdea(0);

    Assert.equal(returned, expected, "'Get more money!' should be recorded.");
  }
}

$ truffle test test/testIdeaFactory.sol

$ vue init

$ npm install web3
$ npm install truffle-contract

<template>
  <div class="app">
    <h2>POST YOUR IDEA</h2>
    <p v-if="account">アカウント: {{ account }}</p>
    <p v-if="!account">アカウントが見つからないよ</p>
    <input
      v-model="newIdea"
      type="text"
      name=""
      value=""
      placeholder="なんか書いてみたら？"
    />
    <button @click="postIdea">投稿</button>
    <ul>
      <li class="idea-box" v-for="idea in ideas" :key="idea">
        {{ idea }}
      </li>
    </ul>
    <p v-if="contractAddress">コントラクトアドレス: {{ contractAddress }}</p>
    <p v-if="!contractAddress">コントラクトアドレスが見つからないよ</p>
  </div>
</template>

<script>
import Web3 from "web3";
import contract from "truffle-contract";
import artifacts from "../../build/contracts/IdeaFactory.json";
const IdeaFactory = contract(artifacts);
export default {
  name: "TopPage",
  data() {
    return {
      contractAddress: null,
      account: null,
      newIdea: null,
      ideas: [],
    };
  },
  created() {
    if (typeof web3 !== "undefined") {
      web3 = new Web3(web3.currentProvider);
    } else {
      console.warn(
        "No web3 detected. Falling back to http://127.0.0.1:7545. You should remove this fallback when you deploy live, as it's inherently insecure. Consider switching to Metamask for development. More info here: http://truffleframework.com/tutorials/truffle-and-metamask"
      );
      web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:7545"));
    }

    IdeaFactory.setProvider(web3.currentProvider);
    web3.eth.getCoinbase().then((coinbase) => {
      IdeaFactory.defaults({ from: coinbase });
    });

    web3.eth.getAccounts((error, accounts) => {
      if (error != null) {
        console.error(error);
        this.message =
          "There was an error fetching your accounts. Do you have Metamask, Mist installed or an Ethereum node running? If not, you might want to look into that.";
        return;
      }
      if (accounts.length === 0) {
        this.message =
          "Couldn't get any accounts! Make sure your Ethereum client is configured correctly.";
        return;
      }
      this.account = accounts[0];
    });

    IdeaFactory.deployed().then((instance) => {
      var event = instance.NewIdea();
      event.watch((error, result) => {
        if (!error) {
          this.ideas.unshift(result.args.content);
          this.newIdea = null;
          console.log(result.args.content);
        }
      });
      this.contractAddress = instance.address;
    });
  },
  beforeMount() {
    IdeaFactory.deployed().then((instance) => {
      var contract = instance;
      contract.getIdeaCount().then((count) => {
        for (var i = 0; i < parseInt(count.toString(10)); i++) {
          contract.getIdea(i).then((idea) => this.ideas.unshift(idea));
        }
      });
    });
  },
  methods: {
    postIdea() {
      return IdeaFactory.deployed()
        .then((instance) => {
          var contract = instance;
          contract
            .comeUpWithIdea(this.newIdea)
            .then((id) => contract.getIdeaCount())
            .then((count) => contract.getIdea(count.toString(10)))
            .then((idea) => this.ideas.unshift(idea));
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li.idea-box {
  border: 1px solid;
  display: block;
  margin: 0.5em auto;
  padding: 0.5em;
  width: 320px;
}
ul {
  padding-left: 0;
}
</style>

import Vue from 'vue'
import Router from 'vue-router'
import TopPage from '@/components/TopPage'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'TopPage',
      component: TopPage
    }
  ]
})

$ npm run dev

$ npm install truffle-hdwallet-provider

var HDWalletProvider = require('truffle-hdwallet-provider');
const MNEMONIC = 'Truffleからコピペ'

module.exports = {
  networks: {
    development: {
      ...
    },
    ropsten: {
      provider: function() {
        return new HDWalletProvider(MNEMONIC, 'https://ropsten.infura.io/v3/xxxxxxx')
      },
      network_id: '3'
    }
  }
}

$ truffle migrate --network ropsten

$ npm install --save express

var express = require("express");
var path = require("path");
var serveStatic = require("serve-static");

app = express();
app.use(serveStatic(__dirname + "/dist"));

var port = process.env.PORT || 5000;

app.listen(port);

console.log("server started " + port);

$ npm run build

$ node server.js

{
  ...
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "node server.js",
    ...
  },
  ...
}

$ npm run start

$ git init

.DS_Store
node_modules/
dist/  # 消す
npm-debug.log*
yarn-debug.log*
yarn-error.log*
test/unit/coverage
test/e2e/reports
selenium-debug.log
truffle.js  # 追加する

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln

$ git add .
$ git commit -m "init"
$ heroku create --name YOURAPPNAME
$ heroku git:remote --app YOURAPPNAME
$ git push heroku master