If you, like me, use npm; git; a task runner; have a development folder separate from your production folder; and run a web server from your production folder; even if you're not at this point interested in the backend - or want to use an entirely different IDE and technology than .NET; then you can get the good parts of VS2017 without annoying Scripts folders and what-not.
These are the precise steps to follow to turn that Visual Studio 2017 from an angry old man into a cooing, cuddly baby. An extremely useful baby.
(Oh, by the way, this is if you're setting up a new project. VS2017 makes you jump through a whole host of other annoying steps if you have already set up another project, so follow these steps only if you have not yet set up you project. I may, or may not, cover the latter case in another post.)
- Open VS2017, then do File => New Project
- Choose Blank Node.js Web Application
- Fill in the fields in this way:
- Name => dev
- Location => the *parent* directory of where you want your project to live.
e.g. /workshop/websites
(Not inside a folder named for your project. e.g. NOT /workshop/websites/MyProject) - Solution => create new solution
- Solution name => *this* is where you put the name of your project's folder.
e.g. MyProject - Check both create directory for solution and create new git repository.
- Click OK.
- From the 'Solution Explorer', you can go ahead and delete the Scripts folder, package.json, README.md and server.ts.
- Right click the 'Solution' node in the 'Solution Explorer' and pick 'Add' then 'New Website'
- Choose ASP.NET Empty Website.
Don't worry. There is no ASP.NET involved. - Web location: browse to the project directory (e.g. MyProject) and create a new folder named dist by adding its name to the path in the field named "Folder:"
e.g. C:\workshop\websites\MyProject\dist - Click 'open'. You should get a dialog box telling you that 'dist' does not exist and asking if you would like to create it. Click 'Yes'.
- Click 'ok'.
- Click through any warnings.
- Go ahead and delete the Bin folder, packages.config and Web.config.
- Right-click on the 'dist' node in the 'Solution Explorer' and click 'Add' => 'Add New Item'
- In the "Name:" field write 'index.html'
- Click 'add'.
- In the editor, add a "hello world" message in the <body> tag.
- Right click the 'dist' node in the 'Solution Explorer' and select 'View in Browser'.
- If you see your index.html message, success!
- Right-click the root 'solution' node in the Solution Explorer.
- Select 'Add' => 'New Solution Folder'
- Name it 'root'.
- Right-click, 'Add' => 'Existing Item'.
- Select .gitignore and any other relevent file from your project folder (the parent of 'dev' and 'dist', e.g. MyProject).
Now these are easily accessible in the Solution Explorer from the 'root' folder. Do this any time during development if there are files in there you would like to see inside the 'Solution Explorer'. - Related, if at any time there is a file that is definitely in the dist or dev folder but is not showing up in the Solution Explorer, check for an icon along the top just under the title 'Solution Explorer' named 'Show All Files'. Click that. Your missing file should show up. You can right-click its icon and select 'Include in Project' if you like.
- Select View => Other Windows => Terminal Window. (Or use Power Shell or CMD).
- In the 'dev' directory type:
- npm init, then fill in the information
- tsc --init => creates a typescript.config file.
- git status => check to see if there are any files that need to be added to .gitignore
- If all is well, this would be a good time to type 'git -m "init commit"'
- Now the world is your oyster.