{"id":28386,"date":"2019-07-23T00:00:00","date_gmt":"2019-07-22T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/visual-studio-code-nella-tua-app\/"},"modified":"2021-05-20T18:54:21","modified_gmt":"2021-05-20T16:54:21","slug":"visual-studio-code-in-your-app","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/","title":{"rendered":"Visual Studio Code in your App!"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"608\" data-attachment-id=\"28367\" data-permalink=\"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/attachment\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923.png?fit=1024%2C608&amp;ssl=1\" data-orig-size=\"1024,608\" data-comments-opened=\"0\" data-image-title=\"ef2482d2-a0c4-4f26-b70a-3dcc8afa5923\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923.png?fit=1024%2C608&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923.png?resize=1024%2C608&#038;ssl=1\" alt=\"\" class=\"wp-image-28367\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923.png 1024w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923-980x582.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923-480x285.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">During a consulting by a customer, which commissioned us the development of an e-commerce platform, we were asked if and how it was possible to allow users to&nbsp;<em>customize<\/em>&nbsp;their own interface and modify pages styles and themes, and to save them in a data source, maybe with a version number, in order to allow file recovery.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For this reason, we compiled a list of different problems to deal with:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>versioning<\/strong>: define a files versioning mode, perhaps considering not definitive versions too (draft);<\/li><li><strong>editing<\/strong>&nbsp;inline: files modification through syntax coloring, if possible;<\/li><li><strong>comparing<\/strong>: comparison of files with previous versions;<\/li><li><strong>provisioning<\/strong>: define a files recovery mode.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The e.commerce platform was based on the framework&nbsp;<strong>ASP.NET MVC 5<\/strong>, then we search for solutions in the&nbsp;<strong>.NET<\/strong>&nbsp;environment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For the file editing, we opted for&nbsp;<strong>Monaco Editor<\/strong>, a tool that powers&nbsp;<strong>Visual Studio Code<\/strong>&nbsp;too: it\u2019s supported by main browsers and supplies some supports, as the text coloring based on the used language, the&nbsp;<strong><em>intellisense<\/em><\/strong>&nbsp;and the files&nbsp;<strong><em>diff<\/em><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Monaco Editor is easy to install and to configure, since it needs the link to a JS library and, thanks to documented API (<a href=\"https:\/\/microsoft.github.io\/monaco-editor\/api\/index.html\">API Monaco Editor<\/a>), it is possible to obtain an instance ready to be used. As example, the instruction:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nmonaco.editor.create(document.getElementById(&quot;container&quot;), {\n\u00a0\u00a0\u00a0\u00a0value: &quot;function hello() {\\n\\t alert(&#039;Hello world!&#039;);\\n}&quot;,\n\u00a0\u00a0\u00a0\u00a0language: &quot;javascript&quot;\n});\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">on the page:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;div id=&quot;container&quot; style=&quot;height:100%;&quot;&gt;&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">generates the screen:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"952\" height=\"175\" data-attachment-id=\"28372\" data-permalink=\"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/attachment\/image01-19-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image01-19.png?fit=952%2C175&amp;ssl=1\" data-orig-size=\"952,175\" data-comments-opened=\"0\" data-image-title=\"image01-19\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image01-19.png?fit=952%2C175&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image01-19.png?resize=952%2C175&#038;ssl=1\" alt=\"\" class=\"wp-image-28372\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image01-19.png 952w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image01-19-480x88.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) 952px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In our case, we used the editor both to modify and to compare different files versions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To define those files, that can be modified, we created the class&nbsp;<strong>EditableContent<\/strong>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\npublic class EditableContent\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&#x5B;Key]\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0public int Id { get; set; }\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&#x5B;Required]\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0public string Path { get; set; }\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0public string Type { get; set; }\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&#x5B;DefaultValue(false)]\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0public bool Disabled { get; set; }\n\u00a0\u00a0\u00a0\u00a0} \n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">The attribute Type is used to rightly display the file on Monaco Editor, since, as I previously wrote, it is possible to define the file type, in order to obtain the text coloring and the error reporting.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For already modified files, we have the class&nbsp;<strong>StoredContent<\/strong>&nbsp;instead:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\npublic class StoredContent\n{\n\u00a0\u00a0\u00a0\u00a0&#x5B;Key]\n\u00a0\u00a0\u00a0\u00a0public int Id { get; set; }\n\u00a0\u00a0\u00a0\u00a0&#x5B;Required]\n\u00a0\u00a0\u00a0\u00a0public string Path { get; set; }\n\u00a0\u00a0\u00a0\u00a0&#x5B;Required]\n\u00a0\u00a0\u00a0\u00a0public string Content { get; set; }\n\u00a0\u00a0\u00a0\u00a0&#x5B;Required]\n\u00a0\u00a0\u00a0\u00a0public int Version { get; set; }\n\u00a0\u00a0\u00a0\u00a0&#x5B;DefaultValue(false)]\n\u00a0\u00a0\u00a0\u00a0public bool Draft { get; set; }\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">In StoredContent both the version number and the draft attribute are present. This last indicates if we are dealing with a definitive version.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For&nbsp;<em>CRUD (Create, Read, Update e Delete)<\/em>&nbsp;operations of files, we created the API controller&nbsp;<strong>ContentsController<\/strong>, that has following methods:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>IEnumerable&lt;string&gt; GetEditableContents(): it is used to obtain the list of adjustable contents;<\/li><li>IEnumerable&lt;StoredContentVersionModel&gt; GetContentAvailableVersions(BaseContentModel baseContent): it obtains the list of available versions for the specified path;<\/li><li>string GetContent(StoredContentModel storedContent): it obtains the file content starting from the path and the version number;<\/li><li>StoredContentModel GetLatestContent(BaseContentModel baseContent): it obtains the file content starting from path and relative to the last version number available;<\/li><li>int CreateStoredContent(StoredContentModel storedContent): it creates a new file version;<\/li><li>int RecoverStoredContentVersion([FromBody] StoredContentModel storedContent): it recovers a previously saved version and imports it as the last one.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>BaseContentModel, StoredContentModel, StoredContentVersionModel<\/strong>&nbsp;are viewmodel, used for the data exchange with the views, and they are defined as:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\npublic class BaseContentModel\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0public string Path { get; set; }\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public class StoredContentVersionModel \n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0public int Version { get; set; }\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0public bool Draft { get; set; }\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0public class StoredContentModel : BaseContentModel\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0public string Content { get; set; }\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0public string Type { get; set; }\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0public bool? Draft { get; set; }\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0public int Version { get; set; }\n\u00a0\u00a0\u00a0\u00a0}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">In particular, the implementation has some points to be defined better, as, for example,&nbsp;<strong>GetLatestContent<\/strong>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\npublic StoredContentModel GetLatestContent(&#x5B;FromBody] BaseContentModel baseContent)\n{\n\u00a0\u00a0\u00a0\u00a0var storedContent = _context.StoredContents\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.Where(sc =&gt; sc.Path == baseContent.Path)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.OrderByDescending(sc =&gt; sc.Version).FirstOrDefault();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (storedContent == null)\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var webRoot = _env.WebRootPath;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var file = System.IO.Path.Combine(webRoot, baseContent.Path);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0storedContent = new StoredContent()\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Path = baseContent.Path,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Content = System.IO.File.ReadAllText(file, System.Text.Encoding.Default),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Version = 0,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Draft = false\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0_context.StoredContents.Add(storedContent);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0_context.SaveChanges();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0return new StoredContentModel()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&#x5B;...]\n\u00a0\u00a0\u00a0\u00a0};\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">When there\u2019s no corresponding file on the db, a version 0 is created and it contains the content of the file on the file system.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">GetLatestContent is invoked by an Ajax call through jquery:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nfunction loadPage(path) {\n\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: &quot;\/api\/contents\/GetLatestContent&quot;,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: &quot;POST&quot;,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: JSON.stringify({Path: path }),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentType: &quot;application\/json; charset=utf-8&quot;,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dataType: &quot;json&quot;,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success: function (data) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0setMonacoEditor(data.content, data.type, data.path);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0})\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">where setMonacoEditor() launches the editor in reading mode and modifies the single file:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nfunction setMonacoEditor(text, mode, path) {\n\u00a0\u00a0\u00a0\u00a0if (!editor) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(&#039;#editor&#039;).empty();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0editor = monaco.editor.create(document.getElementById(&#039;editor&#039;), {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0model: null,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0automaticLayout: true\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0var oldModel = editor.getModel();\n\u00a0\u00a0\u00a0\u00a0var newModel = monaco.editor.createModel(text, mode);\n\u00a0\u00a0\u00a0\u00a0editor.setModel(newModel);\n\u00a0\u00a0\u00a0\u00a0if (oldModel) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0oldModel.dispose();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\/\/&#x5B;...]\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">To save the new content, there\u2019s the method&nbsp;<strong>CreateStoredContent<\/strong>&nbsp;which creates a new file version:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\npublic int CreateStoredContent(&#x5B;FromBody] StoredContentModel storedContent)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var storedContentToCreate = new StoredContent()\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Content = storedContent.Content,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Path = storedContent.Path,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Draft = storedContent.Draft.GetValueOrDefault(false)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var latestStoredContent = _context.StoredContents\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.Where(sc =&gt; sc.Path == storedContent.Path)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.OrderByDescending(sc =&gt; sc.Version).FirstOrDefault();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (latestStoredContent == null){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0storedContentToCreate.Version = 1;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0else if (latestStoredContent.Draft){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0storedContentToCreate.Version = latestStoredContent.Version;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0storedContentToCreate.Version = ++latestStoredContent.Version;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0_context.StoredContents.Add(storedContentToCreate);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0_context.SaveChanges();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return storedContentToCreate.Id;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">The management of the version number, depending on the Draft flag set, is to be noted. If the last version present on the db is a&nbsp;<strong>draft<\/strong>, then the version number doesn\u2019t increment, on the contrary it depends on the draft flag passed to the service.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In our example, in which we set the file site.css as adjustable, the windows appears as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"551\" data-attachment-id=\"28377\" data-permalink=\"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/attachment\/image02-18-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image02-18.png?fit=1597%2C859&amp;ssl=1\" data-orig-size=\"1597,859\" data-comments-opened=\"0\" data-image-title=\"image02-18\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image02-18.png?fit=1024%2C551&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image02-18.png?resize=1024%2C551&#038;ssl=1\" alt=\"\" class=\"wp-image-28377\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image02-18-980x527.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image02-18-480x258.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">For the diff of files, we recall another ContentsController method,&nbsp;<strong>GetContent<\/strong>, and we pass the path and number version in the&nbsp;<em>body<\/em>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\npublic string GetContent(&#x5B;FromBody] StoredContentModel storedContent)\n{\n\u00a0\u00a0\u00a0\u00a0var _storedContent = _context.StoredContents.FirstOrDefault(sc =&gt; sc.Path == storedContent.Path &amp;&amp; sc.Version == storedContent.Version);\n\u00a0\u00a0\u00a0\u00a0if (_storedContent != null)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return _storedContent.Content;\n\u00a0\u00a0\u00a0\u00a0else\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return &quot;&quot;;\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">On the front-end side, we find the javascript method&nbsp;<strong>loadPageDiff<\/strong>:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\nfunction loadPageDiff(path, newversion, oldversion, mode) {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var onError = function () {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(&#039;.loading.diff-editor&#039;).fadeOut({ duration: 200 });\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(&#039;#diff-editor&#039;).append(&#039;&lt;p class=&quot;alert alert-error&quot;&gt;Failed to load diff editor sample&lt;\/p&gt;&#039;);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(&#039;.loading.diff-editor&#039;).show();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var lhsData = null, rhsData = null, jsMode = null;\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: &quot;\/api\/contents\/GetContent&quot;,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: &quot;POST&quot;,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: JSON.stringify({ Path: path, Version: newversion }),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentType: &quot;application\/json; charset=utf-8&quot;,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dataType: &quot;text&quot;,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success: function (data) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0lhsData = data;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onProgress();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$.ajax({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0url: &quot;\/api\/contents\/GetContent&quot;,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: &quot;POST&quot;,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0data: JSON.stringify({ Path: path, Version: oldversion }),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0contentType: &quot;application\/json; charset=utf-8&quot;,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0dataType: &quot;text&quot;,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0success: function (data) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0rhsData = data;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0onProgress();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function onProgress() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ set diff environment\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">that recalls GetContent two times and positions the versions in tiled windows, in order to allow user to verify modifications made to the file and to check them with previous versions.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The recovery functionality is guaranteed by the method RecoverStoredContentVersion<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\npublic int RecoverStoredContentVersion(&#x5B;FromBody] StoredContentModel storedContent)\n{\n\u00a0\u00a0\u00a0\u00a0var versionedStoredContent = _context.StoredContents\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.Where(sc =&gt; sc.Path == storedContent.Path &amp;&amp; sc.Version == storedContent.Version)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.FirstOrDefault();\n\u00a0\n\u00a0\u00a0\u00a0\u00a0var latestStoredContentVersion = _context.StoredContents\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.Where(sc =&gt; sc.Path == storedContent.Path)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.Max(sc =&gt; sc.Version);\n\u00a0\n\u00a0\u00a0\u00a0\u00a0var storedContentToCreate = new StoredContent()\n\u00a0\u00a0\u00a0\u00a0{\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Path = storedContent.Path,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Content = versionedStoredContent.Content,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Version = ++latestStoredContentVersion,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Draft = false\n\u00a0\u00a0\u00a0\u00a0};\n\u00a0\n\u00a0\u00a0\u00a0\u00a0_context.StoredContents.Add(storedContentToCreate);\n\u00a0\u00a0\u00a0\u00a0_context.SaveChanges();\n\u00a0\u00a0\u00a0\u00a0return storedContentToCreate.Id;\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">In our example, the diff window is shown as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" data-attachment-id=\"28380\" data-permalink=\"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/attachment\/image03-16-2\/\" data-orig-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image03-16.png?fit=1539%2C731&amp;ssl=1\" data-orig-size=\"1539,731\" data-comments-opened=\"0\" data-image-title=\"image03-16\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image03-16.png?fit=1024%2C486&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/image03-16.png?resize=1024%2C486&#038;ssl=1\" alt=\"\" class=\"wp-image-28380\" srcset=\"https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image03-16-980x465.png 980w, https:\/\/blexin.com\/wp-content\/uploads\/2020\/12\/image03-16-480x228.png 480w\" sizes=\"auto, (min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1024px, 100vw\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Files recovery is not the subject of this article, but we would like to introduce two important classes. On .NET Framework you can find the&nbsp;<strong>VirtualPathProvider<\/strong>&nbsp;class (<a href=\"https:\/\/docs.microsoft.com\/it-it\/dotnet\/api\/system.web.hosting.virtualpathprovider?view=netframework-4.8\">here<\/a>), in the library System. Web. Hosting. That class describes how to create a virtual file system by several types of data and allows to define customized recovery and caching logics by overriding following methods:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>VirtualFile GetFile(string virtualPath): it allows to recover a file both from file system and from virtual path;<\/li><li>bool FileExists(string virtualPath): it allows to verify if a virtual file exists;<\/li><li>CacheDependency GetCacheDependency(string virtualPath, IEnumerable virtualPathDependencies, DateTime utcStart): it manages virtual file caching;<\/li><li>String GetFileHash(String virtualPath, IEnumerable virtualPathDependencies): it returns an hash of specified file.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">On .NET Core you can find&nbsp;<strong>IfileProvider<\/strong>&nbsp;interface (<a href=\"https:\/\/www.blexin.com\/en-US\/Article\/Blog\/%E2%80%9Dhttps:\/\/docs.microsoft.com\/it-it\/aspnet\/core\/fundamentals\/file-providers?view=aspnetcore-2.2\">here<\/a>) that, as for VirtualPathProvider, defines file recovery logic from several sources, by implementing following methods:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>IDirectoryContents GetDirectoryContents(string subpath): it retirns the directory contents (folders and files);<\/li><li>IFileInfo GetFileInfo(string subpath): it returns a FileInfo object (here you have to define the business logic);<\/li><li>IChangeToken Watch(string filter): it checks if file has changed since latest use (here you might define the business logic in file access).<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You can find an example of IFileProvider, and all the code used in this article, at this link.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/enricobencivenga\/MonacoEditor\">https:\/\/github.com\/enricobencivenga\/MonacoEditor<\/a><\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Integrate Monaco, the editor behind Visual Studio Code, in our web applications<\/p>\n","protected":false},"author":196716247,"featured_media":28367,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_wpcom_ai_launchpad_first_post":false,"_jetpack_hide_featured_image":false,"_jetpack_featured_image_duplicate_dismissed":0,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"{title}\n\n{excerpt}\n\n{url}","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637524],"tags":[688637422,688637448],"class_list":["post-28386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-en","tag-asp-net-en","tag-vscode-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Visual Studio Code in your App! - Blexin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visual Studio Code in your App! - Blexin\" \/>\n<meta property=\"og:description\" content=\"Integrate Monaco, the editor behind Visual Studio Code, in our web applications\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-22T22:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-20T16:54:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i2.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923.png?fit=1024%2C608&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"608\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Enrico Bencivenga\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Enrico Bencivenga\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/visual-studio-code-in-your-app\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/visual-studio-code-in-your-app\\\/\"},\"author\":{\"name\":\"Enrico Bencivenga\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/74e4443d1d7ad12d5b4a8db7f63f0194\"},\"headline\":\"Visual Studio Code in your App!\",\"datePublished\":\"2019-07-22T22:00:00+00:00\",\"dateModified\":\"2021-05-20T16:54:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/visual-studio-code-in-your-app\\\/\"},\"wordCount\":929,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/visual-studio-code-in-your-app\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923.png?fit=1024%2C608&ssl=1\",\"keywords\":[\"Asp.net\",\"VScode\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/visual-studio-code-in-your-app\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/visual-studio-code-in-your-app\\\/\",\"name\":\"Visual Studio Code in your App! - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/visual-studio-code-in-your-app\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/visual-studio-code-in-your-app\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923.png?fit=1024%2C608&ssl=1\",\"datePublished\":\"2019-07-22T22:00:00+00:00\",\"dateModified\":\"2021-05-20T16:54:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/74e4443d1d7ad12d5b4a8db7f63f0194\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/visual-studio-code-in-your-app\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/visual-studio-code-in-your-app\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/visual-studio-code-in-your-app\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923.png?fit=1024%2C608&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923.png?fit=1024%2C608&ssl=1\",\"width\":1024,\"height\":608},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/visual-studio-code-in-your-app\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visual Studio Code in your App!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/74e4443d1d7ad12d5b4a8db7f63f0194\",\"name\":\"Enrico Bencivenga\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4ea7187309674789d6f02c6b757e1f21c8cf800abb2419b4edaa8b09d4c99548?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4ea7187309674789d6f02c6b757e1f21c8cf800abb2419b4edaa8b09d4c99548?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/4ea7187309674789d6f02c6b757e1f21c8cf800abb2419b4edaa8b09d4c99548?s=96&d=identicon&r=g\",\"caption\":\"Enrico Bencivenga\"},\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/author\\\/enrico-bencivengablexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Visual Studio Code in your App! - Blexin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/","og_locale":"en_US","og_type":"article","og_title":"Visual Studio Code in your App! - Blexin","og_description":"Integrate Monaco, the editor behind Visual Studio Code, in our web applications","og_url":"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/","og_site_name":"Blexin","article_published_time":"2019-07-22T22:00:00+00:00","article_modified_time":"2021-05-20T16:54:21+00:00","og_image":[{"width":1024,"height":608,"url":"https:\/\/i2.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923.png?fit=1024%2C608&ssl=1","type":"image\/png"}],"author":"Enrico Bencivenga","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Enrico Bencivenga","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/"},"author":{"name":"Enrico Bencivenga","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/74e4443d1d7ad12d5b4a8db7f63f0194"},"headline":"Visual Studio Code in your App!","datePublished":"2019-07-22T22:00:00+00:00","dateModified":"2021-05-20T16:54:21+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/"},"wordCount":929,"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923.png?fit=1024%2C608&ssl=1","keywords":["Asp.net","VScode"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/","url":"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/","name":"Visual Studio Code in your App! - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923.png?fit=1024%2C608&ssl=1","datePublished":"2019-07-22T22:00:00+00:00","dateModified":"2021-05-20T16:54:21+00:00","author":{"@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/74e4443d1d7ad12d5b4a8db7f63f0194"},"breadcrumb":{"@id":"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923.png?fit=1024%2C608&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923.png?fit=1024%2C608&ssl=1","width":1024,"height":608},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/en\/blog-en\/visual-studio-code-in-your-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/en\/"},{"@type":"ListItem","position":2,"name":"Visual Studio Code in your App!"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/en\/#website","url":"https:\/\/blexin.com\/en\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/74e4443d1d7ad12d5b4a8db7f63f0194","name":"Enrico Bencivenga","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4ea7187309674789d6f02c6b757e1f21c8cf800abb2419b4edaa8b09d4c99548?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4ea7187309674789d6f02c6b757e1f21c8cf800abb2419b4edaa8b09d4c99548?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4ea7187309674789d6f02c6b757e1f21c8cf800abb2419b4edaa8b09d4c99548?s=96&d=identicon&r=g","caption":"Enrico Bencivenga"},"url":"https:\/\/blexin.com\/en\/author\/enrico-bencivengablexin-com\/"}]}},"jetpack_publicize_connections":[],"jetpack_likes_enabled":false,"jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-7nQ","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/ef2482d2-a0c4-4f26-b70a-3dcc8afa5923.png?fit=1024%2C608&ssl=1","_links":{"self":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/users\/196716247"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/comments?post=28386"}],"version-history":[{"count":10,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28386\/revisions"}],"predecessor-version":[{"id":31976,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28386\/revisions\/31976"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media\/28367"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media?parent=28386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/categories?post=28386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/tags?post=28386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}