{"id":1479,"date":"2024-09-17T17:56:24","date_gmt":"2024-09-17T20:56:24","guid":{"rendered":"https:\/\/martafagundez.com\/codevolution\/?p=1479"},"modified":"2024-11-23T23:43:51","modified_gmt":"2024-11-24T02:43:51","slug":"vite-abrir-automaticamente-la-aplicacion-en-el-navegador","status":"publish","type":"post","link":"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/","title":{"rendered":"Vite: Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor"},"content":{"rendered":"\n<p>Por defecto, cuando iniciamos el servidor de <strong>Vite<\/strong> con el comando <code>npm run dev<\/code>, para abrir la aplicaci\u00f3n en el navegador <strong>tenemos que hacer clic en el enlace<\/strong> http:\/\/localhost:5173\/ en la terminal o escribir manualmente dicha URL en el navegador.<\/p>\n\n\n\n<p>Pero podemos evitarnos este paso de dos formas muy sencillas.<\/p>\n\n\n\n<p>Podemos iniciar el servidor con el comando <code>npm run dev -- --open<\/code>.<\/p>\n\n\n\n<p>O podemos configurar este comportamiento en el archivo <code>vite.config.js<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 0 16px;font-size:0.8em;width:100%;text-align:left;background-color:#282A36;font-style:italic;color:#f6f6f4\"><span style=\"border-bottom:1px solid rgba(251, 251, 239, 0.2)\">vite.config.js<\/span><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ ...dem\u00e1s c\u00f3digo\n\nexport default defineConfig({\n  \/\/ ...dem\u00e1s c\u00f3digo\n  server: {\n    open: true\n  }\n  \/\/ ...dem\u00e1s c\u00f3digo\n})\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #7B7F8B\">\/\/ ...dem\u00e1s c\u00f3digo<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F286C4\">export<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #F286C4\">default<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #62E884\">defineConfig<\/span><span style=\"color: #F6F6F4\">({<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #7B7F8B\">\/\/ ...dem\u00e1s c\u00f3digo<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  server<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    open<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">true<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #7B7F8B\">\/\/ ...dem\u00e1s c\u00f3digo<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">})<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#282A36;color:#ebebe6;font-size:12px;line-height:1;position:relative\">JavaScript<\/span><\/div>\n\n\n\n<p>Listo!\ud83e\udd13<\/p>\n\n\n\n<p><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"documentacion-util\">Documentaci\u00f3n \u00fatil<\/h3>\n\n\n<ul class=\"wp-block-list\">\n<li>Opciones de la interfaz de l\u00ednea de comandos de Vite: <a href=\"https:\/\/vitejs.dev\/guide\/cli.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/vitejs.dev\/guide\/cli.html<\/a> .<\/li>\n\n\n\n<li>Configuraci\u00f3n del servidor de Vite: <a href=\"https:\/\/vitejs.dev\/config\/server-options.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/vitejs.dev\/config\/server-options.html<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Por defecto, cuando iniciamos el servidor de Vite con el comando npm run dev, para abrir la aplicaci\u00f3n en el navegador tenemos que hacer clic&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[42,38,32,49],"tags":[34],"class_list":["post-1479","post","type-post","status-publish","format-standard","hentry","category-desarrollo-web","category-frontend","category-herramientas","category-vite","tag-front-end"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Vite: Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor - CODEvolution<\/title>\n<meta name=\"description\" content=\"C\u00f3mo Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor de Vite\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vite: Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor - CODEvolution\" \/>\n<meta property=\"og:description\" content=\"C\u00f3mo Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor de Vite\" \/>\n<meta property=\"og:url\" content=\"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/\" \/>\n<meta property=\"og:site_name\" content=\"CODEvolution\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-17T20:56:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-24T02:43:51+00:00\" \/>\n<meta name=\"author\" content=\"Marta Fag\u00fandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marta Fag\u00fandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/\"},\"author\":{\"name\":\"Marta Fag\u00fandez\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"headline\":\"Vite: Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor\",\"datePublished\":\"2024-09-17T20:56:24+00:00\",\"dateModified\":\"2024-11-24T02:43:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/\"},\"wordCount\":115,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"keywords\":[\"Front End\"],\"articleSection\":[\"Desarrollo Web\",\"Front End\",\"Herramientas\",\"Vite\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/\",\"name\":\"Vite: Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor - CODEvolution\",\"isPartOf\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#website\"},\"datePublished\":\"2024-09-17T20:56:24+00:00\",\"dateModified\":\"2024-11-24T02:43:51+00:00\",\"description\":\"C\u00f3mo Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor de Vite\",\"breadcrumb\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/martafagundez.com\/codevolution\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vite: Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#website\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/\",\"name\":\"CODEvolution\",\"description\":\"Blog de Marta Fag\u00fandez\",\"publisher\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/martafagundez.com\/codevolution\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1\",\"name\":\"Marta Fag\u00fandez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png\",\"contentUrl\":\"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png\",\"width\":603,\"height\":603,\"caption\":\"Marta Fag\u00fandez\"},\"logo\":{\"@id\":\"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/\"},\"description\":\"Aqu\u00ed comparto algunos de mis aprendizajes como desarrolladora web. Si alguno de mis art\u00edculos te ha resultado \u00fatil, me alegrar\u00eda saberlo ;)\",\"sameAs\":[\"https:\/\/martafagundez.com\",\"https:\/\/www.linkedin.com\/in\/martafagundezrodriguez\",\"https:\/\/www.youtube.com\/@martafagundez\"],\"url\":\"https:\/\/martafagundez.com\/codevolution\/author\/marta\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Vite: Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor - CODEvolution","description":"C\u00f3mo Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor de Vite","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/","og_locale":"es_ES","og_type":"article","og_title":"Vite: Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor - CODEvolution","og_description":"C\u00f3mo Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor de Vite","og_url":"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/","og_site_name":"CODEvolution","article_published_time":"2024-09-17T20:56:24+00:00","article_modified_time":"2024-11-24T02:43:51+00:00","author":"Marta Fag\u00fandez","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Marta Fag\u00fandez","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/#article","isPartOf":{"@id":"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/"},"author":{"name":"Marta Fag\u00fandez","@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"headline":"Vite: Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor","datePublished":"2024-09-17T20:56:24+00:00","dateModified":"2024-11-24T02:43:51+00:00","mainEntityOfPage":{"@id":"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/"},"wordCount":115,"commentCount":0,"publisher":{"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"keywords":["Front End"],"articleSection":["Desarrollo Web","Front End","Herramientas","Vite"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/","url":"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/","name":"Vite: Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor - CODEvolution","isPartOf":{"@id":"https:\/\/martafagundez.com\/codevolution\/#website"},"datePublished":"2024-09-17T20:56:24+00:00","dateModified":"2024-11-24T02:43:51+00:00","description":"C\u00f3mo Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor de Vite","breadcrumb":{"@id":"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/martafagundez.com\/codevolution\/vite-abrir-automaticamente-la-aplicacion-en-el-navegador\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/martafagundez.com\/codevolution\/"},{"@type":"ListItem","position":2,"name":"Vite: Abrir Autom\u00e1ticamente la Aplicaci\u00f3n en el Navegador al Iniciar el Servidor"}]},{"@type":"WebSite","@id":"https:\/\/martafagundez.com\/codevolution\/#website","url":"https:\/\/martafagundez.com\/codevolution\/","name":"CODEvolution","description":"Blog de Marta Fag\u00fandez","publisher":{"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/martafagundez.com\/codevolution\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/3e1e66d60048c83d5dff039f53b615e1","name":"Marta Fag\u00fandez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/","url":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png","contentUrl":"https:\/\/martafagundez.com\/codevolution\/wp-content\/uploads\/2023\/08\/marta_fagundez_developer_avatar1.png","width":603,"height":603,"caption":"Marta Fag\u00fandez"},"logo":{"@id":"https:\/\/martafagundez.com\/codevolution\/#\/schema\/person\/image\/"},"description":"Aqu\u00ed comparto algunos de mis aprendizajes como desarrolladora web. Si alguno de mis art\u00edculos te ha resultado \u00fatil, me alegrar\u00eda saberlo ;)","sameAs":["https:\/\/martafagundez.com","https:\/\/www.linkedin.com\/in\/martafagundezrodriguez","https:\/\/www.youtube.com\/@martafagundez"],"url":"https:\/\/martafagundez.com\/codevolution\/author\/marta\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/comments?post=1479"}],"version-history":[{"count":4,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1479\/revisions"}],"predecessor-version":[{"id":1486,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/posts\/1479\/revisions\/1486"}],"wp:attachment":[{"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/media?parent=1479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/categories?post=1479"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/martafagundez.com\/codevolution\/wp-json\/wp\/v2\/tags?post=1479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}