If you’ve ever tried to create a new project for your NodeJS application, it’s probably gone something like this:
- Create a GitHub repository on the GitHub website
- Clone the GitHub repository on to your local machine
- Start up Visual Studio
- Use File -> New Project… to create a new project
- Get frustrated at the directory format
Visual Studio, in its wisdom, decided that all projects need their own directory and the project file needs to be in the directory above. So, if you have a repository called my-project, you end up with a path of ...\my-project\my-project and all the files in that. Then you have to jump through hoops to get the files in the right place so your NPM libraries get published properly and your websites get deployed correctly.
There is a better way. First off, start by creating a GitHub repository just like you were doing. Clone the GitHub repository on to your local machine. I’ve done this for a new TypeScript configuration library I’m working on:
Now, run the usual command line npm init and answer the questions it poses. This is pretty much standard form. In fast, you can also do things like Yeoman scaffolding, Bower initialization and anything else you feel is important here. Set up the project area the way you want to. I’ve just done npm init so all I have is a package.json file.
For this next bit, you will need the NodeJS Tools for Visual Studio. I’m using the latest v1.1 RC2 version for this experiment.
Open up Visual Studio 2015. Use File > New Project… (or press Ctrl + Shift + N) to open up the New Project dialog.
- In the Name: field, enter the name of your project from the package.json file
- In the Location: field, select cloned GitHub repository directory
- Uncheck the Create directory for solution checkbox
Click on OK. You will be asked for two things. Ignore the filter for now – it’s mostly right and you can adjust it later. The location should be right – it’s pulled from the Location field for the project on the prior screen:
Click on Next, then Next again, then Finish. Take a look at the things you can do, but don’t worry too much about it.
Once you have clicked on Finish, the Solution Explorer will with the Show All Files enabled. This allows you to right-click on any file and use the Include in Project option. You will want to do this for the LICENSE file, for example. You may also want to include the .gitignore file. Once it is all set up the way you want it, there are a couple more changes to make.
Firstly, open up the .gitignore file and add .vs/ to the file. This is a work directory for Visual Studio and should never be checked in.
Secondly, go to File > Save All. Primarily, this will save a .sln solution file – save it in the same directory as the other files in the project. Now, let’s take a look at our directory:
You can see we have two additional files. The .njsproj file is for the NodeJS Tools for Visual Studio and the .sln file is the standard Visual Studio solution file. Run git status:
Note how the .vs directory is not listed here – it shouldn’t be. If you have it listed, then you need to adjust your .gitignore as I described above.
Now you can start coding. The files will be placed in the right place in your directory structure and those Azure deployments, NPM builds and other things that were problems with the old way are fixed.
Visual Studio is an awesome tool for NodeJS development and this technique for new projects provides the right layout so that you can share your project with non-VS users.