Editing Meteor projects with Visual Studio

  • Article

Meteor does not yet have full support for Windows. However, that should not deter one from using Visual Studio's great editing features for Meteor project development.

One particular trait that I personally like in VS is, tracking the code changes in the editor (with small green and yellow bars appearing on the side for changed and saved code portions). If you are like me, then you are probably using Linux VMs (on Windows) to build and test Meteor Projects. Here is one simple way to smooth the workflow.

  1. Get Node.js Turnkey Linux VM: https://www.turnkeylinux.org/nodejs
  2. Launch your Linux VM with Virtual Box
  3. Setup your Meteor project (with meteor add command or git clone command)
  4. Test if you are able to connect to your Linux VM through ftp. If not, you may want to install vsftpd. Refer: https://www.wikihow.com/Set-up-an-FTP-Server-in-Ubuntu-Linux
  5. Launch Visual Studio 
  6. Select the Open | Website option from File Menu.
  7. Enter your FTP details. You can leave the Directory option empty, which will let you browse the whole Linux user home directory from VS. Else you can specify the meteor project directory
  8. Once the solution is opened successfully, right click on the ftp project in the solution explorer and choose Browse With ... option.
  9. In the browse with dialog, enter the url of the meteory project. Typically you just need to add port (:3000) to the end of the url.
  10. Once done, you can press Ctrl + Shift + W to launch your meteor project in default browser. Else use the context menu option View in Browser.

Once the meteor project is launched in browser, meteor will take care of refreshing the page automatically whenever any component used in the project changes. So, you can freely edit any html page or javascript you want in the project and save the changes and see them automagically applied to your browser page.