[{"data":1,"prerenderedAt":1951},["ShallowReactive",2],{"tag-vuejs":3},{"tag":4,"articles":24},{"id":5,"title":6,"body":7,"description":14,"extension":15,"img":16,"meta":17,"name":18,"navigation":19,"path":20,"seo":21,"stem":22,"__hash__":23},"tags\u002Ftags\u002Fvuejs.md","Vuejs",{"type":8,"value":9,"toc":10},"minimark",[],{"title":11,"searchDepth":12,"depth":12,"links":13},"",2,[],"Vue (pronounced \u002Fvjuː\u002F, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable","md","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1598313183973-4effcded8d5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80",{},"vuejs",true,"\u002Ftags\u002Fvuejs",{"description":14},"tags\u002Fvuejs","FLzo8HD9QLE9FzBr4K8hRvB7QUPBQ4Ku-dpXQK90QZM",[25,224,753,932,986,1089,1251,1529],{"id":26,"title":27,"author":28,"body":29,"createdAt":215,"description":216,"extension":15,"img":217,"meta":218,"navigation":19,"path":219,"seo":220,"stem":221,"tags":222,"updatedAt":215,"__hash__":223},"articles\u002Farticles\u002Fhot-module-reload-hmr-issues.md","Hot Module Reload (HMR) Issues","[object Object]",{"type":8,"value":30,"toc":213},[31,35,43,55,63,66,69,74,81,84,209],[32,33,34],"p",{},"Using latest vue.js bit and vue-cli to create a project, I immediately came up against HMR not reloading after making changes to .vue files.",[32,36,37,38,42],{},"What is HMR\n\"",[39,40,41],"strong",{},"Hot Reload","\" is not simply reloading the page when you edit a file. With hot reload enabled, when you edit a *. vue file,\nall instances of that component will be swapped in without reloading the page. It even preserves the current state of your app and these swapped\ncomponents!",[32,44,45,46,50,54],{},"I started my project npm run serve, opened my browser ",[47,48],"a",{"href":49},"http:\u002F\u002Flocalhost:8080",[47,51,49],{"href":49,"rel":52},[53],"nofollow"," and navigated around my new app.\nGreat. Within my IDE I modified any vue file, I could see that vue-cli-server (with it’s built in web server) identified that\na file had changed and I could see webpack rebuilding my ts\u002Fjs files. Great. I looked at the browser and my simple html change was not reflected.\nI could see errors in the chrome dev tools network tab like following.",[56,57,58,59,62],"blockquote",{},"\n[WDS] Disconnected net:: ERR_CONNECTION_TIMED_OUT ",[47,60,61],{"title":61,"href":61},"http:\u002F\u002F192.168.1.102:8080\u002Fsockjs-node\u002Finfo?t=1598645595925"," \n",[32,64,65],{},"###Solution\nThere are a number of articles regarding setting NODE_ENV=development,\nas well as articles discussing the vue.config.js file. The solution for me was modifying the package.json script that is\nused by npm to start the project from",[32,67,68],{},"\"serve\": \"vue-cli-service serve\",",[32,70,71],{},[39,72,73],{},"To",[32,75,76,77,80],{},"\"serve2\": \"vue-cli-service serve ",[39,78,79],{},"--host localhost","\",",[32,82,83],{},"I also tried a number of options within the vue.config.js but was able to remove once I identified the solution (above).",[85,86,90],"pre",{"className":87,"code":88,"language":89,"meta":11,"style":11},"language-js shiki shiki-themes github-light github-dark","\u002F\u002F vue.config.js \nmodule.exports = {\n    devServer: \n          {  \u002F\u002Fhost:'localhost'  \n              \u002F\u002F useLocalIp: false,  \n            \u002F\u002F proxy: 'http:\u002F\u002Flocalhost:8080',  \n            \u002F\u002F public: '172.23.3.180:8080',  \n            \u002F\u002F watchOptions: {  \n            \u002F\u002F poll: true  \n            \u002F\u002F }  \n            }, configureWebpack: {  \n                      plugins: [\n                      \u002F\u002Fnew MyAwesomeWebpackPlugin()  \n                      ] \n                  }\n            }\n","js",[91,92,93,102,122,128,137,143,149,155,161,167,173,179,185,191,197,203],"code",{"__ignoreMap":11},[94,95,98],"span",{"class":96,"line":97},"line",1,[94,99,101],{"class":100},"sJ8bj","\u002F\u002F vue.config.js \n",[94,103,104,108,112,115,119],{"class":96,"line":12},[94,105,107],{"class":106},"sj4cs","module",[94,109,111],{"class":110},"sVt8B",".",[94,113,114],{"class":106},"exports",[94,116,118],{"class":117},"szBVR"," =",[94,120,121],{"class":110}," {\n",[94,123,125],{"class":96,"line":124},3,[94,126,127],{"class":110},"    devServer: \n",[94,129,131,134],{"class":96,"line":130},4,[94,132,133],{"class":110},"          {  ",[94,135,136],{"class":100},"\u002F\u002Fhost:'localhost'  \n",[94,138,140],{"class":96,"line":139},5,[94,141,142],{"class":100},"              \u002F\u002F useLocalIp: false,  \n",[94,144,146],{"class":96,"line":145},6,[94,147,148],{"class":100},"            \u002F\u002F proxy: 'http:\u002F\u002Flocalhost:8080',  \n",[94,150,152],{"class":96,"line":151},7,[94,153,154],{"class":100},"            \u002F\u002F public: '172.23.3.180:8080',  \n",[94,156,158],{"class":96,"line":157},8,[94,159,160],{"class":100},"            \u002F\u002F watchOptions: {  \n",[94,162,164],{"class":96,"line":163},9,[94,165,166],{"class":100},"            \u002F\u002F poll: true  \n",[94,168,170],{"class":96,"line":169},10,[94,171,172],{"class":100},"            \u002F\u002F }  \n",[94,174,176],{"class":96,"line":175},11,[94,177,178],{"class":110},"            }, configureWebpack: {  \n",[94,180,182],{"class":96,"line":181},12,[94,183,184],{"class":110},"                      plugins: [\n",[94,186,188],{"class":96,"line":187},13,[94,189,190],{"class":100},"                      \u002F\u002Fnew MyAwesomeWebpackPlugin()  \n",[94,192,194],{"class":96,"line":193},14,[94,195,196],{"class":110},"                      ] \n",[94,198,200],{"class":96,"line":199},15,[94,201,202],{"class":110},"                  }\n",[94,204,206],{"class":96,"line":205},16,[94,207,208],{"class":110},"            }\n",[210,211,212],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":11,"searchDepth":12,"depth":12,"links":214},[],"2020-08-28T20:50:38.782Z","HMR issues after creating new Vue app via vue-cli.  Hot Module Replacement (HMR) exchanges, adds, or removes modules while an aplication is running, without a full reload.  Ultimately, this significantly improves development efforts.","\u002Farticles\u002Fimages\u002Fwebpack.png",{},"\u002Farticles\u002Fhot-module-reload-hmr-issues",{"title":27,"description":216},"articles\u002Fhot-module-reload-hmr-issues",[18],"ji1AxRVh3i7FKPFuNIP_WlsYYW7t_5wc7KzZ105NyEU",{"id":225,"title":226,"author":227,"body":228,"createdAt":745,"description":746,"extension":15,"img":250,"meta":747,"navigation":19,"path":748,"seo":749,"stem":750,"tags":751,"updatedAt":745,"__hash__":752},"articles\u002Farticles\u002Fpath-to-resources-javascript-images-etc-not-found-with-vuejs-build.md","Path to Resources (JavaScript, Images etc.) Not Found with Vue.js Build",null,{"type":8,"value":229,"toc":743},[230,237,240,253,256,687,697,707,718,724,737,740],[32,231,232,233,236],{},"Using @vue\u002Fcli 4.3.1",[234,235],"br",{},"\nWith minimal changes to code\u002Fsolution I found that resources (path to files) was not found after performing npm run build.  I was hoping to just run the newly built web application in the client side browser from File Explorer.  I ran the page and saw an empty screen.  So what was the issue and resolution?",[32,238,239],{},"The issue (visible within the screen capture – white screen and ERR_FILE_NOT_FOUND error message from the Chrome Debugger – Network Tools)",[32,241,242],{},[47,243,245],{"href":244},"\u002Farticles\u002Fimages\u002Fimage_637255046941289166.png",[246,247],"img",{"style":248,"title":249,"src":250,"alt":249,"width":251,"height":252},"display: inline;","image","\u002Farticles\u002Fimages\u002Fimage_thumb_637255046943290619.png",1124,286,[32,254,255],{},"Doing a view source the problem started to surface.  You can see below the path was relative to the root directory.  While running from File Explorer this must be relative path.",[85,257,261],{"className":258,"code":259,"language":260,"meta":11,"style":11},"language-html shiki shiki-themes github-light github-dark","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n    \u003Chead>\n        \u003Cmeta charset=\"utf-8\">\n        \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n        \u003Cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n        \u003Clink rel=\"icon\" href=\"\u002Ffavicon.ico\">\u003Ctitle>Cargo\u003C\u002Ftitle>\n        \u003Clink href=\"\u002Fjs\u002Fcargo.js\" rel=\"preload\" as=\"script\">\n        \u003Clink href=\"\u002Fjs\u002Fchunk-common\u003C\u002Fstrong>.js\" rel=\"preload\" as=\"script\">\n        \u003Clink href=\"\u002Fjs\u002Fchunk-vendors.js\" rel=\"preload\" as=\"script\">\n    \u003C\u002Fhead>\n    \u003Cbody>\n        \u003Cnoscript>\n        \u003Cstrong>We're sorry but Cargo doesn't work properly \n        without JavaScript enabled. \n        Please enable it to continue.\u003C\u002Fstrong>\n        \u003C\u002Fnoscript>\n        \u003Cdiv id=\"app\">\u003C\u002Fdiv>\n        \u003C!-- built files will be auto injected -->\n        \u003Cscript type=\"text\u002Fjavascript\" src=\"\u002Fjs\u002Fchunk-vendors.js\">\u003C\u002Fscript>\n        \u003Cscript type=\"text\u002Fjavascript\" src=\"\u002Fjs\u002Fchunk-common.js\">\u003C\u002Fscript>\n        \u003Cscript type=\"text\u002Fjavascript\" src=\"\u002Fjs\u002Fcargo.js\">\u003C\u002Fscript>\n    \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html",[91,262,263,279,298,308,326,350,373,409,439,472,499,508,517,526,535,540,549,559,582,588,617,643,668,677],{"__ignoreMap":11},[94,264,265,268,272,276],{"class":96,"line":97},[94,266,267],{"class":110},"\u003C!",[94,269,271],{"class":270},"s9eBZ","DOCTYPE",[94,273,275],{"class":274},"sScJk"," html",[94,277,278],{"class":110},">\n",[94,280,281,284,286,289,292,296],{"class":96,"line":12},[94,282,283],{"class":110},"\u003C",[94,285,260],{"class":270},[94,287,288],{"class":274}," lang",[94,290,291],{"class":110},"=",[94,293,295],{"class":294},"sZZnC","\"en\"",[94,297,278],{"class":110},[94,299,300,303,306],{"class":96,"line":124},[94,301,302],{"class":110},"    \u003C",[94,304,305],{"class":270},"head",[94,307,278],{"class":110},[94,309,310,313,316,319,321,324],{"class":96,"line":130},[94,311,312],{"class":110},"        \u003C",[94,314,315],{"class":270},"meta",[94,317,318],{"class":274}," charset",[94,320,291],{"class":110},[94,322,323],{"class":294},"\"utf-8\"",[94,325,278],{"class":110},[94,327,328,330,332,335,337,340,343,345,348],{"class":96,"line":139},[94,329,312],{"class":110},[94,331,315],{"class":270},[94,333,334],{"class":274}," http-equiv",[94,336,291],{"class":110},[94,338,339],{"class":294},"\"X-UA-Compatible\"",[94,341,342],{"class":274}," content",[94,344,291],{"class":110},[94,346,347],{"class":294},"\"IE=edge\"",[94,349,278],{"class":110},[94,351,352,354,356,359,361,364,366,368,371],{"class":96,"line":145},[94,353,312],{"class":110},[94,355,315],{"class":270},[94,357,358],{"class":274}," name",[94,360,291],{"class":110},[94,362,363],{"class":294},"\"viewport\"",[94,365,342],{"class":274},[94,367,291],{"class":110},[94,369,370],{"class":294},"\"width=device-width,initial-scale=1.0\"",[94,372,278],{"class":110},[94,374,375,377,380,383,385,388,391,393,396,399,402,405,407],{"class":96,"line":151},[94,376,312],{"class":110},[94,378,379],{"class":270},"link",[94,381,382],{"class":274}," rel",[94,384,291],{"class":110},[94,386,387],{"class":294},"\"icon\"",[94,389,390],{"class":274}," href",[94,392,291],{"class":110},[94,394,395],{"class":294},"\"\u002Ffavicon.ico\"",[94,397,398],{"class":110},">\u003C",[94,400,401],{"class":270},"title",[94,403,404],{"class":110},">Cargo\u003C\u002F",[94,406,401],{"class":270},[94,408,278],{"class":110},[94,410,411,413,415,417,419,422,424,426,429,432,434,437],{"class":96,"line":157},[94,412,312],{"class":110},[94,414,379],{"class":270},[94,416,390],{"class":274},[94,418,291],{"class":110},[94,420,421],{"class":294},"\"\u002Fjs\u002Fcargo.js\"",[94,423,382],{"class":274},[94,425,291],{"class":110},[94,427,428],{"class":294},"\"preload\"",[94,430,431],{"class":274}," as",[94,433,291],{"class":110},[94,435,436],{"class":294},"\"script\"",[94,438,278],{"class":110},[94,440,441,443,445,447,449,452,455,458,460,462,464,466,468,470],{"class":96,"line":163},[94,442,312],{"class":110},[94,444,379],{"class":270},[94,446,390],{"class":274},[94,448,291],{"class":110},[94,450,451],{"class":294},"\"\u002Fjs\u002Fchunk-common",[94,453,283],{"class":454},"s7hpK",[94,456,457],{"class":294},"\u002Fstrong>.js\"",[94,459,382],{"class":274},[94,461,291],{"class":110},[94,463,428],{"class":294},[94,465,431],{"class":274},[94,467,291],{"class":110},[94,469,436],{"class":294},[94,471,278],{"class":110},[94,473,474,476,478,480,482,485,487,489,491,493,495,497],{"class":96,"line":169},[94,475,312],{"class":110},[94,477,379],{"class":270},[94,479,390],{"class":274},[94,481,291],{"class":110},[94,483,484],{"class":294},"\"\u002Fjs\u002Fchunk-vendors.js\"",[94,486,382],{"class":274},[94,488,291],{"class":110},[94,490,428],{"class":294},[94,492,431],{"class":274},[94,494,291],{"class":110},[94,496,436],{"class":294},[94,498,278],{"class":110},[94,500,501,504,506],{"class":96,"line":175},[94,502,503],{"class":110},"    \u003C\u002F",[94,505,305],{"class":270},[94,507,278],{"class":110},[94,509,510,512,515],{"class":96,"line":181},[94,511,302],{"class":110},[94,513,514],{"class":270},"body",[94,516,278],{"class":110},[94,518,519,521,524],{"class":96,"line":187},[94,520,312],{"class":110},[94,522,523],{"class":270},"noscript",[94,525,278],{"class":110},[94,527,528,530,532],{"class":96,"line":193},[94,529,312],{"class":110},[94,531,39],{"class":270},[94,533,534],{"class":110},">We're sorry but Cargo doesn't work properly \n",[94,536,537],{"class":96,"line":199},[94,538,539],{"class":110},"        without JavaScript enabled. \n",[94,541,542,545,547],{"class":96,"line":205},[94,543,544],{"class":110},"        Please enable it to continue.\u003C\u002F",[94,546,39],{"class":270},[94,548,278],{"class":110},[94,550,552,555,557],{"class":96,"line":551},17,[94,553,554],{"class":110},"        \u003C\u002F",[94,556,523],{"class":270},[94,558,278],{"class":110},[94,560,562,564,567,570,572,575,578,580],{"class":96,"line":561},18,[94,563,312],{"class":110},[94,565,566],{"class":270},"div",[94,568,569],{"class":274}," id",[94,571,291],{"class":110},[94,573,574],{"class":294},"\"app\"",[94,576,577],{"class":110},">\u003C\u002F",[94,579,566],{"class":270},[94,581,278],{"class":110},[94,583,585],{"class":96,"line":584},19,[94,586,587],{"class":100},"        \u003C!-- built files will be auto injected -->\n",[94,589,591,593,596,599,601,604,607,609,611,613,615],{"class":96,"line":590},20,[94,592,312],{"class":110},[94,594,595],{"class":270},"script",[94,597,598],{"class":274}," type",[94,600,291],{"class":110},[94,602,603],{"class":294},"\"text\u002Fjavascript\"",[94,605,606],{"class":274}," src",[94,608,291],{"class":110},[94,610,484],{"class":294},[94,612,577],{"class":110},[94,614,595],{"class":270},[94,616,278],{"class":110},[94,618,620,622,624,626,628,630,632,634,637,639,641],{"class":96,"line":619},21,[94,621,312],{"class":110},[94,623,595],{"class":270},[94,625,598],{"class":274},[94,627,291],{"class":110},[94,629,603],{"class":294},[94,631,606],{"class":274},[94,633,291],{"class":110},[94,635,636],{"class":294},"\"\u002Fjs\u002Fchunk-common.js\"",[94,638,577],{"class":110},[94,640,595],{"class":270},[94,642,278],{"class":110},[94,644,646,648,650,652,654,656,658,660,662,664,666],{"class":96,"line":645},22,[94,647,312],{"class":110},[94,649,595],{"class":270},[94,651,598],{"class":274},[94,653,291],{"class":110},[94,655,603],{"class":294},[94,657,606],{"class":274},[94,659,291],{"class":110},[94,661,421],{"class":294},[94,663,577],{"class":110},[94,665,595],{"class":270},[94,667,278],{"class":110},[94,669,671,673,675],{"class":96,"line":670},23,[94,672,503],{"class":110},[94,674,514],{"class":270},[94,676,278],{"class":110},[94,678,680,683,685],{"class":96,"line":679},24,[94,681,682],{"class":110},"\u003C\u002F",[94,684,260],{"class":270},[94,686,278],{"class":110},[32,688,689,690,693,694],{},"The ",[39,691,692],{},"resolution"," while difficult to find, was easy to implement.  Opening up my vue.config.js I simply referenced the publicPath with a vlaue of  ",[39,695,696],{},"publicPath: '.\u002F'",[32,698,699],{},[47,700,702],{"href":701},"\u002Farticles\u002Fimages\u002Fimage_637255046945239780.png",[246,703],{"style":248,"title":249,"src":704,"alt":249,"width":705,"height":706},"\u002Farticles\u002Fimages\u002Fimage_thumb_637255046947319889.png",567,375,[32,708,709,710,717],{},"Finding the ",[47,711,716],{"href":712,"target":713,"rel":714},"https:\u002F\u002Fcli.vuejs.org\u002Fconfig\u002F#vue-config-js","_blank",[715],"noopener","documentation",", the default value is ‘\u002F’ which is what I was finding. ",[32,719,720,721],{},"The base URL your application bundle will be deployed at (known as baseUrl before Vue CLI 3.3). ",[39,722,723],{},"This is the equivalent of webpack's output.publicPath, but Vue CLI also needs this value for other purposes, so you should always use publicPath instead of modifying webpack output.publicPath.",[32,725,726,727,731,732,736],{},"By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. ",[47,728,729],{"href":729,"rel":730},"https:\u002F\u002Fwww.my-app.com\u002F",[53],". If your app is deployed at a sub-path, you will need to specify that sub-path using this option. For example, if your app is deployed at ",[47,733,734],{"href":734,"rel":735},"https:\u002F\u002Fwww.foobar.com\u002Fmy-app\u002F",[53],", set publicPath to '\u002Fmy-app\u002F'.",[32,738,739],{},"The value can also be set to an empty string ('') or a relative path (.\u002F) so that all assets are linked using relative paths. This allows the built bundle to be deployed under any public path, or used in a file system based environment like a Cordova hybrid app.",[210,741,742],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":11,"searchDepth":12,"depth":12,"links":744},[],"2020-05-19T17:04:54.881Z","Resources not found with vue cli build",{},"\u002Farticles\u002Fpath-to-resources-javascript-images-etc-not-found-with-vuejs-build",{"title":226,"description":746},"articles\u002Fpath-to-resources-javascript-images-etc-not-found-with-vuejs-build",[18],"ccEvdVv8lVqOsfxnu_npwblWarxJcuJEuUnc3xPa8Zk",{"id":754,"title":755,"author":227,"body":756,"createdAt":923,"description":924,"extension":15,"img":925,"meta":926,"navigation":19,"path":927,"seo":928,"stem":929,"tags":930,"updatedAt":923,"__hash__":931},"articles\u002Farticles\u002Fvue-cli-creating-a-project-issue-with-hot-reload.md","Vue CLI Creating a Project Issue with Hot Reload",{"type":8,"value":757,"toc":921},[758,766,777,834,837,844,895,903,918],[32,759,760,761,765],{},"I noticed today after creating a new vue project via “vue create new-app” that hot reload was not working while modifying html within App.vue.\nHow can this be, it is brand new app on the latest bits.\nFollowing the instructions on ",[47,762,764],{"href":763,"target":713},"https:\u002F\u002Fcli.vuejs.org\u002Fguide\u002Fcreating-a-project.html","cli.vuejs.org","\nit states that vue-clie-service starts webpack-dev-server out of the box ”",[32,767,689,768,771,772,776],{},[91,769,770],{},"vue-cli-service serve"," command starts a dev server\n(based on ",[47,773,775],{"href":774},"https:\u002F\u002Fgithub.com\u002Fwebpack\u002Fwebpack-dev-server","webpack-dev-server",") that\ncomes with Hot-Module-Replacement (HMR) working out of the box.”  Why. Brand new project, with the latest bits and it still\ndid not work.   I found 2 solutions. The first fix was for me, was to add a vue.config.js\nfile to the root directory (alongside the package.json) and add the following devServer property",[85,778,780],{"className":87,"code":779,"language":89,"meta":11,"style":11},"devServer: {          \n    useLocalIp: false,   \n        proxy: 'http:\u002F\u002Flocalhost:8080',   \n        public: '172.23.3.180:8080'       \n}\n",[91,781,782,790,804,816,829],{"__ignoreMap":11},[94,783,784,787],{"class":96,"line":97},[94,785,786],{"class":274},"devServer",[94,788,789],{"class":110},": {          \n",[94,791,792,795,798,801],{"class":96,"line":12},[94,793,794],{"class":274},"    useLocalIp",[94,796,797],{"class":110},": ",[94,799,800],{"class":106},"false",[94,802,803],{"class":110},",   \n",[94,805,806,809,811,814],{"class":96,"line":124},[94,807,808],{"class":274},"        proxy",[94,810,797],{"class":110},[94,812,813],{"class":294},"'http:\u002F\u002Flocalhost:8080'",[94,815,803],{"class":110},[94,817,818,821,823,826],{"class":96,"line":130},[94,819,820],{"class":274},"        public",[94,822,797],{"class":110},[94,824,825],{"class":294},"'172.23.3.180:8080'",[94,827,828],{"class":110},"       \n",[94,830,831],{"class":96,"line":139},[94,832,833],{"class":110},"}\n",[32,835,836],{},"Note: the public ip address that I used here was from “IPv4 Address” after performing ipconfig in a command prompt. So documenting here will help me find\u002Fresolve this next week when this comes up again. But why, and why was it so difficult to find this resolution?",[32,838,839,840,843],{},"The second solution which ",[39,841,842],{},"I liked better ","(and seems faster) was as-follows. Again, a modification to the vue.config.js and also adding a new ‘script’ to package.json",[85,845,847],{"className":87,"code":846,"language":89,"meta":11,"style":11},"configureWebpack: {\n   devServer: {\n      watchOptions: {\n         poll: true\n      }\n   }\n}\n",[91,848,849,857,864,871,881,886,891],{"__ignoreMap":11},[94,850,851,854],{"class":96,"line":97},[94,852,853],{"class":274},"configureWebpack",[94,855,856],{"class":110},": {\n",[94,858,859,862],{"class":96,"line":12},[94,860,861],{"class":274},"   devServer",[94,863,856],{"class":110},[94,865,866,869],{"class":96,"line":124},[94,867,868],{"class":274},"      watchOptions",[94,870,856],{"class":110},[94,872,873,876,878],{"class":96,"line":130},[94,874,875],{"class":274},"         poll",[94,877,797],{"class":110},[94,879,880],{"class":106},"true\n",[94,882,883],{"class":96,"line":139},[94,884,885],{"class":110},"      }\n",[94,887,888],{"class":96,"line":145},[94,889,890],{"class":110},"   }\n",[94,892,893],{"class":96,"line":151},[94,894,833],{"class":110},[32,896,897,898,902],{},"The script within package.json. Here you can see I am setting environment NODE_ENV to development using the ",[47,899,901],{"href":900,"target":713},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcross-env#installation","cross-env"," npm package (I had to install via npm installl –save-dev cross-env)",[85,904,906],{"className":87,"code":905,"language":89,"meta":11,"style":11},"\"dev\": \"cross-env NODE_ENV=development vue-cli-service serve --open --host localhost\"\n",[91,907,908],{"__ignoreMap":11},[94,909,910,913,915],{"class":96,"line":97},[94,911,912],{"class":294},"\"dev\"",[94,914,797],{"class":110},[94,916,917],{"class":294},"\"cross-env NODE_ENV=development vue-cli-service serve --open --host localhost\"\n",[210,919,920],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":11,"searchDepth":12,"depth":12,"links":922},[],"2020-05-18T21:44:23.866Z","Hot module reload issues with project created with vue cli","\u002Farticles\u002Fimages\u002Fvuecli.png",{},"\u002Farticles\u002Fvue-cli-creating-a-project-issue-with-hot-reload",{"title":755,"description":924},"articles\u002Fvue-cli-creating-a-project-issue-with-hot-reload",[18],"stNfxxuWXTHpzSMOXcF6aqRaYHGsRiH2IzJU3A56aUM",{"id":933,"title":934,"author":227,"body":935,"createdAt":976,"description":977,"extension":15,"img":948,"meta":978,"navigation":19,"path":979,"seo":980,"stem":981,"tags":982,"updatedAt":976,"__hash__":985},"articles\u002Farticles\u002Fyour-connection-is-not-private-google-chrome.md","Your connection is not private–Google Chrome",{"type":8,"value":936,"toc":974},[937,940,952,958,961,971],[32,938,939],{},"Seen1 this \"Your connection is not private” while working with https on your localhost (workstation).",[32,941,942],{},[47,943,945],{"href":944},"\u002Farticles\u002Fimages\u002Fimage_637206600346445330.png",[246,946],{"style":947,"title":249,"src":948,"alt":249,"width":949,"height":950,"border":951},"border: 0px currentcolor; display: inline; background-image: none;","\u002Farticles\u002Fimages\u002Fimage_thumb_637206600347776935.png",497,433,0,[32,953,954,955,957],{},"In Chrome, put in chrome:\u002F\u002Fflags\u002F#allow-insecure-localhost in the address bar.",[234,956],{},"\nEnable the option that says \"Allow invalid certificates for resources loaded from localhost\".",[32,959,960],{},"Restart Chrome, and it should allow the site.",[32,962,963],{},[47,964,966],{"href":965},"\u002Farticles\u002Fimages\u002Fimage_637206600348897864.png",[246,967],{"style":947,"title":249,"src":968,"alt":249,"width":969,"height":970,"border":951},"\u002Farticles\u002Fimages\u002Fimage_thumb_637206600350111622.png",499,79,[32,972,973],{},"Worked like a charm!",{"title":11,"searchDepth":12,"depth":12,"links":975},[],"2020-03-24T15:20:35.123Z","Working local, working with https? Got your desktop environment working well, however while using Chrome and browsing you get this \"not private\" error.  You can continue working\u002Fbrowsing if you click through advanced and proceed.  This is great but if you are reading this my bet you are looking for a better solution.  Read on!",{},"\u002Farticles\u002Fyour-connection-is-not-private-google-chrome",{"title":934,"description":977},"articles\u002Fyour-connection-is-not-private-google-chrome",[983,18,984],"angular","netcore","gHd-_VYIEkDSYbxkw6rXref1-CvJ-95vU8g6QOgK9qc",{"id":987,"title":988,"author":227,"body":989,"createdAt":1079,"description":1080,"extension":15,"img":1081,"meta":1082,"navigation":19,"path":1083,"seo":1084,"stem":1085,"tags":1086,"updatedAt":1079,"__hash__":1088},"articles\u002Farticles\u002Fnpm-dependencies-vs-devdependencies.md","NPM - dependencies vs devDependencies",{"type":8,"value":990,"toc":1077},[991,994,997,1006,1009,1033,1042,1069],[32,992,993],{},"Technically, when using a bundler like webpack, the result will not make a difference with regard to the output of your bundling process.",[32,995,996],{},"That being said, dividing the packages in dependencies and devDependencies still helps you (and others looking at your package.json) to understand which packages are meant to end up being a part of the bundle created (dependencies), and which are needed to build the bundle only (devDependencies).",[32,998,999,1000,1002,1003,1005],{},"Just remember main principle:",[234,1001],{},"\n-> If you need package in production put it into dependencies (most likely axios should be in dependencies in your case).",[234,1004],{},"\n-> If you need package only during development, put it into devDependencies (e.g. unit-test libraries, which isn't needed in productions should be in devDependencies",[32,1007,1008],{},"Summary of important behavior differences:",[32,1010,1011,1017,1018,1020,1023,1024,1027,1029,1032],{},[47,1012,1014],{"href":1013},"https:\u002F\u002Fgithub.com\u002Fnpm\u002Fnpm\u002Fblob\u002F2e3776bf5676bc24fec6239a3420f377fe98acde\u002Fdoc\u002Ffiles\u002Fpackage.json.md#dependencies",[91,1015,1016],{},"dependencies"," are installed on both:",[234,1019],{},[91,1021,1022],{},"npm install"," from a directory that contains ",[91,1025,1026],{},"package.json",[234,1028],{},[91,1030,1031],{},"npm install $package"," on any other directory",[32,1034,1035,1041],{},[47,1036,1038],{"href":1037},"https:\u002F\u002Fgithub.com\u002Fnpm\u002Fnpm\u002Fblob\u002F2e3776bf5676bc24fec6239a3420f377fe98acde\u002Fdoc\u002Ffiles\u002Fpackage.json.md#devdependencies",[91,1039,1040],{},"devDependencies"," are:",[32,1043,1044,1045,1047,1048,1050,1051,1054,1055,1057,1058,1061,1062,1065,1066,1068],{},"also installed on ",[91,1046,1022],{}," on a directory that contains ",[91,1049,1026],{},", unless you pass the ",[91,1052,1053],{},"--production"," flag.",[234,1056],{},"\nnot installed on ",[91,1059,1060],{},"npm install \"$package\""," on any other directory, unless you give it the ",[91,1063,1064],{},"--dev"," option.",[234,1067],{},"\nare not installed transitively.",[32,1070,1071,1072],{},"Reference: ",[47,1073,1076],{"href":1074,"target":713,"rel":1075},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F18875674\u002Fwhats-the-difference-between-dependencies-devdependencies-and-peerdependencies\u002F22004559#22004559",[715],"StackOverflow",{"title":11,"searchDepth":12,"depth":12,"links":1078},[],"2020-01-07T14:02:12.046Z","Webpack is one of those technologies that has become increasingly important and yet struggles to be clear and obvious for most developers.  One of the best ways to get up to speed is to start from scratch (empty package.json) and build up one piece at a time to understand how it works.  Below are some notes about package.json and how dependencies are established.","\u002Farticles\u002Fimages\u002Fnpm.png",{},"\u002Farticles\u002Fnpm-dependencies-vs-devdependencies",{"title":988,"description":1080},"articles\u002Fnpm-dependencies-vs-devdependencies",[18,1087],"npm","6JDIyAP2t28x6-aZhXKViT2l9gCy3dbGWKBsP3m-43Y",{"id":1090,"title":1091,"author":227,"body":1092,"createdAt":1243,"description":1244,"extension":15,"img":1212,"meta":1245,"navigation":19,"path":1246,"seo":1247,"stem":1248,"tags":1249,"updatedAt":1243,"__hash__":1250},"articles\u002Farticles\u002Fvue-app-and-mvc-routing-wvisual-studio-aspnet-core.md","Vue App and MVC Routing w\u002FVisual Studio ASP.NET Core",{"type":8,"value":1093,"toc":1241},[1094,1097,1100,1106,1112,1127,1144,1173,1186,1235,1238],[32,1095,1096],{},"###What page is loaded on starting the application.",[32,1098,1099],{},"The default route for this VS.NET ASP.NET Core application is the public\u002Findex.html with the following setup in the Startup.cs",[32,1101,1102,1103,1105],{},"app.UseSpa(spa => { ",[234,1104],{}," spa.Options.SourcePath = \"ClientApp\";",[32,1107,1108,1109,1111],{}," if (env.IsDevelopment()) ",[234,1110],{}," {",[32,1113,1114,1115,1117,1118,1120,1121,1123,1124,1126],{}," \u002F\u002F run npm process with client app ",[234,1116],{}," spa.UseVueCli(npmScript: \"serve\", port: 8080); ",[234,1119],{}," ",[234,1122],{}," } ",[234,1125],{}," }); ",[32,1128,1129,1132,1133,62,1136,1139,1140,1143],{},[39,1130,1131],{},"If you have"," a HomeController and a Views\u002FHome\u002FIndex.cshtml view, \nwhen the application starts via F5 it will route by default to http:\u002F\u002Flocalhost:50557 ",[39,1134,1135],{},"or",[47,1137,1138],{"href":1138},"http:\u002F\u002Flocalhost:50557\u002Findex.html"," and if you want to navigate to your controller\u002Fview you can navigate to \n",[47,1141,1142],{"href":1142},"http:\u002F\u002Flocalhost:50557\u002FHome\u002FIndex"," Essentially it will default to the vue index.html page in this scenario.",[56,1145,1146,1158,1161],{},[32,1147,1148],{},[47,1149,1151],{"href":1150},"\u002Farticles\u002Fimages\u002Fimage_thumb[1]_636791382475500953.png",[246,1152],{"style":1153,"title":1154,"src":1155,"alt":1154,"width":1156,"height":1157,"border":951},"margin: 0px; border: 0px currentcolor; display: inline; background-image: none;","image_thumb[1]","\u002Farticles\u002Fimages\u002Fimage_thumb[1]_thumb_636791382476448208.png",244,141,[32,1159,1160],{},"Navigating to http:\u002F\u002Flocalhost:50557\u002Fhome\u002Findex will navigate to the MVC view, however if you want this route to navigate the vue app you can add, \nwhich would redirect the user from the MVC view to the vue app again.",[32,1162,1163,1164,1166,1167,1169,1170,1172],{},"public IActionResult Index() ",[234,1165],{}," { ",[234,1168],{}," return Redirect(\"~\u002Findex.html\"); ",[234,1171],{}," }",[32,1174,1175,1177,1178,1181,1182,1185],{},[39,1176,1131],{}," a HomeController ",[39,1179,1180],{},"AND ","and you add ",[39,1183,1184],{},"MapSpaFallbackRoute"," reference within the Startup.cs similar to the following, starting via F5 the site will navigate to http:\u002F\u002Flocalhost:50557\u002F and land on the Views\u002FHome\u002FIndex.cshtml This really is the reverse of the above scenario. In this case it will default to the MVC view and you have to explicitly navigate to the \u002Findex.html for the vue app.",[56,1187,1188,1200,1208,1218,1225],{},[32,1189,1190,1191,1193,1194,1196,1197,1199],{},"app.UseMvc(routes => { ",[234,1192],{}," routes.MapRoute( ",[234,1195],{}," name: \"default\", ",[234,1198],{}," template: \"{controller}\u002F{action=Index}\u002F{id?}\");",[32,1201,1120,1202,1120,1205,1207],{},[39,1203,1204],{},"routes.MapSpaFallbackRoute(\"spa-fallback\", new { controller = \"Home\", action = \"Index\" });",[234,1206],{},"});",[32,1209,1210],{},[47,1211,1213],{"href":1212},"\u002Farticles\u002Fimages\u002Fimage_thumb[2]_636791382477200018.png",[246,1214],{"style":1153,"title":1215,"src":1216,"alt":1215,"width":1156,"height":1217,"border":951},"image_thumb[2]","\u002Farticles\u002Fimages\u002Fimage_thumb[2]_thumb_636791382477864407.png",74,[32,1219,1220,1221,1224],{},"If you want to navigate to your vue app, you must ",[39,1222,1223],{},"explicitly"," reference http:\u002F\u002Flocalhost:50557\u002FIndex.html Any invalid routes will default to the Home\u002FIndex view.",[32,1226,1227],{},[47,1228,1230],{"href":1229},"https:\u002F\u002Fwww.davidyardy.com\u002FPosts\u002Ffiles\u002Fimage_thumb[3]_636791382478902143.png",[246,1231],{"style":1153,"title":1232,"src":1233,"alt":1232,"width":1156,"height":1234,"border":951},"image_thumb[3]","\u002Farticles\u002Fimages\u002Fimage_thumb[3]_thumb_636791382479671548.png",126,[32,1236,1237],{},"There are a number of combinations and can be confusing. \n",[32,1239,1240],{},"Primarily, both the vue app and MVC navigation work fine. It really just depends on if you want the MVC to be the default route, or the vue app index.html page.",{"title":11,"searchDepth":12,"depth":12,"links":1242},[],"2018-11-30T01:30:48.068Z","Vue.js SPA routing conflicts with MVC routing.  Short article reviewing the options, and an approach on how to get both working nicely together.",{},"\u002Farticles\u002Fvue-app-and-mvc-routing-wvisual-studio-aspnet-core",{"title":1091,"description":1244},"articles\u002Fvue-app-and-mvc-routing-wvisual-studio-aspnet-core",[18,984],"up2a1CH7j5uH_V7CzCVaVuAZueA1QSdo_Obd_kNIwWU",{"id":1252,"title":1253,"author":227,"body":1254,"createdAt":1522,"description":1258,"extension":15,"img":1454,"meta":1523,"navigation":19,"path":1524,"seo":1525,"stem":1526,"tags":1527,"updatedAt":1522,"__hash__":1528},"articles\u002Farticles\u002Fstarting-a-vue-app-wvisual-studio-aspnet-core-2.md","Starting a Vue App w\u002FVisual Studio ASP.NET Core 2",{"type":8,"value":1255,"toc":1520},[1256,1259,1262,1332,1345,1348,1392,1405,1436,1445,1456,1459,1462,1482,1485,1502,1505,1514,1517],[32,1257,1258],{},"I created my Vue project, included it with my ASP.NET Core project.  For more information reference my prior post on Vue with ASP.NET Core.",[32,1260,1261],{},"Significant to how the project starts\u002Fruns is the setup within Startup.cs",[85,1263,1267],{"className":1264,"code":1265,"language":1266,"meta":11,"style":11},"language-cs shiki shiki-themes github-light github-dark","app.UseSpa(spa => {    \n    spa.Options.SourcePath =  \"ClientApp \";      \n    if (env.IsDevelopment())          \n    {              \n    \u002F\u002Fspa.UseReactDevelopmentServer(npmScript:  \"start \");          \n    \u002F\u002F run npm process with client app             \n    \u003Cstrong>spa.UseVueCli(npmScript:  \"serve \", port: 8080);\u003C\u002Fstrong>          \n    \u002F\u002F if you just prefer to proxy requests from client app, use proxy to SPA dev server instead, \u002F\u002F app should be already running before starting a .NET client:              \n    \u002F\u002F spa.UseProxyToSpaDevelopmentServer( \"\u003Ca href=\"http:\u002F\u002Flocalhost:8080 \");\">http:\u002F\u002Flocalhost:8080 \");\u003C\u002Fa> \n    \u002F\u002F your Vue app port\n    }\n});\n","cs",[91,1268,1269,1274,1279,1284,1289,1294,1299,1304,1312,1317,1322,1327],{"__ignoreMap":11},[94,1270,1271],{"class":96,"line":97},[94,1272,1273],{},"app.UseSpa(spa => {    \n",[94,1275,1276],{"class":96,"line":12},[94,1277,1278],{},"    spa.Options.SourcePath =  \"ClientApp \";      \n",[94,1280,1281],{"class":96,"line":124},[94,1282,1283],{},"    if (env.IsDevelopment())          \n",[94,1285,1286],{"class":96,"line":130},[94,1287,1288],{},"    {              \n",[94,1290,1291],{"class":96,"line":139},[94,1292,1293],{},"    \u002F\u002Fspa.UseReactDevelopmentServer(npmScript:  \"start \");          \n",[94,1295,1296],{"class":96,"line":145},[94,1297,1298],{},"    \u002F\u002F run npm process with client app             \n",[94,1300,1301],{"class":96,"line":151},[94,1302,1303],{},"    \u003Cstrong>spa.UseVueCli(npmScript:  \"serve \", port: 8080);\u003C\u002Fstrong>          \n",[94,1305,1306,1309],{"class":96,"line":157},[94,1307,1308],{},"    \u002F\u002F if you just prefer to proxy requests from client app, use proxy to SPA dev server instead,",[94,1310,1311],{}," \u002F\u002F app should be already running before starting a .NET client:              \n",[94,1313,1314],{"class":96,"line":163},[94,1315,1316],{},"    \u002F\u002F spa.UseProxyToSpaDevelopmentServer( \"\u003Ca href=\"http:\u002F\u002Flocalhost:8080 \");\">http:\u002F\u002Flocalhost:8080 \");\u003C\u002Fa> \n",[94,1318,1319],{"class":96,"line":169},[94,1320,1321],{},"    \u002F\u002F your Vue app port\n",[94,1323,1324],{"class":96,"line":175},[94,1325,1326],{},"    }\n",[94,1328,1329],{"class":96,"line":181},[94,1330,1331],{},"});\n",[32,1333,1334,1335,1338,1339,1342],{},"Now, I can start my project with the following approaches (referencing Properties\u002FlaunchSettings.json)  Regardless of how the project is started, we are taking advantage of vue dev server and the hot module reloading feature (i.e. the ability to modify html, js, vue code and the page will auto re-load)     * Visual Studio F5 (debug-run) (",[39,1336,1337],{},"selecting"," the application name) ",[47,1340],{"href":1341},"http:\u002F\u002Flocalhost:8081",[47,1343,1341],{"href":1341,"rel":1344},[53],[32,1346,1347],{},"This approach starts the project with the c# debugger attached.",[85,1349,1351],{"className":1264,"code":1350,"language":1266,"meta":11,"style":11},"\"aspnetcorevueappGui \": {               \n        \"commandName \":  \"Project \",               \n        \"launchBrowser \": true,               \n        \"environmentVariables \": {                 \n            \"ASPNETCORE_ENVIRONMENT \":  \"Development \"              \n        },               \n        \"applicationUrl \":  \"\u003Ca href=\"https:\u002F\u002Flocalhost:5001;http:\u002F\u002Flocalhost:5000 \"\">https:\u002F\u002Flocalhost:5001;http:\u002F\u002Flocalhost:5000 \"\u003C\u002Fa>          \n}\n",[91,1352,1353,1358,1363,1368,1373,1378,1383,1388],{"__ignoreMap":11},[94,1354,1355],{"class":96,"line":97},[94,1356,1357],{},"\"aspnetcorevueappGui \": {               \n",[94,1359,1360],{"class":96,"line":12},[94,1361,1362],{},"        \"commandName \":  \"Project \",               \n",[94,1364,1365],{"class":96,"line":124},[94,1366,1367],{},"        \"launchBrowser \": true,               \n",[94,1369,1370],{"class":96,"line":130},[94,1371,1372],{},"        \"environmentVariables \": {                 \n",[94,1374,1375],{"class":96,"line":139},[94,1376,1377],{},"            \"ASPNETCORE_ENVIRONMENT \":  \"Development \"              \n",[94,1379,1380],{"class":96,"line":145},[94,1381,1382],{},"        },               \n",[94,1384,1385],{"class":96,"line":151},[94,1386,1387],{},"        \"applicationUrl \":  \"\u003Ca href=\"https:\u002F\u002Flocalhost:5001;http:\u002F\u002Flocalhost:5000 \"\">https:\u002F\u002Flocalhost:5001;http:\u002F\u002Flocalhost:5000 \"\u003C\u002Fa>          \n",[94,1389,1390],{"class":96,"line":157},[94,1391,833],{},[32,1393,1394,1395,1399,1402,1404],{},"*Visual Studio F5 (debug-run) (selecting IIS Express, browser by default navigates to ",[47,1396],{"title":1397,"href":1398},"http:\u002F\u002Flocalhost:50557\u002F","http:\u002F\u002Flocalhost:50557",[47,1400,1398],{"href":1398,"rel":1401},[53],[234,1403],{},"\nThis approach starts the project with the c# debugger attached.   ",[56,1406,1407],{},[32,1408,1409,1410,1412,1413,1415,1416,1418,1419,1421,1422,1426,1427,1429,1430,1432,1433,1435],{},"\"iisSettings\": {",[234,1411],{},"\n\"windowsAuthentication\": false,",[234,1414],{},"\n\"anonymousAuthentication\": true,",[234,1417],{},"\n\"iisExpress\": {",[234,1420],{},"\n\"applicationUrl\":  \"\u003Ca href=\"",[47,1423,1425],{"rel":1424},[53],"http:\u002F\u002Flocalhost:50557\"\">http:\u002F\u002Flocalhost:50557"," \",",[234,1428],{},"\n\"sslPort \": 0",[234,1431],{},"\n}",[234,1434],{},"\n} ",[32,1437,1438,1439,1441,1444],{},"*npm run serve from a command prompt\u002Fterminal window and opening browser to ",[47,1440],{"href":49},[47,1442,49],{"href":49,"rel":1443},[53],"  The c# debugger is not attached, however I will show how to attach to the dotnet.exe process below.  The port used is defined within Startup.cs spa.UseVueCli(npmScript:  \"serve \", port: 8080);   ",[56,1446,1447,1448,1120],{},"   ",[47,1449,1451],{"href":1450},"\u002Farticles\u002Fimages\u002Fimage_636789550424336824.png",[246,1452],{"title":249,"style":1453,"border":951,"alt":249,"src":1454,"width":1156,"height":1455},"margin: 0px; display: inline; background-image: none;","\u002Farticles\u002Fimages\u002Fimage_thumb_636789550425217823.png",98,[47,1457],{"href":1458},"http:\u002F\u002Flocalhost:8080\u002F",[47,1460,1458],{"href":1458,"rel":1461},[53],[32,1463,1464,1465,1467,1474,1475],{},"The c# debugger is not attached, however I will show how to attach to the dotnet.exe process below.  The port used is defined within Startup.cs spa.UseVueCli(npmScript:  \"serve \", port: 8080);",[234,1466],{},[47,1468,1470],{"href":1469},"\u002Farticles\u002Fimages\u002Fimage_636789550425931758.png",[246,1471],{"title":249,"style":1453,"border":951,"alt":249,"src":1472,"width":1156,"height":1473},"\u002Farticles\u002Fimages\u002Fimage_thumb_636789550426691621.png",45,"        ",[47,1476,1478],{"href":1477},"\u002Farticles\u002Fimages\u002Fimage_636789550427600206.png",[246,1479],{"title":249,"style":1453,"border":951,"alt":249,"src":1480,"width":1156,"height":1481},"\u002Farticles\u002Fimages\u002Fimage_thumb_636789550428370970.png",168,[32,1483,1484],{},"Attaching from within Visual Studio to the dotnet.exe process Debug – Attach to Process  ",[56,1486,1447,1487,1494,1495,1120],{},[47,1488,1490],{"href":1489},"\u002Farticles\u002Fimages\u002Fimage_636789550429079347.png",[246,1491],{"title":249,"style":1453,"border":951,"alt":249,"src":1492,"width":1493,"height":1156},"\u002Farticles\u002Fimages\u002Fimage_thumb_636789550430063451.png",166,"    ",[47,1496,1498],{"href":1497},"\u002Farticles\u002Fimages\u002Fimage_636789550431090218.png",[246,1499],{"title":249,"style":1453,"border":951,"alt":249,"src":1500,"width":1156,"height":1501},"\u002Farticles\u002Fimages\u002Fimage_thumb_636789550431817517.png",174,[32,1503,1504],{},"So there are a few ways of starting your web application and debugging.",[32,1506,1507,1508,1510,1511,1513],{},"If you use one of the F5 approaches (above) the debugger is automatically attached, and you can step through your code as you browse\nthrough the application.  If you use F5 you can stop debugging easily by just stopping within Visual Studio the debugger.",[234,1509],{},"\nIf you start the application from a terminal\u002Fcommand prompt window the .NET debugger is not attached however you can attach to the dotnet.exe process when you are interested in stepping into your c# .net code.",[234,1512],{},"\nPersonally, I never use F5 and rely on attaching the process when I want to narrow my debugging experience manually.",[32,1515,1516],{},"I code this way, as I can modify c#, build the project then simply just refresh my open browser to start using the updated dlls from the project.  Once the vue app is running, hot module loading is up and running.  Changes to html and js files within the ClientApp directory are automatically loaded when the Vue CLI recognizes a file change.  This is known as HMR (hot module reloading).  All new js frameworks have an implementation of this.  It is part of the new modern js framework world now.  The root file for the web application is public\u002Findex.html.",[210,1518,1519],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":11,"searchDepth":12,"depth":12,"links":1521},[],"2018-11-27T22:37:23.276Z",{},"\u002Farticles\u002Fstarting-a-vue-app-wvisual-studio-aspnet-core-2",{"title":1253,"description":1258},"articles\u002Fstarting-a-vue-app-wvisual-studio-aspnet-core-2",[18,984],"vqGHUOh8tLLRV4bB39lZjIFEZF5X69F042wi9PFYnnI",{"id":1530,"title":1531,"author":227,"body":1532,"createdAt":1944,"description":1536,"extension":15,"img":1545,"meta":1945,"navigation":19,"path":1946,"seo":1947,"stem":1948,"tags":1949,"updatedAt":1944,"__hash__":1950},"articles\u002Farticles\u002Fgetting-started-vuejs-wvisual-studio-aspnet-core-1.md","Getting Started Vue.js w\u002FVisual Studio ASP.NET Core 1",{"type":8,"value":1533,"toc":1942},[1534,1537,1556,1559,1570,1585,1594,1597,1606,1639,1641,1655,1667,1677,1699,1722,1749,1752,1758,1779,1808,1876,1881,1893],[32,1535,1536],{},"So starting this off, looking for a Vue.js SPA template within Visual Studio…nope not available.\nUsing command line dotnet new –l you can see it is not within the template package from Microsoft.",[32,1538,1539,1548,1549],{},[47,1540,1542],{"href":1541},"\u002Farticles\u002Fimages\u002Fimage_636783176934907896.png",[246,1543],{"title":249,"style":1544,"border":951,"alt":249,"src":1545,"width":1546,"height":1547},"display: inline; background-image: none;","\u002Farticles\u002Fimages\u002Fimage_thumb_636783176935948243.png",308,246,"     ",[47,1550,1552],{"href":1551},"\u002Farticles\u002Fimages\u002Fimage_636783176936835671.png",[246,1553],{"title":249,"style":1544,"border":951,"alt":249,"src":1554,"width":1156,"height":1555},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176937616708.png",195,[32,1557,1558],{},"Second attempt, is to get the latest template solutions from Microsoft using the following command from a dos prompt.",[32,1560,1561,1562,1566,1569],{},"dotnet new --install ",[47,1563,1565],{"href":1564},"https:\u002F\u002Fwww.nuget.org\u002Fpackages\u002FMicrosoft.AspNetCore.SpaTemplates\u002F","microsoft.aspnetcore.spatemplates",[39,1567,1568],{},"Unfortunately",", the Vue templates are not available within this package (unlike React and Angular templates).",[32,1571,1572,1576,1577,1581,1582,1584],{},[1573,1574,1575],"u",{},"Building our own Vue Template","  I am going to build one up using existing templates from Microsoft and Visual Studio with the new\n",[47,1578,1580],{"href":1579},"https:\u002F\u002Fcli.vuejs.org\u002F","Vue CLI 3"," templating system. Starting off install the vue cli globally on your pc.",[234,1583],{},"\nnpm list –g --depth 0 (to list all globally install packages, depth argument says to list only the top packages not the dependencies)",[32,1586,1587],{},[47,1588,1590],{"href":1589},"\u002Farticles\u002Fimages\u002Fimage_636783176938295748.png",[246,1591],{"title":249,"style":1453,"border":951,"alt":249,"src":1592,"width":1156,"height":1593},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176939127447.png",106,[32,1595,1596],{},"I have already installed vue cli however doing it again you can see vue was updated from 3.0.1 to 3.1.1    npm install –g @vue\u002Fcli",[32,1598,1599],{},[47,1600,1602],{"href":1601},"\u002Farticles\u002Fimages\u002Fimage_636783176939865053.png",[246,1603],{"title":249,"style":1453,"border":951,"alt":249,"src":1604,"width":1156,"height":1605},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176940599977.png",125,[32,1607,1608,1609,1617,1618,1626,1627,1634,1636],{},"Vue CLI sets up a project with features: hot module replacement, tree-shaking, code-splitting, webpack 4 etc. node –v will display the version of node installed, likewise vue --version gives us the vue.js installed. With vue 3 cli we can use the CLI to create a project or a GUI to set it up.  Using the CLI first, we will create a asp.net core solution based on the existing react template.  dotnet new react –o aspnet-core-vue-app (this is the same as File-New Project within VS.NET and choosing the react template)  ",[47,1610,1612],{"href":1611},"\u002Farticles\u002Fimages\u002Fimage_636783176941282020.png",[246,1613],{"title":249,"style":1544,"border":951,"alt":249,"src":1614,"width":1615,"height":1616},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176942157272.png",288,81,"  Opening the csproj with vs.net (Open Project), and building the project to restore nuget packages, and restoring npm packages (taking several minutes)    ",[47,1619,1621],{"href":1620},"\u002Farticles\u002Fimages\u002Fimage_636783176942942110.png",[246,1622],{"title":249,"style":1544,"border":951,"alt":249,"src":1623,"width":1624,"height":1625},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176943756200.png",197,187,"  Make the following changes within Startup.cs    configuration.RootPath = 'ClientApp\u002Fbuild'; => configuration.RootPath = 'ClientApp\u002Fdist';     app.UseHttpsRedirection(); => \u002F\u002F app.UseHttpsRedirection(); comment out (we do not want to deal with https certificates at this moment)  Add nuget package VueClieMiddleware  ",[47,1628,1630],{"href":1629},"\u002Farticles\u002Fimages\u002Fimage_636783176944675747.png",[246,1631],{"title":249,"style":1453,"border":951,"alt":249,"src":1632,"width":1156,"height":1633},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176945464707.png",41,[234,1635],{},[47,1637],{"href":1638},"\u002Farticles\u002Fimages\u002Fimage_636783176946236903.png",[47,1640],{"href":1638},[32,1642,1643,1649,1651,1652,1654],{},[47,1644,1645],{"href":1638},[246,1646],{"title":249,"style":1453,"border":951,"alt":249,"src":1647,"width":1648,"height":1156},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176947064497.png",241,[234,1650],{},"\n\u002F\u002F spa.UseReactDevelopmentServer(npmScript: 'start'); comment out react development server and reference vue",[234,1653],{},"\nspa.UseVueCli(npmScript: 'serve', port: 8080);",[32,1656,1657,1658,1660,1661,1663,1664,1666],{},"Remove all the contents of the \u002FClientApp foler and create a new project using Vue CLI and returning to command prompt in a new directory",[234,1659],{},"\nmd vue",[234,1662],{},"\ncd vue",[234,1665],{},"\nvue create client-app",[32,1668,1669],{},[47,1670,1672],{"href":1671},"\u002Farticles\u002Fimages\u002Fimage_636783176947910505.png",[246,1673],{"title":249,"style":1544,"border":951,"alt":249,"src":1674,"width":1675,"height":1676},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176948670926.png",388,116,[32,1678,1679,1680,1682,1690,1692],{},"selecting with mouse default (babel, eslint)",[234,1681],{},[47,1683,1685],{"href":1684},"\u002Farticles\u002Fimages\u002Fimage_636783176949582507.png",[246,1686],{"title":249,"style":1544,"border":951,"alt":249,"src":1687,"width":1688,"height":1689},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176950311914.png",390,92,[234,1691],{},[47,1693,1695],{"href":1694},"\u002Farticles\u002Fimages\u002Fimage_636783176951069191.png",[246,1696],{"title":249,"style":1544,"border":951,"alt":249,"src":1697,"width":1698,"height":1156},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176951855897.png",397,[32,1700,1701,1702,1709,1717,1718,1721],{},"Moving all the Vue CLI code now to the VS.NET folder ClientApp. I am using Visual Studio in this tutorial (not vscode).  ",[47,1703,1705],{"href":1704},"\u002Farticles\u002Fimages\u002Fimage_636783176952644959.png",[246,1706],{"title":249,"style":1453,"border":951,"alt":249,"src":1707,"width":1156,"height":1708},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176953456238.png",104,[47,1710,1712],{"href":1711},"\u002Farticles\u002Fimages\u002Fimage_636783176954088989.png",[246,1713],{"title":249,"style":1544,"border":951,"alt":249,"src":1714,"width":1715,"height":1716},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176954863643.png",110,72,"  ",[1573,1719,1720],{},"3 ways to run this project","  1. Pressing F5 the application runs and to test the hot module reload feature, modify the Welcome message within App.vue while in Debug Mode (F5). You will notice the page reloads showing the change immediately. This is powerful.",[32,1723,1724,1725,1727,1728,1730,1731,1733,1734,1737,111,1740,1742,1743,1745,1746],{},"2 If however I try to run the project via dotnet run I am getting the following error:",[234,1726],{},"\nSystem.InvalidOperationException\nHResult=0x80131509",[234,1729],{},"\nMessage=Unable to configure HTTPS endpoint. No server certificate was specified, and the default developer certificate could not be found.",[234,1732],{},"\nTo generate a developer certificate run 'dotnet dev-certs https'. To trust the certificate (Windows and macOS only) run 'dotnet dev-certs https --trust'.         For more information on configuring HTTPS see ",[47,1735],{"href":1736},"https:\u002F\u002Fgo.microsoft.com\u002Ffwlink\u002F?linkid=848054",[47,1738,1736],{"href":1736,"rel":1739},[53],[234,1741],{},"\nSource=Microsoft.AspNetCore.Server.Kestrel.Core",[234,1744],{},"\nStackTrace:………….info: Microsoft.AspNetCore.SpaServices",[94,1747,1748],{},"0",[32,1750,1751],{},"client-app@0.1.0 serve C:\\Temp\\vue\\aspnet-core-vue-app\\aspnet-core-vue-app\\ClientApp",[32,1753,1754,1755,1757],{},"vue-cli-service serve '--port' '8080'  INFO Starting development server...    The error message told me to run dotnet dev-certs https --clean",[234,1756],{},"\nI tried but ended up with this error message",[32,1759,1760,1761,1763,1764,1766,1767,1769,1776,1778],{},"Cleaning HTTPS development certificates from the machine. A prompt might get displayed to confirm the removal of some of the certificates.",[234,1762],{},"\nThere was an error trying to clean HTTPS development certificates on this machine.",[234,1765],{},"\nSequence contains no matching element",[234,1768],{},[47,1770,1772],{"href":1771},"\u002Farticles\u002Fimages\u002Fimage_636783176955551263.png",[246,1773],{"title":249,"style":1453,"border":951,"alt":249,"src":1774,"width":1156,"height":1775},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176956233921.png",27,[234,1777],{},"\nI was able to eventually resolve this issue (later) by opening “Manage user certificates”, removing any certificates with friendly names like “ASP.NET Core HTTPS development certificate”. Apparently there was a corruption in my local certificates and removing all resolved it.",[32,1780,1781,1788,1789,1791,1798,1800,1801,1804,1807],{},[47,1782,1784],{"href":1783},"\u002Farticles\u002Fimages\u002Fimage_636783176956890292.png",[246,1785],{"title":249,"style":1544,"border":951,"alt":249,"src":1786,"width":1787,"height":1156},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176957562139.png",243,"  I did this under Certificates Current User – Personal > Certificates (sort by friendly name, select all and remove)  Trusted Root",[234,1790],{},[47,1792,1794],{"href":1793},"\u002Farticles\u002Fimages\u002Fimage_636783176958629353.png",[246,1795],{"title":249,"style":1453,"border":951,"alt":249,"src":1796,"width":1156,"height":1797},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176959335403.png",37,[234,1799],{},"\nOnce this was complete I re-ran the dotnet dev-certs https --trust per the error message, I was then prompted with ‘A confirmation prompt will be displayed if the certificate was not previously trusted. Click yes on the prompt to trust the certification’.. (Reference: ",[47,1802],{"title":1803,"href":1803},"https:\u002F\u002Fgithub.com\u002Faspnet\u002FAspNetCore\u002Fissues\u002F3421",[47,1805,1803],{"href":1803,"rel":1806},[53],")",[32,1809,1810,1811,1813,1816,1817,1820,1821,1828,1829,1717,1836,1717,1843,1548,1850,1857,1858,1860,1861,1863,1864,1866,1869,1870,1872,1873,1875],{},"3 With a command prompt, cd to the ClientApp directory and npm run serve (after you can browse to the site via ",[47,1812],{"href":49},[47,1814,49],{"href":49,"rel":1815},[53]," as the on screen instructions provide)  ",[39,1818,1819],{},"Let’s do this again",", but instead of creating the vue app via the vue cli this time I will use the vue ui to build the vue app. Create another React application using the template within Visual Studio. Make the same modifications as above to the Startup.cs. Using vue ui command line and the browser based wizard create another vue app named ClientApp. When complete copy it to your Visual Studio project on top of the existing ClientApp folder.  ",[47,1822,1824],{"href":1823},"\u002Farticles\u002Fimages\u002Fimage_636783176960052361.png",[246,1825],{"title":249,"style":1453,"border":951,"alt":249,"src":1826,"width":1156,"height":1827},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176960663681.png",29,"  A browser opens with the Vue GUI options  ",[47,1830,1832],{"href":1831},"\u002Farticles\u002Fimages\u002Fimage_636783176961647957.png",[246,1833],{"title":249,"style":1453,"border":951,"alt":249,"src":1834,"width":1156,"height":1835},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176962446700.png",97,[47,1837,1839],{"href":1838},"\u002Farticles\u002Fimages\u002Fimage_636783176963253878.png",[246,1840],{"title":249,"style":1453,"border":951,"alt":249,"src":1841,"width":1156,"height":1842},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176963995444.png",36,[47,1844,1846],{"href":1845},"\u002Farticles\u002Fimages\u002Fimage_636783176964694200.png",[246,1847],{"title":249,"style":1453,"border":951,"alt":249,"src":1848,"width":1156,"height":1849},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176965536783.png",94,[47,1851,1853],{"href":1852},"\u002Farticles\u002Fimages\u002Fimage_636783176966230883.png",[246,1854],{"title":249,"style":1453,"border":951,"alt":249,"src":1855,"width":1156,"height":1856},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176966867718.png",111,"  A vue app is created on the file system, which will be copied again to our Visual Studio project (on top of the ClientApp directory) that was the original React application. Build the project…. ========== Rebuild All: 1 succeeded, 0 failed, 0 skipped ==========  1. Pressing F5 to run the application, you can see within the Output – Debug window the operations…  Microsoft.AspNetCore.DataProtection.KeyManagement.XmlKeyManager:Information: User profile is available. Using 'C:\\Users\\dyardy\\AppData\\Local\\ASP.NET\\DataProtection-Keys' as key repository and Windows DPAPI to encrypt keys at rest.",[234,1859],{},"\nMicrosoft.AspNetCore.SpaServices:Information: Starting server on port 8080...",[234,1862],{},"\nMicrosoft.AspNetCore.Hosting.Internal.WebHost:Information: Request starting HTTP\u002F1.1 DEBUG ",[47,1865],{"href":1397},[47,1867,1397],{"href":1397,"rel":1868},[53]," 0",[234,1871],{},"\nMicrosoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 32.0777ms 200",[234,1874],{},"\nMicrosoft.AspNetCore.SpaServices:Information: > ClientApp@0.1.0 serve C:\\Temp\\vue\\aspnetcorevueappGui\\aspnetcorevueappGui\\aspnetcorevueappGui\\ClientApp",[56,1877,1878],{},[32,1879,1880],{},"vue-cli-service serve '--port' '8080'",[32,1882,1883,1884,1886,1887,1889,1890,1892],{},"INFO Starting development server...",[234,1885],{},"\nMicrosoft.AspNetCore.SpaServices:Information: DONE Compiled successfully in 19505ms15:42:01",[234,1888],{},"\nMicrosoft.AspNetCore.SpaServices:Information:",[234,1891],{},"\nApp running at:",[1894,1895,1896,1905],"ul",{},[1897,1898,1899,1900,1902],"li",{},"Local: ",[47,1901],{"href":1458},[47,1903,1458],{"href":1458,"rel":1904},[53],[1897,1906,1907,1908,1911,1914,1915,1917,1918,1925,1926,1930,1931,1934,1935,1938,1941],{},"Network: ",[47,1909],{"href":1910},"http:\u002F\u002F192.168.1.101:8080\u002F",[47,1912,1910],{"href":1910,"rel":1913},[53],"    Note that the development build is not optimized.",[234,1916],{},"\nMicrosoft.AspNetCore.SpaServices:Information: To create a production build, run npm run build.  ",[47,1919,1921],{"href":1920},"\u002Farticles\u002Fimages\u002Fimage_636783176967988657.png",[246,1922],{"title":249,"style":1544,"border":951,"alt":249,"src":1923,"width":1156,"height":1924},"\u002Farticles\u002Fimages\u002Fimage_thumb_636783176968671677.png",42,"  The browser did open navigated to ",[47,1927,1928],{"href":1928,"rel":1929},"https:\u002F\u002Flocalhost:50557\u002F",[53]," changing this to ",[47,1932,1398],{"href":1398,"rel":1933},[53]," my new project opened up.  Also ",[47,1936,1120],{"title":1937,"href":1937}," http:\u002F\u002Flocalhost:8080\u002F ",[47,1939,1458],{"href":1458,"rel":1940},[53],"  works well to.  Ok so that is the end of this initial getting started with Vue.js and ASP.NET Core. Primarily this was using templates from Visual Studio, with modification then relying on Vue.js CLI (command line and gui to build a new template based on vue.js).",{"title":11,"searchDepth":12,"depth":12,"links":1943},[],"2018-11-20T13:34:57.003Z",{},"\u002Farticles\u002Fgetting-started-vuejs-wvisual-studio-aspnet-core-1",{"title":1531,"description":1536},"articles\u002Fgetting-started-vuejs-wvisual-studio-aspnet-core-1",[984,18],"gH7c2V4YNLNu8_InM5kss4Ft-n7nbDlOeseetV4SuU4",1781574760799]