Setting Up your NopCommerce website using WebMatrix

In this tutorial, you will see how quick and easy it is to get your nopCommerce application up and running! nopCommerce is an free, open source, e-Commerce application that contains both a catalog frontend and administration tool backend. It also has a fully customizable shopping cart. Getting your e-Commerce site up and running can be accomplished in a few steps. For this tutorial, we will be using WebMatrix.

WebMatrix is a free tool that allows you to create, customize, and publish webpages. It gives a number of different ways that you can create websites. One of the features is providing existing open sources applications such as nopCommerce, as well as WordPress, Joomla, DotNetNuke or Umbraco. WebMatrix can be downloaded for free at www.microsoft.com/web/webmatrix.

Using WebMatrix with nopCommerce

When you launch WebMatrix you will see several options on how to create a new application. To create a nopCommerce application, select “App Gallery”.

WMx2ini

We will now choose “nopCommerce” to install the application.

AppGal

You will be prompted to select the type of database you would like to use for your website.

 

AppGal2

Next, review and accept the License Terms to proceed.

AppGal3

Now we wait while nopCommerce is installed.

AppGal4

Once the installation is complete, we will get a confirmation.

AppGal5

We’re now ready to begin creating our nopCommerce application. Clicking the “OK” button will take us to our WebMatrix workspace with the nopCommerce application loaded.

WMx2SiteWS

To get our nopCommerce website up and running we need to further install our application. To do this we can use the nopCommerce installation wizard. Click “run” on the menu ribbon.

Once the installation wizard opens in your browser, choose to install the nopCommerce (if you haven’t already installed it before).

After a few moments you will be prompted to enter your SQL server information.

Your SQL Server name or IP address is given to you by your web host. For example, if using Cytanium WebMatrix web hosting, your SQL Server name will be webmatrix01.cytanium.com. Your SQL Server account will be your user name and password credentials.

You will then be prompted to create a new database or use an existing database. If you already have an empty database created on your SQL Server add the database name. Else, create a new database.

Now we wait while our database is created with our sample data. This may take a few moments.

Note: One of the issues I came across while installing is the http request timing out. A way to ensure you will not receive this error is by configuring our web.config file.

In your web.config file, locate

<httpRuntime maxRequestLength="51200" requestValidationMode="2.0" />

We can add an execution timeout attribute. Simply add this attribute to our httpRuntime variable so it looks like:

<httpRuntime maxRequestLength="51200" requestValidationMode="2.0" executionTimeout="900000" />

After your installation is complete, you will have the chance to change you admin username and password. This is not required at this step. Clicking the “go to site” link will take you to your configured nopCommerce website.

You will then be taken to your store page with the sample data (if you choose the create sample data checkbox when setting up our database).

Log in to your site as an admin (if you are not logged in already).

Once you are logged in as an admin, you will have access to the “Administration” features on the top menu.

Clicking on the “Administration” link will take you to your Dashboard.

Here you have access to your catalog, your sales information, customer information, content management and the configuration of your site.

Global Settings is where you can change your store information.

To add and delete products from our website, we need to go to our products homepage. You can get there through the “Catalog” menu tab.

Once we are at our products screen, we need to navigate to our product listing. Click on the “products” link. Now we have a list of all of our products. We can delete the sample products or we can add more products.

Let’s add a new product to our website. To do this click the “Add new” button on the top right. Here you will need to put in the product name, a short description, and a full description. Before you can add a product image, you must first save the product by clicking the “save” button.

We can now add an image for our newly created product.

After we upload our image, it will be displayed for us. We need to save the product by clicking on the “save” button.

After we save our product, we can now view it in our products list. From here we can edit our delete our newly created product.

If we look under our “newly added products” page, we can see our new product.

Now we can publish our nopCommerce store. There are several companies that are offering free WebMatrix hosting. You can find this information under the Publish icon on the menu ribbon.

Before you can publish your site, you must configure your publishing settings. Click on the Publish icon and select settings.

In the publish settings, you will need to add a connection string for your database.

Note: The basic format of a connection string is:
Server={server name sent to your from your webhost};Database={name of database};User id={your database user name};Password={your database password};

Some webhosts require you to create your own database name, user name and password while others provide you with this information.

For this example we are using the WebMatrix hosting company called Applied Innovations. We can create a database and database user with the Applied Innovations control panel and then put this information in our connection string.

It is always a good idea to click the “Validate Connection” button before you publish your web application. This allows us to see if our application will be published correctly.

After clicking publish, you will then be able to choose what files will be published.

Now we wait while it publishes. If it is the first time publishing the site, this may take quite a while. The status of our publishing can be seen on the popup bar on the bottom of WebMatrix.

When publishing is complete, we will receive a message on this bar notifying us. Clicking on our site’s link will open a browser to our site.

That’s it! We installed, set up, and published our nopCommerce store.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!