Cómo utilizar el ordenador como servidor local con XAMPP para crear páginas web sin conexión a internet

15 de enero - 2024

Imagina tener tu propio servidor local privado en casa, donde puedas experimentar y perfeccionar tus proyectos web sin necesidad de conexión a internet. Gracias a programas como XAMPP, este sueño se puede hacer realidad. ¡Prepárate para adentrarte en el emocionante universo de la creación web local!

Ahora puedes transformar tu computadora en un centro de pruebas y desarrollo web en unos pocos minutos. Si alguna vez te has preguntado cómo los profesionales construyen y prueban sus sitios antes de lanzarlos al mundo, has encontrado el sitio correcto.

instalar servidor local con xampp

Este artículo se centra en cómo usar Xampp en ordenadores con Windows, si eres usuario de Mac y quieres instalar XAMPP para ordenadores de la manzana mordida, puede interesarte la primera parte del artículo sobre "Cómo instalar XAMPP en un ordenador Mac para trabajar con WordPress".

Suscríbete:

¿Qué es un Servidor local?

Un servidor local es un ordenador, en este caso el nuestro, que funciona como dispositivo principal encargado de almacenar y gestionar los datos de un proyecto y al que solo se puede acceder desde una red local o desde el mismo dispositivo.

Aunque existe un abanico muy amplio donde utilizar un servidor local, este artículo se centrará en configurar un servidor local para sitios webs y aplicaciones, donde podrás gestionar los archivos y las bases de datos de instalaciones como WordPress, PrestaShop o cualquier otra aplicación de este tipo sin necesidad de contratar un hosting durante el proceso de desarrollo.

Ventajas de utilizar un servidor local frente a un servidor online o hosting en la nube

Un servidor local ofrece una serie de ventajas y beneficios durante el desarrollo y creación de páginas webs, aplicaciones o proyectos, que nos ayudarán a ser más productivos a la hora de trabajar.

  • Precio: Contratar un servidor online o hosting siempre cuesta una cantidad de dinero que tendremos que desembolsar mensualmente o por el periodo que hayamos contratado, mientras que en un servidor local, o "local server", no tendremos que preocuparnos porque el ordenador es nuestro centro de datos y no tenemos que pagar a nadie por utilizarlo.
  • Cortes en la conexión: Con un servidor local no tendrás que preocuparte si se ha caído el servidor y no puedes conectarte para acceder al contenido, del ancho de banda ni de los cortes o incidencias con la red. Al trabajar en local no te afectarán los problemas externos a tu ordenador.
  • Consumo de recursos: En el momento de desarrollar un proyecto, los continuos cambios y pruebas consumen un montón de recursos que un servicio de hosting puede cobrarte por exceder el límite que te hayan marcado. Por ejemplo, en tu ordenador tendrás tanto espacio como disco duro tengas libre y tanta memoria o procesos de CPU como tengas instalados en tu ordenador.
  • Protección de la información: Al no tener conexión desde el exterior hacia el servidor local, nadie, excepto tú sentado delante del ordenador, tendrá acceso al contenido que vayas incorporando a cada proyecto.

Convertir el ordenador en un servidor local con XAMPP (local server)

Hace algunos años, para poder convertir el ordenador en un servidor local y hacerlo funcionar correctamente, entrañaba cierta dificultad al tener que instalar varios paquetes por separado y configurarlos manualmente para que trabajasen a la vez, por lo que se requería ciertos conocimientos de programación y tocar archivos de sistema del ordenador.

Pero todo eso ha quedado atrás y ahora existen instaladores que hacen todo el trabajo automatizado para que nosotros sólo tengamos que acceder a la aplicación para hacerlo funcionar.

Desde un punto de vista práctico y personal, podemos orientar el uso del servidor local para realizar pruebas, comprobar el funcionamiento de páginas web o trabajar en modo de desarrollo antes de poner en producción un proyecto. Pero siendo más ambiciosos también se puede convertir nuestra máquina en un servidor con salida a la red para dar un servicio de hosting, aunque esto último no lo recomiendo y no explicaré aquí cómo hacerlo.

Servidor local para realizar pruebas de páginas web
Realizar pruebas en servidor local

¿Qué incluye el instalador de un servidor local?

XAMPP es uno de los paquetes para convertir tu ordenador en un servidor local más utilizados y sencillos que vas a encontrar para tu ordenador.

Aunque en sus orígenes se creó para una plataforma concreta como es Windows, en la actualidad existen versiones tanto para Mac como para Linux.

Todos los instaladores incluyen básicamente los mismos paquetes para crear un servidor local, aunque las limitaciones de los diferentes sistemas operativos pueden excluir algunos paquetes más avanzados por motivos de seguridad:

  • Un servidor web, el más utilizado suele ser Apache.
  • Un servidor de bases de datos, normalmente MySQL o MariaDB, gestionados por phpMyAdmin.
  • Uno o varios lenguajes de programación, principalmente PHP.

Estas funciones suelen ir gestionadas desde un mismo panel de administración o desde un enlace a una página web gestionada directamente por el servidor local.

Recomendaciones antes de instalar un servidor local

Es muy fácil descargar la última versión de la instalación para crear un "local server" y empezar a trabajar, pero para no tener problemas a la hora de colgar el trabajo de forma online en un servidor comercial o servicio de hosting, debemos fijarnos en las propiedades que más nos interesen:

  • Debemos trabajar con unas características semejantes a las que tenga el hosting que adquiramos con posterioridad. A la hora de descargar el paquete de instalación, tendremos varias opciones con distintas versiones de PHP, MySQL o Apache. Por lo general no hay problemas porque los hostings están actualizándose continuamente, pero más vale comprobarlo.
  • No todos los instaladores valen para todos los equipos. Dependiendo del sistema operativo que tengamos, tendremos que descargarnos la versión para Windows, Mac o Linux. Existe alguna versión para Android, muy útil si trabajamos con tabletas con este sistema.
  • Además, algunos instaladores ofrecen paquetes adicionales que pueden servir para configurar algunas características más avanzadas, debemos investigar y descargar el que mejor se adapte a nuestras necesidades.
  • Al no disponer de un entorno online que permita la conexión de fuera hacia nuestro servidor local, (que no es lo mismo que tener conexión a internet, que si la tenemos), algunas funciones, como el uso de correos electrónicos, no podremos utilizarlas, a no ser que nos compliquemos la vida realizando configuraciones avanzadas que requieren un conocimiento más amplio.
  • Estos programas utilizan determinados puertos que pueden estar ocupados por otras aplicaciones como Skype, algún gestor de descargas o alguna máquina virtual que puedas tener instalada. En estos casos debemos desinstalar esos programas o configurar unos puertos de comunicación diferentes una vez instalado el servidor.

A continuación, veremos cómo instalar XAMPP y MAMP en las plataformas para las que se crearon inicialmente.

Instalar XAMPP en Windows

servidor local con xamp

XAMPP es el resultado de unir diferentes instaladores dedicados a plataformas individuales (WAMP para Windows o LAMP para Linux) en un software que puede ser utilizado en diferentes sistemas operativos bajo el mismo nombre, sus iniciales significan:

  • X - Indicar que tiene versiones para diferentes sistemas operativos o plataformas
  • A - Servidor web Apache
  • M - Servidor de base de datos MariaDB/MySQL
  • P - Lenguaje de programación PHP
  • P - Lenguaje de programación Perl

Es totalmente gratuito y podemos descargarlo desde su página web oficial apachefriends.

Es muy intuitivo y se puede configurar para que arranque cuando enciendas el ordenador o activarlo cuando lo necesites. En su web podemos encontrar la última versión con todos los paquetes actualizados y para distintas plataformas.

Una vez hemos conseguido convertir el ordenador en un servidor local, sólo queda empezar a trabajar con él. Podemos crear tantas webs como capacidad de disco duro tenga nuestro ordenador.

Proceso de instalación de XAMPP

Desde la página oficial de XAMPP accedemos a la pestaña "Descargas" para así poder elegir entre varias versiones de PHP. No siempre la última versión es la que nos conviene porque si, por ejemplo, vamos a utilizar WordPress, los desarrolladores de plugins o complementos pueden no haber actualizado la programación de estos.

Descargar Xampp
Descargar la versión adecuada de Xampp

Cuando descarguemos el archivo, lo ejecutamos como administradores picando con el botón derecho del ratón sobre el instalador y seleccionando la opción correspondiente.

Instalar Xampp ejecutando el archivo como administrador
Ejecutar como administrador

Antes de iniciarse el proceso nos avisará si tenemos activado un control de cuentas de usuario que restringe la lectura y escritura de las carpetas y archivos. Para que todo funcione perfectamente hay que realizar la instalación en una ruta fuera de la carpeta "Archivos de programa" o desactivar UAC en el ordenador.

Aviso de Control de Cuenta de Usuario (UAC) al instalar XAMPP
Aviso de Control de Cuenta de Usuario (UAC)

El camino más sencillo es el primero, así que cuando nos pida la ruta de instalación nos aseguraremos que la instalación del servidor local se realiza directamente en la raíz del disco, por ejemplo "C:/XAMPP".

URL de instalación de XAMPP

El resto de opciones que nos solicite durante la instalación las dejamos como vienen configuradas de origen y elegimos entre utilizar el programa en inglés o alemán (este es uno de los inconvenientes del programa, no hay versión en español).

Al finalizar la copia de archivos en el ordenador, daremos permiso a Apache para que pueda acceder a las redes privadas y públicas. Y posteriormente, cuando iniciemos el programa y arranquemos los servicios, también daremos los mismos permisos a MySQL.

Si no lo hacemos, no podremos instalar plugins de WordPress desde internet o complementos de PrestaShop, incluso podría fallar la visualización del trabajo del servidor local al cargarlo en el navegador.

Conceder permisos de conexión

Ejecutar XAMPP como administrador

Antes de iniciar XAMPP, es necesario un último paso, cuando aparezca la ventana de instalación completa, desmarcamos la pestaña para iniciar el programa y picamos en finalizar.

Abrimos la carpeta donde se ha instalado XAMPP y localizamos el archivo "xampp-control.exe". Picamos con el botón derecho del ratón y editamos las "Propiedades" para acceder a la pestaña "Compatibilidad".

Marcamos la pestaña "Ejecutar este programa como administrador" y guardamos los cambios.

Ejecutar XAMPP como administrador

Configuración y uso inicial de XAMPP

Para iniciar XAMMP podemos acceder a la ruta de instalación de nuestro disco duro picando en el ejecutable "xampp-control.exe" o desde el enlace de "Todas las Aplicaciones" de la barra de Windows.

Para futuros inicios, y si lo consideramos oportuno, podemos crear un acceso directo en el escritorio.

En el panel de control de XAMPP encontraremos todos los servicios que necesitamos, para hacer funcionar el servidor local solo es necesario activar "Apache" y "MySQL" picando en el botón "Start".

Si no aparece ningún problema en la consola inferior con texto en rojo, los servicios se marcarán en color verde y ya podremos acceder a través del navegador.

Es muy posible que la primera vez que activemos algún servicio nos solicite permisos de acceso a las redes públicas y privadas para poder conectarse con normalidad.

Apache y MySAL de XAMPP arrancados correctamente
Apache y MySQL arrancados correctamente

Panel de configuración general

Antes de hacer nada hay que pasar por el botón "Config", donde seleccionaremos una serie de opciones importantes:

  • Editor: El programa que usaremos para editar los archivos. Por defecto viene configurado "Notepad".
  • Browser (Navegador): El navegador web de nuestra preferencia que tengamos instalado en el ordenador.
  • Autostart of modules: Los servicios que de iniciarán automáticamente al arrancar XAMPP.
  • Start Control Panel Minimized: El programa se iniciará minimizado en la barra de Windows.
  • Enable Tomcat output on startup: Solo si desarrollamos aplicaciones en Java.
  • Show debug information: Muestra la información de depuración para ver si hay errores en las aplicaciones.

Además, podemos cambiar el idioma entre inglés y alemán y comprobar los puertos utilizados por los servicios.

Panel de configuración de XAMPP
Panel de configuración de XAMPP

La prueba definitiva para comprobar el funcionamiento del servidor local es abrir el navegador web y escribir en la barra de navegación "localhost". Por defecto se abrirá una página configurada desde donde poder ver la información instalada en nuestro ordenador que corresponde al servidor local.

Página principal del servidor local
Página principal del servidor local

Dónde se colocan los archivos en XAMPP

Ahora podemos empezar a instalar aplicaciones, crear páginas web y todo lo que se nos ocurra hacer con este servidor local. Para eso hay que acceder a la raíz donde colocaremos todos los archivos, que en nuestro ordenador es una carpeta llamada "htdocs" dentro de la ruta de la instalación de XAMPP, en mi caso sería "C:/xampp/htdocs". Para hacer esta carpeta más accesible podemos crear un acceso directo en el escritorio si lo creemos conveniente.

Ruta de la carpeta raíz de XAMPP
Ruta de la carpeta raíz de XAMPP

Para tener un poco de orden y que no se mezclen los archivos de los numerosos proyectos que tengamos, crearemos carpetas independientes que funcionarán como si fuesen los dominios de un hosting real.

Para acceder a los diferentes proyectos escribiremos en la barra de navegación del navegador web "localhost\(nombre de la carpeta del proyecto)".

Recomiendo que los nombres sean sencillos, sin espacios ni caracteres especiales, por ejemplo "mipaginaweb".

Crear un nuevo proyecto en XAMPP
Nuevo proyecto en XAMPP

Cómo crear una base de datos en XAMPP

XAMPP utiliza el gestor de base de datos "phpMyAdmin". Para acceder al gestor es necesario que el servicio MySQL esté arrancado.

Para entrar en el gestor podemos usar tres caminos: Picar en el botón "Admin" de los servicios de MySQL en el panel de control, abrir la página principal del servidor local XAMPP en el navegador y acceder desde el menú superior, o acceder directamente escribiendo en la barra de dirección del navegador "localhost\phpmyadmin".

Gestor de base de datos en XAMPP, phpMyAdmin
Gestor de base de datos phpMyAdmin

En la pantalla principal nos fijaremos en el tipo de "Cotejamiento de la conexión con el servidor". Esta función sirve para generar correctamente los caracteres de los diferentes idiomas, en especial las tildes, la letra "ñ" o los diferentes símbolos de los países asiáticos.

El más extendido es el "utf8mb4_unicode_ci", pero también podríamos utilizar "utf8mb4_unicode_520_ci" que es una versión superior del anterior.

Para crear una nueva base de datos picamos en la pestaña superior "Bases de datos", y escribimos un nombre único de una sola palabra o separado por guiones bajos.

Al picar en crear se unirá a la lista de las bases de datos que tenemos en la columna de la izquierda y ya la tendríamos creada.

Creación de una nueva base de datos en XAMPP
Nueva base de datos en XAMPP

Para conectar la base de datos con una aplicación (como WordPress, Drupal, Magento, PrestaShop...), o con los archivos que generemos en la carpeta "htdocs", necesitamos tres parámetros:

  • El nombre de la base de datos: La que hemos creado en phpMyAdmin.
  • El usuario de la base de datos: Por defecto es "root".
  • La contraseña: No tiene contraseña por lo que cuando la pida se dejará el campo vacío.

Soluciones a problemas de instalación de XAMPP

Cambiar el puerto 80 en conflicto con otras aplicaciones

Por defecto, XAMPP tiene asignado el puerto de comunicación 80, es un puerto de baja seguridad que utiliza el protocolo "http" y que en la actualidad es usado por programas que no necesitan conectarse a internet para enviar información. XAMPP, al trabajar en modo local no necesita un protocolo "https", y por tanto no necesita encriptar la información.

Pero existe la posibilidad de servidores virtuales montados en el mismo ordenador que XAMPP que necesiten también ese mismo puerto, y entonces entramos en un conflicto que impide que Apache arranque y podamos usarlo con normalidad.

Así que, si queremos utilizar ambos programas, debemos modificar el puerto por el que se comunica Apache. Si el conflicto (menos probable) lo provoca el puerto 443 (SSL), realizaremos el mismo proceso para cambiarlo.

Editar archivo de configuración de Apache en XAMPP

Primero abrimos el panel de control de XAMPP, nos fijamos que el servidor esté parado y picamos en el botón "Config" de la fila de Apache, se desplegará un menú en el que aparecen los nombres de varios archivos. Los que nos interesan son "httpd.conf" para el puerto 80 y "httpd-ssl.conf" para el puerto 443.

Editar archivo "httpd.conf" en el servidor local XAMPP
Editar archivo "httpd.conf"

Picamos sobre el archivo del puerto a modificar y se abrirán el contenido en el Bloc de Notas o en el editor que hayamos configurado en las propiedades de XAMPP.

Para cambiar el puerto 80 buscamos en "httpd.conf" una línea que ponga "Listen 80" y la modificamos por "Listen 8081" o un puerto parecido del que nos acordemos para poder acceder a los sitios webs. Para el puerto de seguridad 443 abrimos "httpd-ssl.config" y sustituimos "Listen 443" por "Listen 444" o uno similar. Guardamos y cerramos.

Cambio del puerto de Apache

Ahora, cuando ejecutemos Xampp, nos aparecerán los puertos cambiados en la columna "Port(s)" y ya no interferirán con otras aplicaciones, permitiendo que funcione correctamente.

Nuevos puertos de Apache asignados al servidor local
Nuevos puertos de Apache asignados

Iniciar localhost con el nuevo puerto

Hay que tener en cuenta que para acceder a los sitios webs que tengamos en Xampp, no basta con poner "localhost" en la barra de navegación, tendremos que poner "localhost:(puerto especificado)", en este caso como marca la imagen anterior sería: localhost:8081

servidor local con un puerto diferente en XAMPP
Acceso a localhost con un puerto diferente de Apache

Desactivar UAC (Control de cuentas de usuario)

El control de cuentas de usuario, conocido como UAC, se encarga de supervisar los cambios que realizan los programas en el disco del sistema. Cuando detecta que se requiere una modificación, aparece un aviso en la pantalla indicando si queremos realizarlo o no.

Aunque no impide el funcionamiento de XAMPP, puede llegar a ser algo molesto tener que estar aceptando cada vez que aparece, y por eso vamos a desactivarlo.

A partir de entonces hay que tener más cuidado de lo que instalamos y descargamos de internet, pero si tienes un buen antivirus no tienes de que preocuparte.

Para acceder al panel de configuración del Control de Cuentas de Usuario, escribimos en el buscador de Windows "UAC".

También puedes acceder desde el menú de "Todas las Aplicaciones" de la barra de Windows y acceder a "Herramientas de Windows > Panel de Control > Seguridad y Mantenimiento > Cambiar la configuración de Control de cuentas de usuario".

Abrir Control de cuentas de usuario en Windows
Abrir Control de cuentas de usuario en Windows

Con el dial que aparece en la ventana de la configuración podemos seleccionar el nivel de control que tendrá el sistema sobre los cambios. Para desactivarlo lo desplazamos hasta la parte inferior, abajo del todo. Aceptamos los cambios y ya no volverá a molestarnos el este aviso.

Desactivar UAC para evitar avisos al iniciar XAMPP
Desactivar UAC

Cambiar los permisos de disco

Puede darse el extraño caso que no podamos escribir o modificar los archivos de XAMPP, tanto de la configuración como los que vayamos creando de nuestros proyectos.

Suele ocurrir si instalamos XAMPP en un disco externo o traído de otro ordenador para reutilizado, no lo hemos formateado correctamente y mantiene los privilegios del antiguo dueño.

Si a pesar de haber asignado permisos de administrador al programa, surgen problemas de escritura y lectura, hay que comprobar los permisos asignados a ese disco duro.

La solución es muy sencilla, pero debemos tener cuidado de no tocar donde no debemos o podemos poner en riesgo la integridad del sistema.

Editar las propiedades del disco o carpeta

Abrimos el explorador y seleccionamos la unidad donde henos realizado la instalación. Con el botón derecho del ratón buscamos la opción "propiedades" y picamos sobre ella.

Propiedades del disco duro

Cuando se abra la nueva ventana, marcamos la pestaña "Seguridad", donde aparecerán todos los "Nombres de grupos o usuarios" y los permisos asignados. Estos hay que borrarlos y añadir los mismos que tenga la unidad donde se encuentra el sistema operativo, normalmente C:/.

Cuando terminemos es aconsejable reiniciar el ordenador para aplicar todos los permisos correctamente. Con estos cambios ya podremos utilizar XAMPP instalado en otra unidad.

Cambiar las propiedades disco para usar un servidor local con XAMPP
Cambio de permisos de disco

Integrar los servicios de XAMPP al arrancar Windows

Esta opción es muy útil si trabajamos mucho con el servidor local y no queremos perder tiempo en arrancar el programa y arrancar los servicios.

De este modo no veremos en ningún momento el panel de control de XAMPP ni nada que indique el uso de la aplicación, pero tendremos el servidor local arrancado y preparado para trabajar con él.

Para integrar Apache y MySQL con el inicio de Windows, debemos arrancar XAMPP y marcar las casillas de la izquierda de cada servicio que nos interesa.

Si tienes bloqueada esta opción es porque no has configurado la compatibilidad del programa para ser utilizado como administrador, como ya he explicado un poco más arriba.

Activar los servicios de XAMPP en Windows
Activar los servicios de XAMPP en Windows

Para poder activar estas casillas es necesario que los servicios no estén inicialmente arrancados. Una vez marcados cerramos XAMPP y reiniciamos el ordenador.

Ahora, cuando entres en el navegador y escribas "localhost", el servidor local estará en completo funcionamiento.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

3 Comentarios

  1. Estiti

    Hace unos dias tuve que instalar un servidor web en mi ordenador para trabajar, y, gracias a este articulo lo he instalado sin ningun problema, muchas gracias por el post

    Responder
  2. servidores

    Pensaba que sería más difícil, pero con esta increíble guía me he quedado impactada, solo hay que seguir los pasos al pie de la letra y lo consigues de inmediato!

    Responder
    • Juan

      Hace unos años era más complicado, había que instalar cada servicio por separado de forma manual, comprobar puertos y conseguir que funcionara todo a la vez. Hoy existen estas aplicaciones que lo automatizan todo y no tenemos que preocuparnos de casi nada.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Mi canal de Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Anuncio - WordPress Gestionado de SiteGround - Potente pero simple de usar. Haz clic para aprender más. Descuento directo DIVI -  10 por ciento