Creating the Family Page – Part 2, Getting started

Last time I described what I want to do.

This time I will:

  • Create the basic web site from a template.
  • Install the necessary frameworks
  • Remove the parts of the template that I don’t want.
  • Publish web site to Windows Azure

So, this time will be pretty simple stuff, but the point of this is to take baby steps, and let every post in the series focus on a specific topic.

Creating the web site from a template

I open Visual Studio 2013 and select “New Project…”

image

I give the project the name “TheFamilyPage” and I place it place it in a folder of my choice. For this project I have already created a GitHub repository, so I will be able to share the code. I choose the folder for my repository.

The project type I have chosen is “ASP.NET Web Application” which in Visual Studio 2013 is the entry point for all types of web pages. Press “OK” to get to the next page:

image

Here I choose the MVC project and I don’t add anything else. But if you wanted to include Web API or Web Forms this is the place to do it.  Next I click “Change Authentication”

image

This gives me different options for handling user accounts. I want my users to be able to login, and I am not running an intranet site or anything like that, so I keep the option for “Individual User Accounts”. This will create code to keep user account data in a database. The default is to use a database of type “LocalDb” which has the database in a simple file in the project. This is fine so we press OK and OK.

Now Visual Studio creates the project for us. After a little while we have project looking like this:

image

Install the necessary frameworks

Bootstrap and Entity Framework is part of the project along with a bunch of other stuff. Before I do anything else I go to the menu Tools –> NuGet Package Manager –> Manage NuGet Packages for solution…

Her I choose to “Update All” – this is the only time I recommend doing this. Normally I would only update the packages, that I need to update. This is because a lot of references in your code might get screwed up, so it is better to change on thing at a time.

Next I go to the menu Tools –> Nuget Package Manager –> Package Manager Console.

In the console window that pops up, type “Install-Package angularjs”

image

Remove the parts of the template I don’t want

At this point if I run the site locally, I will see something like this:

image

At this point I want to keep “Home”, “Register” and “Log in”. The about and contact pages are not need by this site.

I will removed the unwated stuff in the project:

– Under Views/Home/ remove About.cshtml and Contact.cshtml

In the HomeControlle.cs remove the About and Contact methods:

image

In View/Shared/_Layout.cshtml remove the navigation code for contact and about:

image

I also change “The Application” to “The Family Page”.

In Views/Home/Index.cshtml I remove all the boilerplate text and put in my own placeholders.

image

Now the page looks like this:

image

This is the basic site, that we are going to build on. Now we only have one thing left.

Publishing the site to Windows Azure

NOTE: This part requires you to have a Windows Azure account. If you don’t have one, you can get a trial by going to windowsazure.com.

Right-click on the project in Solution Explorer and select Publish.

If you are asked to log in to your Microsoft account then do so.

image

Select “Import…”

image

Select “New…”

image

Fill out infomration about site name and the databse server you want to use. We need the database for later. Then press “Create”

image

Press “OK”

Press “Next”

image

Choose the connection string to use.

The press “Publish”

After a little while the site will be published and available on the URL you chose. In my case that will be: http://thefamilypage.azurewebsites.net/

image

Conclusion

We now have a totally bare bone web site published to Windows Azure, and we have installed and updated the frameworks we are going to use.

Next time we will look at the user accounts and we will start to use Entity Framework code first migrations.

Advertisements

About Lund

Owner of iCodeIT, a software consulting company. I am primarily working the .NET development and architecture.
This entry was posted in C#, HTML5, Web and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s