[{"data":1,"prerenderedAt":972},["ShallowReactive",2],{"article-vue-cli-creating-a-project-issue-with-hot-reload":3},{"article":4,"tags":212,"previous":227,"next":762},{"id":5,"title":6,"author":7,"body":8,"createdAt":200,"description":201,"extension":202,"img":203,"meta":204,"navigation":205,"path":206,"seo":207,"stem":208,"tags":209,"updatedAt":200,"__hash__":211},"articles\u002Farticles\u002Fvue-cli-creating-a-project-issue-with-hot-reload.md","Vue CLI Creating a Project Issue with Hot Reload",null,{"type":9,"value":10,"toc":198},"minimark",[11,22,35,107,110,118,171,179,194],[12,13,14,15,21],"p",{},"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 ",[16,17,20],"a",{"href":18,"target":19},"https:\u002F\u002Fcli.vuejs.org\u002Fguide\u002Fcreating-a-project.html","_blank","cli.vuejs.org","\nit states that vue-clie-service starts webpack-dev-server out of the box ”",[12,23,24,25,29,30,34],{},"The ",[26,27,28],"code",{},"vue-cli-service serve"," command starts a dev server\n(based on ",[16,31,33],{"href":32},"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",[36,37,42],"pre",{"className":38,"code":39,"language":40,"meta":41,"style":41},"language-js shiki shiki-themes github-light github-dark","devServer: {          \n    useLocalIp: false,   \n        proxy: 'http:\u002F\u002Flocalhost:8080',   \n        public: '172.23.3.180:8080'       \n}\n","js","",[26,43,44,57,73,87,101],{"__ignoreMap":41},[45,46,49,53],"span",{"class":47,"line":48},"line",1,[45,50,52],{"class":51},"sScJk","devServer",[45,54,56],{"class":55},"sVt8B",": {          \n",[45,58,60,63,66,70],{"class":47,"line":59},2,[45,61,62],{"class":51},"    useLocalIp",[45,64,65],{"class":55},": ",[45,67,69],{"class":68},"sj4cs","false",[45,71,72],{"class":55},",   \n",[45,74,76,79,81,85],{"class":47,"line":75},3,[45,77,78],{"class":51},"        proxy",[45,80,65],{"class":55},[45,82,84],{"class":83},"sZZnC","'http:\u002F\u002Flocalhost:8080'",[45,86,72],{"class":55},[45,88,90,93,95,98],{"class":47,"line":89},4,[45,91,92],{"class":51},"        public",[45,94,65],{"class":55},[45,96,97],{"class":83},"'172.23.3.180:8080'",[45,99,100],{"class":55},"       \n",[45,102,104],{"class":47,"line":103},5,[45,105,106],{"class":55},"}\n",[12,108,109],{},"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?",[12,111,112,113,117],{},"The second solution which ",[114,115,116],"strong",{},"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",[36,119,121],{"className":38,"code":120,"language":40,"meta":41,"style":41},"configureWebpack: {\n   devServer: {\n      watchOptions: {\n         poll: true\n      }\n   }\n}\n",[26,122,123,131,138,145,155,160,166],{"__ignoreMap":41},[45,124,125,128],{"class":47,"line":48},[45,126,127],{"class":51},"configureWebpack",[45,129,130],{"class":55},": {\n",[45,132,133,136],{"class":47,"line":59},[45,134,135],{"class":51},"   devServer",[45,137,130],{"class":55},[45,139,140,143],{"class":47,"line":75},[45,141,142],{"class":51},"      watchOptions",[45,144,130],{"class":55},[45,146,147,150,152],{"class":47,"line":89},[45,148,149],{"class":51},"         poll",[45,151,65],{"class":55},[45,153,154],{"class":68},"true\n",[45,156,157],{"class":47,"line":103},[45,158,159],{"class":55},"      }\n",[45,161,163],{"class":47,"line":162},6,[45,164,165],{"class":55},"   }\n",[45,167,169],{"class":47,"line":168},7,[45,170,106],{"class":55},[12,172,173,174,178],{},"The script within package.json. Here you can see I am setting environment NODE_ENV to development using the ",[16,175,177],{"href":176,"target":19},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcross-env#installation","cross-env"," npm package (I had to install via npm installl –save-dev cross-env)",[36,180,182],{"className":38,"code":181,"language":40,"meta":41,"style":41},"\"dev\": \"cross-env NODE_ENV=development vue-cli-service serve --open --host localhost\"\n",[26,183,184],{"__ignoreMap":41},[45,185,186,189,191],{"class":47,"line":48},[45,187,188],{"class":83},"\"dev\"",[45,190,65],{"class":55},[45,192,193],{"class":83},"\"cross-env NODE_ENV=development vue-cli-service serve --open --host localhost\"\n",[195,196,197],"style",{},"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":41,"searchDepth":59,"depth":59,"links":199},[],"2020-05-18T21:44:23.866Z","Hot module reload issues with project created with vue cli","md","\u002Farticles\u002Fimages\u002Fvuecli.png",{},true,"\u002Farticles\u002Fvue-cli-creating-a-project-issue-with-hot-reload",{"title":6,"description":201},"articles\u002Fvue-cli-creating-a-project-issue-with-hot-reload",[210],"vuejs","stNfxxuWXTHpzSMOXcF6aqRaYHGsRiH2IzJU3A56aUM",[213],{"id":214,"title":215,"body":216,"description":220,"extension":202,"img":221,"meta":222,"name":210,"navigation":205,"path":223,"seo":224,"stem":225,"__hash__":226},"tags\u002Ftags\u002Fvuejs.md","Vuejs",{"type":9,"value":217,"toc":218},[],{"title":41,"searchDepth":59,"depth":59,"links":219},[],"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","https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1598313183973-4effcded8d5e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80",{},"\u002Ftags\u002Fvuejs",{"description":220},"tags\u002Fvuejs","FLzo8HD9QLE9FzBr4K8hRvB7QUPBQ4Ku-dpXQK90QZM",{"id":228,"title":229,"author":7,"body":230,"createdAt":754,"description":755,"extension":202,"img":252,"meta":756,"navigation":205,"path":757,"seo":758,"stem":759,"tags":760,"updatedAt":754,"__hash__":761},"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",{"type":9,"value":231,"toc":752},[232,239,242,255,258,697,706,716,726,732,746,749],[12,233,234,235,238],{},"Using @vue\u002Fcli 4.3.1",[236,237],"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?",[12,240,241],{},"The issue (visible within the screen capture – white screen and ERR_FILE_NOT_FOUND error message from the Chrome Debugger – Network Tools)",[12,243,244],{},[16,245,247],{"href":246},"\u002Farticles\u002Fimages\u002Fimage_637255046941289166.png",[248,249],"img",{"style":250,"title":251,"src":252,"alt":251,"width":253,"height":254},"display: inline;","image","\u002Farticles\u002Fimages\u002Fimage_thumb_637255046943290619.png",1124,286,[12,256,257],{},"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.",[36,259,263],{"className":260,"code":261,"language":262,"meta":41,"style":41},"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",[26,264,265,280,298,308,326,350,373,409,440,474,502,512,522,532,542,548,558,568,591,598,627,653,678,687],{"__ignoreMap":41},[45,266,267,270,274,277],{"class":47,"line":48},[45,268,269],{"class":55},"\u003C!",[45,271,273],{"class":272},"s9eBZ","DOCTYPE",[45,275,276],{"class":51}," html",[45,278,279],{"class":55},">\n",[45,281,282,285,287,290,293,296],{"class":47,"line":59},[45,283,284],{"class":55},"\u003C",[45,286,262],{"class":272},[45,288,289],{"class":51}," lang",[45,291,292],{"class":55},"=",[45,294,295],{"class":83},"\"en\"",[45,297,279],{"class":55},[45,299,300,303,306],{"class":47,"line":75},[45,301,302],{"class":55},"    \u003C",[45,304,305],{"class":272},"head",[45,307,279],{"class":55},[45,309,310,313,316,319,321,324],{"class":47,"line":89},[45,311,312],{"class":55},"        \u003C",[45,314,315],{"class":272},"meta",[45,317,318],{"class":51}," charset",[45,320,292],{"class":55},[45,322,323],{"class":83},"\"utf-8\"",[45,325,279],{"class":55},[45,327,328,330,332,335,337,340,343,345,348],{"class":47,"line":103},[45,329,312],{"class":55},[45,331,315],{"class":272},[45,333,334],{"class":51}," http-equiv",[45,336,292],{"class":55},[45,338,339],{"class":83},"\"X-UA-Compatible\"",[45,341,342],{"class":51}," content",[45,344,292],{"class":55},[45,346,347],{"class":83},"\"IE=edge\"",[45,349,279],{"class":55},[45,351,352,354,356,359,361,364,366,368,371],{"class":47,"line":162},[45,353,312],{"class":55},[45,355,315],{"class":272},[45,357,358],{"class":51}," name",[45,360,292],{"class":55},[45,362,363],{"class":83},"\"viewport\"",[45,365,342],{"class":51},[45,367,292],{"class":55},[45,369,370],{"class":83},"\"width=device-width,initial-scale=1.0\"",[45,372,279],{"class":55},[45,374,375,377,380,383,385,388,391,393,396,399,402,405,407],{"class":47,"line":168},[45,376,312],{"class":55},[45,378,379],{"class":272},"link",[45,381,382],{"class":51}," rel",[45,384,292],{"class":55},[45,386,387],{"class":83},"\"icon\"",[45,389,390],{"class":51}," href",[45,392,292],{"class":55},[45,394,395],{"class":83},"\"\u002Ffavicon.ico\"",[45,397,398],{"class":55},">\u003C",[45,400,401],{"class":272},"title",[45,403,404],{"class":55},">Cargo\u003C\u002F",[45,406,401],{"class":272},[45,408,279],{"class":55},[45,410,412,414,416,418,420,423,425,427,430,433,435,438],{"class":47,"line":411},8,[45,413,312],{"class":55},[45,415,379],{"class":272},[45,417,390],{"class":51},[45,419,292],{"class":55},[45,421,422],{"class":83},"\"\u002Fjs\u002Fcargo.js\"",[45,424,382],{"class":51},[45,426,292],{"class":55},[45,428,429],{"class":83},"\"preload\"",[45,431,432],{"class":51}," as",[45,434,292],{"class":55},[45,436,437],{"class":83},"\"script\"",[45,439,279],{"class":55},[45,441,443,445,447,449,451,454,457,460,462,464,466,468,470,472],{"class":47,"line":442},9,[45,444,312],{"class":55},[45,446,379],{"class":272},[45,448,390],{"class":51},[45,450,292],{"class":55},[45,452,453],{"class":83},"\"\u002Fjs\u002Fchunk-common",[45,455,284],{"class":456},"s7hpK",[45,458,459],{"class":83},"\u002Fstrong>.js\"",[45,461,382],{"class":51},[45,463,292],{"class":55},[45,465,429],{"class":83},[45,467,432],{"class":51},[45,469,292],{"class":55},[45,471,437],{"class":83},[45,473,279],{"class":55},[45,475,477,479,481,483,485,488,490,492,494,496,498,500],{"class":47,"line":476},10,[45,478,312],{"class":55},[45,480,379],{"class":272},[45,482,390],{"class":51},[45,484,292],{"class":55},[45,486,487],{"class":83},"\"\u002Fjs\u002Fchunk-vendors.js\"",[45,489,382],{"class":51},[45,491,292],{"class":55},[45,493,429],{"class":83},[45,495,432],{"class":51},[45,497,292],{"class":55},[45,499,437],{"class":83},[45,501,279],{"class":55},[45,503,505,508,510],{"class":47,"line":504},11,[45,506,507],{"class":55},"    \u003C\u002F",[45,509,305],{"class":272},[45,511,279],{"class":55},[45,513,515,517,520],{"class":47,"line":514},12,[45,516,302],{"class":55},[45,518,519],{"class":272},"body",[45,521,279],{"class":55},[45,523,525,527,530],{"class":47,"line":524},13,[45,526,312],{"class":55},[45,528,529],{"class":272},"noscript",[45,531,279],{"class":55},[45,533,535,537,539],{"class":47,"line":534},14,[45,536,312],{"class":55},[45,538,114],{"class":272},[45,540,541],{"class":55},">We're sorry but Cargo doesn't work properly \n",[45,543,545],{"class":47,"line":544},15,[45,546,547],{"class":55},"        without JavaScript enabled. \n",[45,549,551,554,556],{"class":47,"line":550},16,[45,552,553],{"class":55},"        Please enable it to continue.\u003C\u002F",[45,555,114],{"class":272},[45,557,279],{"class":55},[45,559,561,564,566],{"class":47,"line":560},17,[45,562,563],{"class":55},"        \u003C\u002F",[45,565,529],{"class":272},[45,567,279],{"class":55},[45,569,571,573,576,579,581,584,587,589],{"class":47,"line":570},18,[45,572,312],{"class":55},[45,574,575],{"class":272},"div",[45,577,578],{"class":51}," id",[45,580,292],{"class":55},[45,582,583],{"class":83},"\"app\"",[45,585,586],{"class":55},">\u003C\u002F",[45,588,575],{"class":272},[45,590,279],{"class":55},[45,592,594],{"class":47,"line":593},19,[45,595,597],{"class":596},"sJ8bj","        \u003C!-- built files will be auto injected -->\n",[45,599,601,603,606,609,611,614,617,619,621,623,625],{"class":47,"line":600},20,[45,602,312],{"class":55},[45,604,605],{"class":272},"script",[45,607,608],{"class":51}," type",[45,610,292],{"class":55},[45,612,613],{"class":83},"\"text\u002Fjavascript\"",[45,615,616],{"class":51}," src",[45,618,292],{"class":55},[45,620,487],{"class":83},[45,622,586],{"class":55},[45,624,605],{"class":272},[45,626,279],{"class":55},[45,628,630,632,634,636,638,640,642,644,647,649,651],{"class":47,"line":629},21,[45,631,312],{"class":55},[45,633,605],{"class":272},[45,635,608],{"class":51},[45,637,292],{"class":55},[45,639,613],{"class":83},[45,641,616],{"class":51},[45,643,292],{"class":55},[45,645,646],{"class":83},"\"\u002Fjs\u002Fchunk-common.js\"",[45,648,586],{"class":55},[45,650,605],{"class":272},[45,652,279],{"class":55},[45,654,656,658,660,662,664,666,668,670,672,674,676],{"class":47,"line":655},22,[45,657,312],{"class":55},[45,659,605],{"class":272},[45,661,608],{"class":51},[45,663,292],{"class":55},[45,665,613],{"class":83},[45,667,616],{"class":51},[45,669,292],{"class":55},[45,671,422],{"class":83},[45,673,586],{"class":55},[45,675,605],{"class":272},[45,677,279],{"class":55},[45,679,681,683,685],{"class":47,"line":680},23,[45,682,507],{"class":55},[45,684,519],{"class":272},[45,686,279],{"class":55},[45,688,690,693,695],{"class":47,"line":689},24,[45,691,692],{"class":55},"\u003C\u002F",[45,694,262],{"class":272},[45,696,279],{"class":55},[12,698,24,699,702,703],{},[114,700,701],{},"resolution"," while difficult to find, was easy to implement.  Opening up my vue.config.js I simply referenced the publicPath with a vlaue of  ",[114,704,705],{},"publicPath: '.\u002F'",[12,707,708],{},[16,709,711],{"href":710},"\u002Farticles\u002Fimages\u002Fimage_637255046945239780.png",[248,712],{"style":250,"title":251,"src":713,"alt":251,"width":714,"height":715},"\u002Farticles\u002Fimages\u002Fimage_thumb_637255046947319889.png",567,375,[12,717,718,719,725],{},"Finding the ",[16,720,724],{"href":721,"target":19,"rel":722},"https:\u002F\u002Fcli.vuejs.org\u002Fconfig\u002F#vue-config-js",[723],"noopener","documentation",", the default value is ‘\u002F’ which is what I was finding. ",[12,727,728,729],{},"The base URL your application bundle will be deployed at (known as baseUrl before Vue CLI 3.3). ",[114,730,731],{},"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.",[12,733,734,735,740,741,745],{},"By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g. ",[16,736,737],{"href":737,"rel":738},"https:\u002F\u002Fwww.my-app.com\u002F",[739],"nofollow",". 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 ",[16,742,743],{"href":743,"rel":744},"https:\u002F\u002Fwww.foobar.com\u002Fmy-app\u002F",[739],", set publicPath to '\u002Fmy-app\u002F'.",[12,747,748],{},"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.",[195,750,751],{},"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":41,"searchDepth":59,"depth":59,"links":753},[],"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":229,"description":755},"articles\u002Fpath-to-resources-javascript-images-etc-not-found-with-vuejs-build",[210],"ccEvdVv8lVqOsfxnu_npwblWarxJcuJEuUnc3xPa8Zk",{"id":763,"title":764,"author":7,"body":765,"createdAt":962,"description":769,"extension":202,"img":963,"meta":964,"navigation":205,"path":965,"seo":966,"stem":967,"tags":968,"updatedAt":962,"__hash__":971},"articles\u002Farticles\u002Fwindowscryptographicexception-the-system-cannot-find-the-file-specified.md","WindowsCryptographicException The system cannot find the file specified.",{"type":9,"value":766,"toc":960},[767,770,773,795,798,812,957],[12,768,769],{},"Azure – while trying to read pfx (certificate) from disk I came across a number of issues, but thought this might help some out.",[12,771,772],{},"The fix was adding the final parameter X509KeyStorageFlags",[36,774,778],{"className":775,"code":776,"language":777,"meta":41,"style":41},"language-cs shiki shiki-themes github-light github-dark","var cert = new X509Certificate2(\n    $\"{Environment.ContentRootPath}\u002FApp_Data\u002Fmycert.pfx\",\"{password}\",\n    X509KeyStorageFlags.MachineKeySet); \n","cs",[26,779,780,785,790],{"__ignoreMap":41},[45,781,782],{"class":47,"line":48},[45,783,784],{},"var cert = new X509Certificate2(\n",[45,786,787],{"class":47,"line":59},[45,788,789],{},"    $\"{Environment.ContentRootPath}\u002FApp_Data\u002Fmycert.pfx\",\"{password}\",\n",[45,791,792],{"class":47,"line":75},[45,793,794],{},"    X509KeyStorageFlags.MachineKeySet);\n",[12,796,797],{},"Other references:",[12,799,800,803,806,809],{},[16,801],{"href":802},"https:\u002F\u002Fsupport.microsoft.com\u002Fen-us\u002Fhelp\u002F950090\u002Finstalling-a-pfx-file-using-x509certificate-from-a-standard-net-applic",[16,804,802],{"href":802,"rel":805},[739],[16,807],{"href":808},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F52750160\u002Fwhat-is-the-rationale-for-all-the-different-x509keystorageflags",[16,810,808],{"href":808,"rel":811},[739],[36,813,815],{"className":260,"code":814,"language":262,"meta":41,"style":41},"An unhandled exception occurred while processing the request.\nWindowsCryptographicException: The system cannot find the file specified. System.Security.Cryptography.CngKey.Open(string keyName, CngProvider provider, CngKeyOpenOptions openOptions)  \nException: An error was encountered while handling the remote login. Microsoft.AspNetCore.Authentication.RemoteAuthenticationHandler\u003CTOptions>.HandleRequestAsync()  \nStack Query Cookies Headers Routing \nWindowsCryptographicException: The system cannot find the file specified. System.Security.Cryptography.CngKey.Open(string keyName, \n    CngProvider provider, CngKeyOpenOptions openOptions) \nSystem.Security.Cryptography.CngKey.Open(string keyName, CngProvider provider) \nInternal.Cryptography.Pal.CertificatePal.GetPrivateKey\u003CT>(Func\u003CCspParameters, T> createCsp, Func\u003CCngKey, T> createCng) \nInternal.Cryptography.Pal.CertificatePal.GetRSAPrivateKey() \nSystem.Security.Cryptography.X509Certificates.X509Certificate2.get_PrivateKey() \nMicrosoft.IdentityModel.Tokens.X509SecurityKey.get_PrivateKey() \nMicrosoft.IdentityModel.Tokens.X509SecurityKey.get_PrivateKeyStatus() \nMicrosoft.IdentityModel.Tokens.AsymmetricSignatureProvider.FoundPrivateKey(SecurityKey key) \nMicrosoft.IdentityModel.Tokens.AsymmetricSignatureProvider..ctor(SecurityKey key, string algorithm, bool willCreateSignatures) \nMicrosoft.IdentityModel.Tokens.AsymmetricSignatureProvider..ctor(SecurityKey key, string algorithm, bool willCreateSignatures, \n        CryptoProviderFactory cryptoProviderFactory) \nMicrosoft.IdentityModel.Tokens.CryptoProviderFactory.CreateSignatureProvider(SecurityKey key, string algorithm, bool willCreateSignatures) \nMicrosoft.IdentityModel.Tokens.CryptoProviderFactory.CreateForSigning(SecurityKey key, string algorithm)  Microsoft.IdentityModel.JsonWebTokens.JwtTokenUtilities.CreateEncodedSignature(string input, SigningCredentials signingCredentials) System.IdentityModel.Tokens.Jwt.JwtSecurityTokenHandler.WriteToken(SecurityToken token)  Sample.Idp.Startup+\u003C>c__DisplayClass7_0.\u003CConfigureServices>b__8(AuthorizationCodeReceivedContext context) in Startup.cs\nMicrosoft.AspNetCore.Authentication.OpenIdConnect.OpenIdConnectEvents.AuthorizationCodeReceived(AuthorizationCodeReceivedContext context) Microsoft.AspNetCore.Authentication.OpenIdConnect.OpenIdConnectHandler.RunAuthorizationCodeReceivedEventAsync(OpenIdConnectMessage authorizationResponse, ClaimsPrincipal user, AuthenticationProperties properties, JwtSecurityToken jwt) \nMicrosoft.AspNetCore.Authentication.OpenIdConnect.OpenIdConnectHandler.HandleRemoteAuthenticateAsync() \n",[26,816,817,822,827,838,843,848,853,858,886,891,896,901,906,911,916,921,926,931,947,952],{"__ignoreMap":41},[45,818,819],{"class":47,"line":48},[45,820,821],{"class":55},"An unhandled exception occurred while processing the request.\n",[45,823,824],{"class":47,"line":59},[45,825,826],{"class":55},"WindowsCryptographicException: The system cannot find the file specified. System.Security.Cryptography.CngKey.Open(string keyName, CngProvider provider, CngKeyOpenOptions openOptions)  \n",[45,828,829,832,835],{"class":47,"line":75},[45,830,831],{"class":55},"Exception: An error was encountered while handling the remote login. Microsoft.AspNetCore.Authentication.RemoteAuthenticationHandler\u003C",[45,833,834],{"class":456},"TOptions",[45,836,837],{"class":55},">.HandleRequestAsync()  \n",[45,839,840],{"class":47,"line":89},[45,841,842],{"class":55},"Stack Query Cookies Headers Routing \n",[45,844,845],{"class":47,"line":103},[45,846,847],{"class":55},"WindowsCryptographicException: The system cannot find the file specified. System.Security.Cryptography.CngKey.Open(string keyName, \n",[45,849,850],{"class":47,"line":162},[45,851,852],{"class":55},"    CngProvider provider, CngKeyOpenOptions openOptions) \n",[45,854,855],{"class":47,"line":168},[45,856,857],{"class":55},"System.Security.Cryptography.CngKey.Open(string keyName, CngProvider provider) \n",[45,859,860,863,866,869,872,875,878,881,883],{"class":47,"line":411},[45,861,862],{"class":55},"Internal.Cryptography.Pal.CertificatePal.GetPrivateKey\u003C",[45,864,865],{"class":456},"T",[45,867,868],{"class":55},">(Func\u003C",[45,870,871],{"class":456},"CspParameters,",[45,873,874],{"class":51}," T",[45,876,877],{"class":55},"> createCsp, Func\u003C",[45,879,880],{"class":456},"CngKey,",[45,882,874],{"class":51},[45,884,885],{"class":55},"> createCng) \n",[45,887,888],{"class":47,"line":442},[45,889,890],{"class":55},"Internal.Cryptography.Pal.CertificatePal.GetRSAPrivateKey() \n",[45,892,893],{"class":47,"line":476},[45,894,895],{"class":55},"System.Security.Cryptography.X509Certificates.X509Certificate2.get_PrivateKey() \n",[45,897,898],{"class":47,"line":504},[45,899,900],{"class":55},"Microsoft.IdentityModel.Tokens.X509SecurityKey.get_PrivateKey() \n",[45,902,903],{"class":47,"line":514},[45,904,905],{"class":55},"Microsoft.IdentityModel.Tokens.X509SecurityKey.get_PrivateKeyStatus() \n",[45,907,908],{"class":47,"line":524},[45,909,910],{"class":55},"Microsoft.IdentityModel.Tokens.AsymmetricSignatureProvider.FoundPrivateKey(SecurityKey key) \n",[45,912,913],{"class":47,"line":534},[45,914,915],{"class":55},"Microsoft.IdentityModel.Tokens.AsymmetricSignatureProvider..ctor(SecurityKey key, string algorithm, bool willCreateSignatures) \n",[45,917,918],{"class":47,"line":544},[45,919,920],{"class":55},"Microsoft.IdentityModel.Tokens.AsymmetricSignatureProvider..ctor(SecurityKey key, string algorithm, bool willCreateSignatures, \n",[45,922,923],{"class":47,"line":550},[45,924,925],{"class":55},"        CryptoProviderFactory cryptoProviderFactory) \n",[45,927,928],{"class":47,"line":560},[45,929,930],{"class":55},"Microsoft.IdentityModel.Tokens.CryptoProviderFactory.CreateSignatureProvider(SecurityKey key, string algorithm, bool willCreateSignatures) \n",[45,932,933,936,938,941,944],{"class":47,"line":570},[45,934,935],{"class":55},"Microsoft.IdentityModel.Tokens.CryptoProviderFactory.CreateForSigning(SecurityKey key, string algorithm)  Microsoft.IdentityModel.JsonWebTokens.JwtTokenUtilities.CreateEncodedSignature(string input, SigningCredentials signingCredentials) System.IdentityModel.Tokens.Jwt.JwtSecurityTokenHandler.WriteToken(SecurityToken token)  Sample.Idp.Startup+",[45,937,284],{"class":456},[45,939,940],{"class":55},">c__DisplayClass7_0.\u003C",[45,942,943],{"class":456},"ConfigureServices",[45,945,946],{"class":55},">b__8(AuthorizationCodeReceivedContext context) in Startup.cs\n",[45,948,949],{"class":47,"line":593},[45,950,951],{"class":55},"Microsoft.AspNetCore.Authentication.OpenIdConnect.OpenIdConnectEvents.AuthorizationCodeReceived(AuthorizationCodeReceivedContext context) Microsoft.AspNetCore.Authentication.OpenIdConnect.OpenIdConnectHandler.RunAuthorizationCodeReceivedEventAsync(OpenIdConnectMessage authorizationResponse, ClaimsPrincipal user, AuthenticationProperties properties, JwtSecurityToken jwt) \n",[45,953,954],{"class":47,"line":600},[45,955,956],{"class":55},"Microsoft.AspNetCore.Authentication.OpenIdConnect.OpenIdConnectHandler.HandleRemoteAuthenticateAsync()\n",[195,958,959],{},"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);}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":41,"searchDepth":59,"depth":59,"links":961},[],"2020-05-08T18:24:50.164Z","\u002Farticles\u002Fimages\u002Fimage_thumb_637245590899400228.png",{},"\u002Farticles\u002Fwindowscryptographicexception-the-system-cannot-find-the-file-specified",{"title":764,"description":769},"articles\u002Fwindowscryptographicexception-the-system-cannot-find-the-file-specified",[969,970],"azure","javascript","gbbOXSewTUn-I9zN11i80mm77-02qjY2Sj3AUb7gbjM",1781574770003]