Solidity integration with Visual Studio


Getting Started with Solidity

Yesterday we were proud to announce the integration of Solidity and the Smart Contracts that work with Ethereum blockchains into Visual Studio.  This exists as an extension that is available here.  This extension was designed to lower the bar to working with blockchains and make this a seemless process from inside the world class IDE.

The extension is free, and we have put together some steps to further help you get started using this.

 


 Prerequisites

To get started you will need to be using Visual Studio 2015  Community, Professional, or Enterprise edition.  You will also need to download the Solidity extension from the Visual Studio Marketplace.  You can download that here.  After installing the extension, you will need to restart Visual Studio.  Also, nodejs will need to be installed to allow local deployments for development.  This can be downloaded here. (download the latest LTS version)

 

visual studio extension


 Create your first Decentralized Application

After the extension has been installed, next you can create a decentralized application that will be used to author, compile and deploy smart contracts.

1.  From the File menu, click new Project.

blog_post2

 2.  In the New Project dialog box, click on Solidity under Installed Templates, and then select DecentralizedApplication.  Name the application, MyDecentralizedApp, and then click OK.

 blog_post3

3.  Next you will see a few things happened.  A README document was opened in the Visual Studio main window and the project was setup with some folder and sample files.  The README explains how to setup a local keyserver in order to deploy smart contracts to a development blockchain instance.

a. First download and install the latest version of bloc from Consensys.  To do this, open a cmd prompt, navigate to a directly where you would like to install the keyserver and run the following command:  npm install blockapps-bloc -g

blog_post4

b.  Next create the instance of bloc from the core by running the command: bloc init.  This will prompt you for some values that will be used the instance.  Enter a name of your choice, and user name, and accept the default for the apiUrl.  This is the ethereum node that will hold the actual blocks that your account/contracts will be deployed to.

blog_post5

c.  Now change to that directory and install the required node packages by running the following command: cd <appname> && npm install

blog_post6

d.  Finally you are ready to start the bloc instance by running the following command: bloc start

blog_post7

4.  Now we have a keyserver running.  This local keyserver will run on port 8000 by default.  The Visual Studio extension is configured to use this server by default, with a user named: testuser and a password: testing.  You can view and edit these changes by running the following:

a.  Right click the project in solution explorer.

blog_post8

b.  The dialog here shows the configuration values that are set by default, and can be adjusted if needed. (they will not need to be adjusted in most cases)

blog_post9

 5.  At this point we have a keyserver running locally, now we have an endpoint that we can deploy our smart contracts to (as well as create new users).  So now we can get started with development of smart contracts.

 


 

Working with Smart Contracts (authoring, compiling, deploying)

Now that the foundation is place, we can take a look at working with Smart Contracts.  By default a folder named samples will be created with some sample contracts already included.  When you are just getting started with Solidity, these are a great source of reference.

blog_post10


To get started, we can use the Payout.sol smart contract.  First, we can examine the contract in the Visual Studio code window.  When we are satisified with what we have authored, we can then compile this contract.  This compiliation will take place on the local machine.  The output from the compliation will be in the output window of Visual Studio,


Compilation

1.  Compile the smart contract

blog_post11

2.  The output for the compilation is found in the output window.  If you don’t see the output window in the lower part of your screen you can open from the View -> Output menu (or Ctrl + W, O).  If there any errors with the compilation, it will be shown in the output window as well.

blog_post12


Deployment

The deployment is nearly as simple as the compilation.  The deployment will send the smart contract to your local keyserver which will communicate with the underlying blockchain.  What is actually happening is this.

1.  First, VS will use the project properties (shown earlier) to determine the bloc server to communicate with (url).

2.  Next VS will call this server, asking if the user in the project properties, exists.

a.  If it does exist, the address of the user will be returned to Visual Studio.

b.  If it doesn’t exist, a new user will be created, and that address will be returned to Visual Studio.

3.  Next, VS will get the source for the contract, along with the address of the user and post this to the bloc server.

4.  Finally, your default browser will be opened to a dynamically created html page of the smart contract that was deployed.

blog_post13

5.  When the browser opens, you can enter the password for the bloc server (default is testing).

blog_post14

6.  You can then exercise the contract.  For example, you can send in a value in Ether by post 1 to the setup box.

blog_post15


Next Steps

At this point, congratulations, you have now entered the blockchain universe!  I will be posting some more tutorials to expand on this.

 

Comments (40)

  1. Andrew Keys says:

    Strong work, Cale.

  2. Jarkko says:

    After installing bloc I get following lines

    npm WARN enoent ENOENT: no such file or directory, open ‘C:\WINDOWS\system32\package.json’
    npm WARN system32 No description
    npm WARN system32 No repository field.
    npm WARN system32 No README data
    npm WARN system32 No license field.

    Then I try to start bloc:

    C:\WINDOWS\system32>bloc init
    ‘bloc’ is not recognized as an internal or external command,
    operable program or batch file.

    1. Cale T says:

      Apologies, I had a typo in step 3a, the command should be: npm install blockapps-bloc -g. The -g being install globally. Thanks!

  3. Gavin says:

    Using a clean install of Win 10 Ent and VS2015 Pro.

    After project initiated, I get this:

    Wrote: C:\bloc\bce\app\static\css\styles.css
    project initiated!
    now type `cd bce && npm install`
    thanks for registering with BlockApps!

    C:\bloc>cd bce && npm install
    npm WARN package.json keyserver@1.0.0 No description
    npm WARN package.json keyserver@1.0.0 No repository field.
    npm WARN package.json keyserver@1.0.0 No README data
    npm WARN deprecated graceful-fs@3.0.8: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
    npm WARN deprecated secp256k1-browserify@0.0.0: secp256k1 now inculdes browser compentents
    npm WARN optional dep failed, continuing fsevents@1.0.11
    npm WARN deprecated lodash@1.0.2: lodash@ gulp-express@0.3.5 install C:\bloc\bce\node_modules\gulp-express
    > echo “*** Please use [gulp-live-server] instead! *** ”

    “*** Please use [gulp-live-server] instead! *** ”
    |
    > keyserver@1.0.0 postinstall C:\bloc\bce
    > node node_modules/bower/bin/bower install

    bower EINVALID Failed to read C:\bloc\bce\bower.json

    Additional error details:
    Name must be lowercase, can contain digits, dots, dashes, “@” or spaces

    npm ERR! Windows_NT 10.0.10586
    npm ERR! argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “install”
    npm ERR! node v4.4.2
    npm ERR! npm v2.15.0
    npm ERR! code ELIFECYCLE
    npm ERR! keyserver@1.0.0 postinstall: `node node_modules/bower/bin/bower install`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the keyserver@1.0.0 postinstall script ‘node node_modules/bower/bin/bower install’.
    npm ERR! This is most likely a problem with the keyserver package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR! node node_modules/bower/bin/bower install
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR! npm bugs keyserver
    npm ERR! Or if that isn’t available, you can get their info via:
    npm ERR!
    npm ERR! npm owner ls keyserver
    npm ERR! There is likely additional logging output above.

    npm ERR! Please include the following file with any support request:
    npm ERR! C:\bloc\bce\npm-debug.log

    1. Cale T says:

      Thanks for this feedback, I am checking myself to see if anything changed to cause this error.

      1. Gavin says:

        Thanks Cale, guess you’ve made some changes, as the condition has changed to:

        C:\bloc\bce>npm install
        npm WARN package.json keyserver@1.0.0 No description
        npm WARN package.json keyserver@1.0.0 No repository field.
        npm WARN package.json keyserver@1.0.0 No README data
        npm WARN deprecated secp256k1-browserify@0.0.0: secp256k1 now inculdes browser compentents
        /
        > keyserver@1.0.0 postinstall C:\bloc\bce
        > node node_modules/bower/bin/bower install

        bower EINVALID Failed to read C:\bloc\bce\bower.json

        Additional error details:
        Name must be lowercase, can contain digits, dots, dashes, “@” or spaces

        npm ERR! Windows_NT 10.0.10586
        etc….

        1. Cale T says:

          Yes, the issue is after you run bloc init, then go into the directory cd , the bower.json has the application name parameter set to {{appname}}. Just change this to (no brackets or braces), and then npm install, and you should be in good shape. The core issue was caused by an update to the npm package, we will push a change to fix this asap, but you can use this as a workaround right now. Thanks!

          1. Cale T says:

            The npm package is updated now. Current version that is now 0.9.11, which I just tested and it is working fine. Just run a npm install blockapps-bloc -g to update your global package with the fix.

  4. Gavin says:

    At step 5, enter password “testing” and then click Submit, after which nothing happens i.e. password prompt remains and no error appears.

    1. Cale T says:

      I believe the html that is generated here has some issues with IE11. I have seen the same issues when using IE. Alternative to use Edge, Chrome or FF. It uses your default browser, so if you don’t want to change that, just copy+paste the url to one of the other browsers and it should render and function normally.

      Much appreciate the feedback, this is really early days for these extensions, so we are working hard to improve the experience and this feedback helps!

      1. Gavin says:

        Thanks Cale, as you say, works fine in Edge, not yet in IE11.

      2. ndeth says:

        thanks for the tip to switch out browser. works great.

  5. Jonathan says:

    Awesome tutorial

  6. EBana says:

    I’ve tried your steps several times in Visual Studio 2015 and whenever I attempt to deploy the smart contract, I keep getting “object reference not set to an instance of an object”. Any ideas?

  7. Cale T says:

    Sounds like the keyserver is not running. Can you check if its listening (default): http://localhost:8000 (step 4 in blog post). You can actually browse to this url, and you should get a response.

    1. EBana says:

      The URL is not working. I did noticed that when I typed in “bloc start” in cmd window, I didn’t get a response of “bloc is listening on http:……”. Do you know how I can resolve this? Not that is matters, but I am running the VS project as an administrator and it is VS 2015 Enterprise Upgrade 2. Thanks again!

      1. Cale T says:

        Ok, then the node app is not running.
        Couple things to check:

        Is there a npm-debug.log file the folder the bloc init created? If so need to resolve any issues there with creating your keyserver instance
        You can try starting with this as well: node app.js (run this from within the folder above)

        Just as an FYI, this model where you run a local server is just an interim step, we are working to remove this going forward and make this process easier. New build will be out very soon with a few other features as well.

        1. EBana says:

          Thanks, I will research the error when running node app.js:
          events.js:141
          throw er; // Unhandled ‘error’ event
          ^

          Error: listen EACCES 127.0.0.1:8000
          at Object.exports._errnoException (util.js:870:11)
          at exports._exceptionWithHostPort (util.js:893:20)
          at Server._listen2 (net.js:1221:19)
          at listen (net.js:1270:10)
          at net.js:1379:9
          at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:64:16)
          at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:83:10)

          1. EBana says:

            Cale, thanks for leading me in the right direction. Running netstat, I figured out another service was already listening on port 8000 and once I changed it to a different port in the app.js and VS project properties, everything started to work!! Thanks!!

  8. John deLoach says:

    Success! Between your great explanation and the discussion, it worked fine.

    Thank you, Cale

  9. tom t says:

    I can’t seem to compile any contracts that I create. I receive: “Error: Expected import directive or contract definition.” Sample contracts compile fine. My contract is in the main project directory, Any ideas?

    1. Cale T says:

      Checking into this. We have another release imminent, which will add more options on the items to add to the project. One option to keep you moving would be to copy an sample contract (e.g. Payout.sol) to your folder and then modify. Not great, but will keep you moving. Incidentally, we are also enabling better file / folder support in the new build.

      Thanks.

      1. tom t says:

        Thanks. I tried moving the existing contracts, but they fail once outside the samples dir as well. And new contracts created and manually moved into the samples dir fails as well. So, I’ve just taken to editing the 3 provided samples, which I can compile and deploy.

  10. Biser says:

    Maybe just add after point 3.c to run “bloc genkey” before “bloc start”. Everything else is perfectly explained.

    1. Cale T says:

      Will update. Thanks!

  11. Nelson N says:

    Thanks for the tutorial Cale. I’ve just run npm install blockapps-bloc -g at the command prompt and received the following errors:

    C:\Users\Nelson\Source>npm install blockapps-bloc -g
    npm ERR! git clone –template=C:\Users\Nelson\AppData\Roaming\npm-cache\_git-remotes\_templates –mirror git@github.com:kejace/eth-l ightwallet.git C:\Users\Nelson\AppData\Roaming\npm-cache\_git-remotes\git-github-com-kejace-eth-lightwallet-git-dca3cc7c: undefined
    npm ERR! git clone –template=C:\Users\Nelson\AppData\Roaming\npm-cache\_git-remotes\_templates –mirror git@github.com:kejace/eth-l ightwallet.git C:\Users\Nelson\AppData\Roaming\npm-cache\_git-remotes\git-github-com-kejace-eth-lightwallet-git-dca3cc7c: undefined
    npm ERR! git clone –template=C:\Users\Nelson\AppData\Roaming\npm-cache\_git-remotes\_templates –mirror git@github.com:kejace/ether eumjs-tx.git C:\Users\Nelson\AppData\Roaming\npm-cache\_git-remotes\git-github-com-kejace-ethereumjs-tx-git-05d250d0: undefined
    npm ERR! git clone –template=C:\Users\Nelson\AppData\Roaming\npm-cache\_git-remotes\_templates –mirror git@github.com:kejace/ether eumjs-tx.git C:\Users\Nelson\AppData\Roaming\npm-cache\_git-remotes\git-github-com-kejace-ethereumjs-tx-git-05d250d0: undefined
    npm ERR! git clone –template=C:\Users\Nelson\AppData\Roaming\npm-cache\_git-remotes\_templates –mirror git@github.com:kejace/ether eumjs-util.git C:\Users\Nelson\AppData\Roaming\npm-cache\_git-remotes\git-github-com-kejace-ethereumjs-util-git-d4e1f072: undefined
    npm ERR! git clone –template=C:\Users\Nelson\AppData\Roaming\npm-cache\_git-remotes\_templates –mirror git@github.com:kejace/ether eumjs-util.git C:\Users\Nelson\AppData\Roaming\npm-cache\_git-remotes\git-github-com-kejace-ethereumjs-util-git-d4e1f072: undefined
    npm ERR! Windows_NT 10.0.10586
    npm ERR! argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js” “install” “block apps-bloc” “-g”
    npm ERR! node v4.4.5
    npm ERR! npm v2.15.5
    npm ERR! code ENOGIT

    npm ERR! not found: git
    npm ERR!
    npm ERR! Failed using git.
    npm ERR! This is most likely not a problem with npm itself.
    npm ERR! Please check if you have git installed and in your PATH.

    npm ERR! Please include the following file with any support request:
    npm ERR! C:\Users\Nelson\Source\npm-debug.log

    Any advice would be appreciated. Also, if necessary, I could email directly to you the debug log shown in the final line. Thanks

    1. Cale T says:

      Hi Nelson, We have been heads down on updates which are releasing tonight. I would ask if you can reinstall the latest blockapps-bloc (globally) and run the updated extension. Also, make sure git is in your path. You can verify this by opening a new command windows and typing git to see if you get git help. Thanks and apologies on the delay!

  12. Dharmendra Kumar says:

    when i run bloc start command in cmd prompt , it not giving any message.

    http://prntscr.com/ckkp72

    1. Cale T says:

      Try running: node app.js and you should be able to see the error that is being throw. Could be something environmental.

  13. Dharmendra Kumar says:

    How to know which ethereum address use for deploy contract?

    1. Cale T says:

      If you are using bloc its pretty easy.

      Then you can do a few things. You can hit it from bloc, just do a bloc start and then open your browser and hit http://localhost:8000/contracts

      You can then exercise it there in your browser to test it out.

  14. Compeador says:

    Hi, I followed all the instructions and bloc server is listening at localhost:8000

    But when I compile & deploy the contract I following in output window:
    Deployment to http://localhost:8000/ started!
    User used for deployment: testuser
    User: testuser created successfully
    User found: []

    Contract Payout created successfully at address invalid address or incorrect password
    Contract can be accessed here: http://localhost:8000/contracts/Payout/invalid address or incorrect password.html (default password: testing)

    and webpage launched is blank and I observe that bloc server has existed. Here is the bloc server cmd window details:

    contract as body is: undefined

    constructor arguments: undefined

    POST /users/testuser/[]/contract 200 13.353 ms – 37

    extension was matched: html

    could you help me, plz?

    1. Cale T says:

      I wonder if a glitch we had with the public strato instance (strato-dev4) caused this issue for you. Could you try this? Go into your bloc instance (the folder created by bloc init) and into the app folder. Delete the meta and users folder if they exist and retry. Apologies for the late reply. Let me know if this doesn’t resolve your issue.

      1. Compeador says:

        well, I solved the problem simply moved the folder to D:\
        thank you anyway 🙂

  15. Calum Macaskill says:

    I am running. VS as administrator, host 8000 started but user check fails. User name is testuser, password testing.

    1. Cale T says:

      Can you check in the folder for your bloc (the one that gets created when you run bloc init). Check under the app folder. If there is a subdirectory for users in there, delete it. The restart bloc (bloc start), and finally run the deployment from VS.

      Hope this helps!

  16. Neil says:

    Many thanks for this tutorial. I get as far as step 5 in deployment then when I enter the password I get a page not found error. At the keyserver I see ‘GET /login?password=testing 404’. Are you able to help please?

    1. Cale T says:

      Ok, lets check something. If bloc running, navigate to http://localhost:8000/users. If you see [] then no users are created, which is fine. If you see [testuser], then the test user was created. The password is testing. You can then open Visual Studio, create a new Smart Contract project type, then navigate a sample smart contract and right click/deploy smart contract. When the browser window opens use testing as password. You should be able to see in the background the user that is being used, which should be testuser.

      Let me know if this does not work for you.
      Thanks!

      1. Neil says:

        Thanks for your swift response. If I go to http://localhost:8000/users I see [“testuser”]. However when I choose Deploy Smart Contract in Visual Studio and enter the password in the resulting browser I then get the 404.

        1. Neil says:

          I started again from scratch and it’s working now. The only obvious thing I did differently was to accept the default blockchain profile of strato-dev rather than selecting ethereum. Thanks again for your support.

Skip to main content