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:
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.
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.
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:
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.
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.
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.
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.
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.
DevMagic Studio currently supports three referencing methods, which are:
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:
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.
If your application cannot find a referenced component, an exception will be thrown. There are several scenarios in which an exception will be thrown.
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 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:
appsettings.json
In the file:
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.
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.
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.
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.
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:
and the following item templates:
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.
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:
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.
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.
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.
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).
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.
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.
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.
If you enable the Show preview window option, a window shows the dependencies of a selected package before the package is installed.
Dependency behavior specifies how NuGet selects the version of dependency packages to install.
Option | Description |
---|---|
Ignore Dependencies | Does not install any dependencies. |
Lowest | Installs the dependency with the minimum version number that meets the requirements of the primary selected package. It is the default option. |
Highest Patch | Installs the version with the same major and minor version numbers but the highest patch number. If version 3.2.2 is specified, for instance, the highest version starting with 3.2 will be installed. |
Highest Minor | Installs the version with the same major version number but the highest minor number and patch number. If version 3.2.2 is specified, for instance, the highest version starting with 3 will be installed. |
Highest | Installs the highest available version of the package. |
File conflict action specifies how NuGet deals with packages existing in the project or local machine.
Option | Description |
---|---|
Prompt | Requires NuGet to ask whether to retain or overwrite existing packages. |
Ignore All | Requires NuGet to skip overwriting any existing packages. |
Overwrite All | Requires NuGet to overwrite any existing packages. |
Option | Description |
---|---|
Remove dependencies | Removes any dependency packages not referenced elsewhere in the project. |
Force uninstall, even if there are dependencies on it | Uninstalls a package even if it is still being referenced in the project. This option is often used together with Remove dependencies to remove a package. However, applying this option may lead to broken references in the project. |
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.).
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.
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
).
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).
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.
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.
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.
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.
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.
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.
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:
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.
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).
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>
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).
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.
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
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
If no
Refer to this link for detailed documentation on the npm update
command.
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.