Working with solutions and projects

Introducing basic concepts

Project

A project contains all the source code files, data files, etc. that are compiled into a library or executable, and also includes compiler settings and other configuration files that might be used by a variety of services or components that your program works with.

Clicking on the menu File > New > New Project will open the New Project window where you can choose from the following project types:

• Low-Code project
  • Low-Code Project
  • Low-Code Project (AMS)
• Console project
  • Console App
• Library projects
  • Class Library
  • ASP.NET Core Class Library
• Web projects
  • ASP.NET Core Web API
  • Web App
  • Vue project
• Service projects
  • ASP.NET Core gRPC Service
  • Worker Service
• Test project
  • xUnit Test
• Desktop project
  • Shared projects

Project File

Each C# project contains a project file identifiable from the file extension (.csproj). The project file is an XML file that contains all the information needed to build a project.

Solution

A solution is a container for projects that are related in some way. It contains build information, DevMagic Studio window settings, and any miscellaneous files that are not directly related to a particular project. A solution is defined by a text file with the .sln extension that integrates projects, project items and solution items in the solution.

Solution Explorer

After you create a new project, you can use Solution Explorer to view and manage the project and solution and their related items.

A variety of menu commands, such as building/rebuilding a project, managing/restoring NuGet packages, adding a reference, renaming a file and adding Docker Support, are offered by right-clicking on various items in Solution Explorer.

The toolbar at the top of Solution Explorer currently provides 6 options:

• Refresh Status button, which refreshes the status of code management of all the nodes inside Solution Explorer.
• Sync with Active Document button, which allows you to locate the currently open file in the code editor inside Solution Explorer.
• Collapse All button, which collapses all nodes in Solution Explorer.
• Show All Files button, which shows all files including the hidden files in the selected project.
• Properties button, which allows you to set the various properties of the project/solution.
• Preview Selected Items button, which previews a selected file or component with one click in the code editor.

Creating solutions and projects

Creating a new project

To create a new project, take the following steps:

Step 1: Select New > New Project… from the File menu.

Step 2: The New Project page will pop up.

Step 3: On the New Project page, select a project template from the available project templates options.

Step 4: Specify a name for the project, select where you want the project to be created, and specify the solution name.

The fields required in each template are different. Please follow the guidance in the screen to specify all the necessary information, and then click Next to go to the next screen, until you see the Create button in the screen.

Step 5: Click Create to generate the project. The project is then opened by DevMagic Studio so that you can start to develop.

Setting a startup project

You can view your solutions and projects in the Solution Explorer tool window, in which you will see that a project is marked in bold. Such a project is called the startup project, which refers to the project that launches when you run the application.

The startup project can be changed to another by right-clicking on the node of the intended project and then selecting Set as Startup Project. For a library project, you must add an executable project to the solution and set the executable project as the startup project.

Adding items to a solution

As described earlier, a project contains all items required to build an application in DevMagic Studio. When you create a new project, DevMagic Studio creates a solution to accommodate the project. When the solution is created, you can also add existing and/or new projects/items to the solution. The newly added items do not necessarily belong to any individual project.

Sometimes, multiple projects in your solution share a file, such as the readme file for the solution, and some files belong at the solution level instead of the project level. In such cases, you can add the files to the solution itself. To do so, right-click on the solution node in Solution Explorer and then select Add > New Item, or Add > Existing Item.

Deleting a solution, project or item

You can use the DevMagic Studio IDE or File Explorer to delete a solution, project or item. The difference is that deleting items within the DevMagic Studio IDE only removes them from the current project or solution while deleting items in File Explorer removes them permanently. Before you delete items in File Explorer, however, it is recommended that you back up the items in case you need to use them later.

To delete an item within the DevMagic Studio IDE, select the item and then select Delete from the right-click context menu.

To permanently remove an item,

Step 1: Right-click on the node of the solution/project/item you want to delete in Solution Explorer and then select Open Folder in File Explorer. Step 2: Navigate up one level in File Explorer. Step 3: Select the folder that contains the solution and then press the Delete key.

Project properties and solution properties

When you right-click on a project (or solution) in Solution Explorer and select Properties, the Properties Settings window will pop up. You can configure properties about the project (or solution) in this window. For a detailed description of each property, please refer to Configuring project properties.

Managing project references

Three available referencing methods

DevMagic Studio currently supports three referencing methods, which are:

• Project-to-project Reference
• Shared Project Reference
• COM Reference
• File Reference

Adding or removing references using the reference manager

To add a reference, right-click on the project node and then select Add > Reference, or right-click on the Dependencies node in Solution Explorer and then select Add Project Reference.

The Reference Manager dialog box appears and lists the available references by group.

In the Reference Manager dialog box, there are four tabs:

• Projects, which lists all compatible projects within the current solution.
• Shared Projects, which allows you to write common code that can be referenced by various application projects.
• COM, which lists all COM components available for reference.
• Browse, which allows you to browse for a file in the file system. This tab contains the Recent node, which lists the components newly added to projects.

Note that there is a search bar in the Reference Manager dialog box that can be used to filter items under the tab that is in focus.

Troubleshooting reference-related exceptions

If your application cannot find a referenced component, an exception will be thrown. There are several scenarios in which an exception will be thrown.

• Network failure;
• The file being referenced has been deleted;
• The file being referenced has been renamed.

If any such exception occurs, you need to handle it in order to use the references properly.

Network failure

Fix the network connection problems until you have access to the required resources.

The file being referenced has been deleted

Delete the reference, or read it from another location if the reference exists elsewhere on your computer.

The file being referenced has been renamed

Delete the reference, and then add a reference to the renamed file.

Application settings

Managing application settings

Application settings allow you to save various application-related information, such as application URL, launch URL, and database connection strings.

The project system automatically stores application settings into two JSON files (launchSettings.json and appsettings.json) when you create an application in DevMagic Studio.

launchSettings.json

In the file:

• applicationURL: The URL where you can launch any application on your local computer from the browser.
• launchBrowser: Whether to launch the browser when you run your application.
• launchURL: The URL to launch on your local computer.
• environmentVariables: Variables that ASP.NET Core reads at app startup and that ASP.NET Core uses to configure app behaviors.

appsettings.json

In the file:

• LogLevel: Indicates the minimum level to log for selected categories.
• AllowedHosts: The hosts headers that are allowed to access this site.
• ConnectionStrings: Strings that specify information about a data source and the way of accessing it.

Note: There are two configuration files that manage the Web app at runtime. The default application configuration is stored in the appsettings.json file. However, you can use the appsettings.Development.json file to override these settings.

Managing database connections

To create a database connection:

Step 1: Select Connect to Database… from the Tools menu.

Step 2: In the Choose Connection dialog, click New to configure the database connection.

You can directly use the existing connection by selecting it from the list of Connections, or click Edit to modify the settings.

Step 3: Select a data source from the Data Provider list.

Step 4: Configure the basic and advanced connection settings for the selected data source.

Refer to Appendix D: Database Connection Settings for the settings to configure for each data source.

Step 5: Click Test Connection to check the connection state.

Step 6: Check the connection string in the Choose Connection dialog to make sure the properties are configured as expected. You may also copy the connection string to use it elsewhere.

Targeting a framework

DevMagic Studio allows you to specify the .NET version that you want your project to target. If a .NET application is to run on another computer, it is necessary that the .NET version that the application targets should be compatible with the .NET version installed on the computer.

DevMagic Studio supports long-term supported .NET versions as well as the latest .NET versions.

A DevMagic Studio solution can contain projects that target different .NET versions.

Changing the target framework

When you create a .NET Core project, you have no option to select the target .NET Core version. The latest .NET Core version is selected by default. However, you can change the target .NET Core version if you want to.

To change the target framework:

Step 1: Select the project you want to change in Solution Explorer, and then select Properties from the right-click context menu.

Step 2: In the Properties window, select the Application tab.

Step 3: In the Target framework list, select the intended version.

Managing project and item templates

A variety of predefined project and item templates are automatically installed when you install DevMagic Studio. These templates provide a basic set of pre-generated code and structure based on which developers just need to add some other code and resources to the project/item, thus reducing a lot of repetitive work during development.

DevMagic Studio currently provides the following project templates:

• Low-Code project
• Console App
• Class Library
• ASP.NET Core Class Library
• ASP.NET Core Web API
• ASP.NET Core gRPC Service
• Web App
• Vue project
• Worker Service
• xUnit test project
• Shared projects

and the following item templates:

• Class
• Enum
• Interface
• Application Configuration File
• Application Manifest File
• API Controller
• Assembly Information File
• Middleware Class
• Startup Class
• App Settings File
• Resources File
• Web Configuration File
• Protocol Buffer File
• Vue File
• VueConfig File
• Environment File
• Text File
• JSON File
• HTML Page
• JavaScript File
• JavaScript JSX File
• Style Sheet
• TypeScript File
• TypeScript JSX File
• JavaScript JSON Configuration File
• TypeScript JSON Configuration File
• XML File
• YAML File
• npm Configuration File, etc.

When you create a new project/item, all project or item templates, including the default templates and custom ones, share the following items:

• The files to be created when the template is used. These files include source code files, embedded resources, project files, etc.

• A .template file, which contains the metadata needed to create a project or item from the template and to display the template in the New Project and New Item dialog boxes.

When these files are compressed into a .zip file and put in the correct folder:

• Project templates appear in the New Project dialog box.

• Item templates appear in the New Item dialog box.

Managing NuGet packages

The NuGet Package Manager in DevMagic Studio allows you to install, uninstall, and update NuGet packages for your projects and solutions. It contains the following tabs, and each tab displays a list of related packages on the left side of the manager and details about the selected package on the right side.

• Browse, which displays packages to install. If a package is already installed, the Install button on the right side changes to Uninstall.

• Installed, which displays all installed and loaded packages. A green down arrow next to a package indicates that the package is already loaded. The red X icon to the right of a package or the Uninstall button on the right side of the manager can be used to uninstall the package. A blue up arrow to the right of a package can be used to update the package if a newer version of the installed package is available.

• Updates, which displays packages that have available updates from the currently selected package source.

• Consolidate, which displays packages that have been installed in multiple versions. You can consolidate the different versions to the one you specified.

The NuGet Package Manager remembers the following settings you configure for a single project or an entire solution, and restores your settings next time you open the NuGet Package Manager on the project or solution:

• Package source
• Include prerelease
• Show preview window

Managing packages for a single project

Finding and installing a package

Step 1: In Solution Explorer, select either a project node or Dependencies node and then select Manage NuGet Packages… from the right-click context menu.

Step 2: Select the Browse tab to display packages from the currently enabled package source. Search for the desired package using the search box on the upper left side of the package manager and select the package to view its detailed information.

Note

To include prerelease versions in the search, and to make prerelease versions available in the Version drop-down, select the Include prerelease option.

Step 3: Select the desired version from the Version drop-down and select Install. DevMagic Studio installs the package and its dependencies into the project. You may be asked to accept license terms. When installation is complete, the installed package appears under the Installed tab and in the Dependencies node in Solution Explorer, indicating that you can use the using directives to refer to them in your project.

Uninstalling a package

Step 1: In Solution Explorer, select either the desired project node or Dependencies node and then select Manage NuGet Packages from the right-click context menu.

Step 2: Select the Installed tab to display all installed packages.

Step 3: Select the package to uninstall and select Uninstall.

Updating a package

Step 1: In Solution Explorer, select either the desired project node or Dependencies node, and then select Manage NuGet Packages from the right-click context menu.

Step 2: Select the Update tab to display packages that have available updates from the enabled package source. Select Include prerelease to include prerelease packages in the update list.

Step 3: Select the package to update, select the desired version from the Version drop-down list, and select Update.

To update multiple packages to their latest versions, select them individually in the list or enable the Select all packages option and select the Update button above the list.

Managing packages for solution

If you want to manage NuGet packages for multiple projects simultaneously, it is recommended that you manage packages for the entire solution. Compared with the package manager for single projects, the package manager for solution has a Consolidate tab, in addition to the three tabs.

To manage packages for solution, you:

Step 1: Select the solution and Manage NuGet Packages for Solution from the right-click context menu. Alternatively, select Tools > NuGet Package Manager > Manage NuGet Packages for Solution….

Step 2: When you are managing packages for the entire solution, you are required to select the affected project(s).

Consolidating package versions

It is uncommon to use different versions of the same NuGet package across different projects in the same solution. When you manage NuGet packages for solution, you will see a Consolidate tab, which allows you to easily see where packages with distinct version numbers are used by different projects in the solution.

To consolidate package versions, you:

Step 1: Select the project(s) to update in the project list.

Step 2: Select the version to use in all those projects from the Version dropdown.

Step 3: Select Install.

The Package Manager installs the selected package version into all selected projects. Then, the package disappears from the list under the Consolidate tab.

Specifying package sources

To change the source from which DevMagic Studio obtains packages, select the desired one from the Package source dropdown list:

For information on how to manage package sources, refer to Package Sources.

Understanding the package manager options

When you select a package, you will see an expandable Options control below the version selector. For some project types (for example, .NET Core projects), only the Show preview window option is provided.

Showing preview window

If you enable the Show preview window option, a window shows the dependencies of a selected package before the package is installed.

Install and update options

Dependency behavior specifies how NuGet selects the version of dependency packages to install.

File conflict action specifies how NuGet deals with packages existing in the project or local machine.

Uninstall options

Managing Node packages

The Node Package Manager (NPM) in DevMagic Studio allows you to install, uninstall and update Node packages in projects and solutions. Projects that can use NPM are mainly JavaScript/TypeScript projects (for example, web applications, Angular projects, Vue projects, etc.).

Options

To access the general settings for the Node Package Manager, select menu Tools > Options in DevMagic Studio IDE to open the Options window and then navigate to Node Package Manager. For detailed information about the options, refer to Node Package Manager.

Package Source

The Node Package Manager can be configured to fetch packages from different locations. By default these locations are included:

• NPM – The largest and most popular repository for JavaScript packages.

• Yarn – Yarn is an alternative package manager for Node.js projects. It offers the same main features as NPM but has some other additional ones such as parallel downloads. Using this package source requires Yarn to be installed (can be installed with npm install -g yarn).

Package Manager Tabs

Same as the NuGet Package Manager, the Node Package Manager is mainly composed of three tabs:

• Browse – The Browse tab allows you to search for packages showing you a list of matches based on your search terms.

• Installed – The Installed tab shows the packages installed in the current project. The icon shows a green down arrow if the package is up to date or a blue up arrow if there are updates available.

• Updates – The Updates tab displays only those packages that are outdated (packages that have an update available).

Output

The execution result of the Node Package Manager commands will be displayed in the Output panel. You will need to select NPM from the Show output from list in order to show the result.

When you execute a command, the output will show the command that was executed, how many packages were installed, and any other additional information relevant to your particular installation.

Using the Node Package Manager

Alongside the newly added project-types, DevMagic Studio includes a Graphical User Interface (GUI) frontend for Node’s Package Manager (NPM). The main operations (install, update, remove) will be explained in this section.

Before following the steps below, make sure you have a Vue or Angular project open in the Solution Explorer.

Opening the Node Package Manager

To open the Node Package Manager, right click on the Packages entry of the Vue or Angular project in the Solution Explorer and then select the Install New Node Packages option from the popup menu.

Installing packages

To install the package using the Node Package Manager,

Step 1: Open the Node Package Manager (as described above).

Step 2: Select the Browse tab in the Node Package Manager.

Step 3: Search for the package you want to install using the search field.

Step 4: On the details panel, click the Install Package button.

Step 5: Make sure the installation is successful. The installation result can be viewed in the Output panel.

Step 6: Expand the Packages entry of the project node and make sure the package has been installed correctly.

Updating packages

To update the Node package,

Step 1: Open the Node Package Manager.

Step 2: Select the Updates tab.

Step 3: Select the package you want to update.

Step 4: In the details panel, select the version you want to update to. You can select (latest) to have the latest version be automatically selected.

Step 5: Click the Install Package button.

Removing packages

To remove the NPM package,

Step 1: Open the Node Package Manager.

Step 2: Select the Installed tab.

Step 3: In the package list, select the package you want to remove.

Step 4: In the package details panel, click the Uninstall Package button.

Options Panel

You can configure the following settings for each individual package that is to be installed:

• Dependency Type – The type of dependency the current package is. Options are:

  • Standard – Packages that are required for the proper function of the project and will be included when the project is published.
  • Development – Packages that are only required during development and are not to be included when publishing.
  • Optional – Optional packages not required for the function of the project. Failing to install this type of dependencies will not stop the installation process.

• Add to packages.json – Add the installed dependency package to the package.json file in the project.

• Selected version – The version of the package to install.

• Other NPM arguments – Any other arguments to pass to the CLI.

Using the Terminal CLI

The following demonstrates the alternative ways to install and maintain packages using Node’s integrated CLI. The following commands require NPM to exist and be accessible through the system’s PATH environment variable. This should be already done by default (through the Node installation).

Searching Packages

To search for packages in the default NPM Package Source, use the search command.

For example:

npm search moment

Outputs:

NAME                      | DESCRIPTION          | AUTHOR          | DATE       | VERSION  | KEYWORDS
moment                    | Parse, validate,…    | =ichernev…      | 2020-10-06 | 2.29.1   | moment date time parse form
dayjs                     | 2KB immutable date…  | =iamkun         | 2021-09-10 | 1.10.7   | dayjs date time immutable m
moment-timezone           | Parse and display…   | =ichernev…      | 2021-11-10 | 0.5.34   | moment date time timezone o
react-moment-proptypes    | React proptype for…  | =calebmorris…   | 2021-03-24 | 1.8.1    | moment react props proptype
react-moment              | React component for… | =web-headzoo    | 2020-12-19 | 1.1.1    | date moment react react-com
fecha                     | Date formatting and… | =taylorhakes    | 2021-04-05 | 4.2.1    | date parse moment format fe
moment-jalaali            | Jalaali (Jalali,…    | =behrang…       | 2021-11-29 | 0.9.4    | jalaali jalali persian khor
vue-moment                | Handy Moment.js…     | =brockpetrie…   | 2019-12-22 | 4.1.0    | vue custom date time filter
react-day-picker          | Flexible date…       | =gpbl           | 2021-03-19 | 7.4.10   | react react-component compo
moment-duration-format    | A moment.js plugin…  | =jsmreese       | 2019-06-05 | 2.3.2    | moment duration format
relative-time-parser      | A moment.js plugin…  | =cmaurer        | 2021-10-23 | 1.0.15   | moment moment.js date graph
moment-business-days      | MomentJS plugin to…  | =ianaya89…      | 2020-04-16 | 1.2.0    | moment momentjs business da
ember-moment              | Moment.js template…  | =knownasilya…   | 2022-01-21 | 10.0.0   | ember-addon moment momentjs
moment-business           | Methods to work…     | =jmeas          | 2016-09-16 | 3.0.1    | moment momentjs moment.js b
@momentum-ui/core         | Cisco Momentum UI…   | =pauljeter…     | 2021-12-17 | 19.15.16 | Momentum Design Cisco Webex
moment-jdateformatparser  | Translates the…      | =herom =madmg   | 2018-06-26 | 1.2.1    | moment java date format jav
moment-immutable          | Make moment.js…      | =smartin85      | 2021-02-14 | 1.0.9    | momentjs date immutable rea
@ladjs/moment             | Parse, validate,…    | =shadowgate15…  | 2019-06-19 | 2.24.0   | moment date time parse form
jalali-moment             | Manipulate and…      | =fingerpich     | 2022-01-31 | 3.3.11   | manipulate validate jalali
moment-business-time      | Query and…           | =lennym         | 2022-01-13 | 2.0.0    | moment working time working

To view details of a specific package, use the view command.

For example:

npm view moment

Outputs:

moment@2.29.1 | MIT | deps: none | versions: 71
Parse, validate, manipulate, and display dates
https://momentjs.com

keywords: moment, date, time, parse, format, validate, i18n, l10n, ender

dist
.tarball: https://registry.npmjs.org/moment/-/moment-2.29.1.tgz
.shasum: b2be769fa31940be9eeea6469c075e35006fa3d3
.integrity: sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
.unpackedSize: 4.2 MB

maintainers:
- ichernev <iskren.chernev@gmail.com>
- timrwood <washwithcare@gmail.com>
- mj1856 <mj1856@hotmail.com>
- maggiepint <maggiepint@gmail.com>
- marwahaha <marwahaha@berkeley.edu>

dist-tags:
latest: 2.29.1

published a year ago by marwahaha <marwahaha@berkeley.edu>

Installing Packages

To install the package, use the following command:

npm install {<options>} <package name>

For example:

npm install --save moment to install the Moment package for deployment

or

npm install --save-dev to install the Moment package for development

The –save and –save-dev switches add the package to the package.json’s dependencies or devDependencies sections respectively.

Please note that the –save switch is optional since NPM 5.0.

Packages in the devDependencies are meant to be used only in development. They will not be included when the application is published.

Installing packages this way will always install the latest version available (respecting the version constraints specified in the package.json file).

Installing different versions

To install other versions of packages, include the version in the package name as follows:

npm install <package>@<version>

For example:

npm install moment@2.29.0

To view the available versions of a specific package, use the following command:

npm view <package> versions

Refer to this link for detailed documentation on the npm install command.

Listing Packages

To view a list of the packages currently installed on the project, use the npm list command.

Passing the switch --depth <n> shows the installed packages and their dependencies up to n levels deep. When n = 0, it only shows direct dependencies (packages listed in the dependencies and devDependencies fields of the package.json). The value is 0 by default.

For example:

npm list

Outputs:

angularproject1@0.0.0 C:\<project path>\angularproject1
+-- @angular-devkit/build-angular@13.2.3
+-- @angular/animations@13.0.3
+-- @angular/cli@13.0.4
+-- @angular/common@13.0.3
+-- @angular/compiler-cli@13.0.3
+-- @angular/compiler@13.0.3
+-- @angular/core@13.0.3
+-- @angular/forms@13.0.3
+-- @angular/platform-browser-dynamic@13.0.3
+-- @angular/platform-browser@13.0.3
+-- @angular/router@13.0.3
+-- @types/jasmine@3.10.3
+-- @types/node@12.20.45
+-- jasmine-core@3.99.0
+-- karma-chrome-launcher@3.1.0
+-- karma-coverage@2.2.0
+-- karma-jasmine-html-reporter@1.7.0
+-- karma-jasmine@4.0.1
+-- karma@6.3.16
+-- moment@2.29.1
+-- rxjs@7.4.0
+-- tslib@2.3.1
+-- typescript@4.4.4
`-- zone.js@0.11.4

Updating Packages

To update individual packages or all packages in the project, use the update command:

npm update <package>

For example:

npm update moment

This will update to the latest version allowed by the version constraints specified in the package.json file.

If no is specified, it attempts to update all the packages in the current project (or in global, if the parameter -g is specified).

Refer to this link for detailed documentation on the npm update command.

Removing Packages

To remove packages from the local project, use the npm uninstall command:

npm uninstall <package>

For example:

npm uninstall moment

This will remove the moment package and all packages installed on its behalf (that are not marked as dependencies for other packages).

Refer to this link for detailed documentation on the npm uninstall command.