{"id":989,"date":"2023-03-24T17:09:09","date_gmt":"2023-03-24T22:09:09","guid":{"rendered":"https:\/\/www.hostinglabs.net\/content\/?post_type=ht_kb&p=989"},"modified":"2023-03-27T14:53:36","modified_gmt":"2023-03-27T19:53:36","slug":"como-subir-mi-aplicacion-react-en-cpanel","status":"publish","type":"ht_kb","link":"https:\/\/hostinglabs.net\/asistencia\/base-de-conocimientos\/como-subir-mi-aplicacion-react-en-cpanel\/","title":{"rendered":"C\u00f3mo subir mi aplicaci\u00f3n React a mi Plan de alojamiento cPanel"},"content":{"rendered":"\n
\"imagen<\/figure>\n\n\n\n

En esta gu\u00eda aprenderemos a como subir tu aplicaci\u00f3n React a cPanel. Esta gu\u00eda asume que tienes un entorno de desarrollo local y que planeas cargar tu aplicaci\u00f3n final al Plan de Alojamiento contratado con HostingLabs.<\/p>\n\n\n\n

Paso 01 – Especificar la ruta donde se alojar\u00e1 tu aplicaci\u00f3n:<\/h5>\n\n\n\n
\n

Tanto la propiedad homepage<\/code> de Create React App como la propiedad base<\/code> de Vite son utilizadas para especificar la ruta base de una aplicaci\u00f3n web en producci\u00f3n. Sin embargo, existen algunas diferencias entre ambas.<\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n\n\n\n

La propiedad homepage<\/code> se utiliza en la configuraci\u00f3n de Create React App para especificar la ruta base de la aplicaci\u00f3n. Cuando se ejecuta el comando npm run build<\/code>, esta propiedad se utiliza para generar los enlaces a los archivos de la aplicaci\u00f3n. Por ejemplo, si especificamos \"homepage\": \"\/mi-aplicacion\/\"<\/code>, entonces la aplicaci\u00f3n incluir\u00e1 enlaces a los archivos \/mi-aplicacion\/static\/js\/main.chunk.js<\/code>. <\/p>\n\n\n\n

\"etiqueta<\/figure>\n\n\n\n

Por otro lado, la propiedad base<\/code> en la configuraci\u00f3n de Vite se utiliza para especificar la ruta base de la aplicaci\u00f3n durante el proceso de construcci\u00f3n y empaquetado. Esta propiedad es \u00fatil para configurar correctamente la ruta de los recursos est\u00e1ticos generados durante el proceso de construcci\u00f3n. Por ejemplo, si especificamos base: '\/mi-aplicacion\/'<\/code>, entonces Vite cargar\u00e1 todos los recursos con la ruta\/mi-aplicacion\/assets\/js\/main.12345.js<\/code>.<\/p>\n\n\n\n

\"atributo<\/figure>\n\n\n\n
Paso 02: Crear el archivo de compilaci\u00f3n<\/h5>\n\n\n\n

En el directorio ra\u00edz de tu aplicaci\u00f3n que esta en un entorno de desarrollo en tu maquina local, ejecuta:<\/p>\n\n\n

\n\/**Yarn **\/\nyarn install\n\/**NPM**\/\nnpm install\n<\/pre><\/div>\n\n\n
para instalar las dependencias actualizadas. Una vez que esto haya terminado, ejecutamos el siguiente comando para compilar el proyecto:<\/p>\n\n\n
\n\/**Yarn **\/\nyarn build\n\/**NPM**\/\nnpm build\n<\/pre><\/div>\n\n\n
\n
Notar\u00e1s en el caso de ‘create-react-app’ que este crea un nuevo directorio en tu proyecto llamado ‘build’. La carpeta de compilaci\u00f3n es esencialmente una versi\u00f3n s\u00faper comprimida de su programa que tiene todo lo que su navegador necesita para identificar y ejecutar su aplicaci\u00f3n, en el caso que uses ‘vite’ la carpeta que se crear\u00e1 es ‘dist’<\/p>\n<\/blockquote>\n\n\n\n
Ingresamos a la carpeta \u00abbuild\u00bb o \u00abdist\u00bb de nuestro proyecto y comprimimos los archivos como un archivo .zip:<\/p>\n\n\n\n
\"comprimir<\/figure>\n\n\n\n
Paso 03 – Ingresamos a nuestro Alojamiento web:<\/h5>\n\n\n\n
Nos dirigimos al \u00abAdministrador de archivos\u00bb:<\/p>\n\n\n\n
\"clic<\/figure>\n\n\n\n
Especificamos en el atributo ‘homepage’ como ‘\/mi_proyecto\/’ en pasos anteriores, ahora en nuestro administrador de archivos nos dirigimos a ‘public_html’ y creamos la carpeta ‘mi_proyecto’:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Dentro de la carpeta subimos nuestro archivo .zip, damos clic en ‘cargar’:<\/p>\n\n\n\n
\"cargar<\/figure>\n\n\n\n
Y arrastramos el archivo para cargarlo:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Extraemos el zip en nuestra carpeta:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Paso 04 – Creamos un archivo .htaccess<\/h5>\n\n\n\n
Edite el archivo e inserte la siguiente informaci\u00f3n:<\/p>\n\n\n
\n&lt;IfModule mod_rewrite.c>\n\n  RewriteEngine On\n  RewriteBase \/\n  RewriteRule ^index\\.html$ - [L]\n  RewriteCond %{REQUEST_FILENAME} !-f\n  RewriteCond %{REQUEST_FILENAME} !-d\n  RewriteCond %{REQUEST_FILENAME} !-l\n  RewriteRule . \/index.html [L]\n\n&lt;\/IfModule>\n<\/pre><\/div>\n\n\n
\u00a1Felicidades! Aprendimos a como deplegar una aplicaci\u00f3n React en nuestra Plan de Alojamiento cPanel. Si tienes problemas al realizar alguno de los pasos, recuerda que siempre puedes ponerte en contacto con nosotros a trav\u00e9s de nuestros canales de atenci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"
En esta gu\u00eda aprenderemos a como subir tu aplicaci\u00f3n React a cPanel. Esta gu\u00eda asume que tienes un entorno de desarrollo local y que planeas cargar tu aplicaci\u00f3n final al Plan de Alojamiento contratado con HostingLabs. Paso 01 – Especificar la ruta donde se alojar\u00e1 tu aplicaci\u00f3n: Tanto la propiedad…<\/p>\n","protected":false},"author":2,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[31],"ht-kb-tag":[43,60],"class_list":["post-989","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-aplicaciones","ht_kb_tag-cpanel","ht_kb_tag-react"],"_links":{"self":[{"href":"https:\/\/hostinglabs.net\/asistencia\/wp-json\/wp\/v2\/ht-kb\/989"}],"collection":[{"href":"https:\/\/hostinglabs.net\/asistencia\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/hostinglabs.net\/asistencia\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/hostinglabs.net\/asistencia\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hostinglabs.net\/asistencia\/wp-json\/wp\/v2\/comments?post=989"}],"version-history":[{"count":28,"href":"https:\/\/hostinglabs.net\/asistencia\/wp-json\/wp\/v2\/ht-kb\/989\/revisions"}],"predecessor-version":[{"id":1045,"href":"https:\/\/hostinglabs.net\/asistencia\/wp-json\/wp\/v2\/ht-kb\/989\/revisions\/1045"}],"wp:attachment":[{"href":"https:\/\/hostinglabs.net\/asistencia\/wp-json\/wp\/v2\/media?parent=989"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/hostinglabs.net\/asistencia\/wp-json\/wp\/v2\/ht-kb-category?post=989"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/hostinglabs.net\/asistencia\/wp-json\/wp\/v2\/ht-kb-tag?post=989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}