Skip to content

Este es un proyecto de una aplicación web que se asemeja a la plataforma Codepen, donde los usuarios pueden crear pequeños proyectos web utilizando HTML, CSS y JavaScript

Notifications You must be signed in to change notification settings

ImOnlyYisus/Coderine

Repository files navigation

Deploy frontend to server


Logo

Indice

Idea principal

La idea principal es hacer una aplicación parecida a Codepen, obviamente no tan completa como esta, pero si con las funcionalidades básicas.

En el caso de que no conozcas Codepen, es una aplicación web donde puedes crear pequeños proyectos web, con HTML, CSS y JavaScript, y puedes ver el resultado en tiempo real, también puedes compartir tus proyectos con otros usuarios, guardarlos, etc.

Mi idea es hacer una aplicación parecida, y poco a poco ir añadiendo funcionalidades, como son el poder incluir dependecias, diferentes frameworks, etc.

Explicación del proyecto

Frontend

📋Documentación de la parte de frontend

Backend

📋Documentación de la parte de backend

Como ejecutar el proyecto

Hay varias formas de utilizar el proyecto, la primera es ejecutarlo de forma local, y la segunda es ejecutarlo con Docker.

Nota: Con docker la aplicación no va lo más fluida que debería, ya que no he tenido tiempo de optimizarla, pero si que funciona. REQUSITOS: Tener instalado docker y docker-compose

🚫🐋Sin docker

Para ejecutar la aplicación de forma local, tendremos que tener unos requisitos previos, que son los siguientes:

  • ✅ Tener instalado Node.js
  • ✅ Tener instalado MySQL
  • ✅ Tener PHP 8.1 o superior
  • ✅ Tener instalado Composer

Una vez tengamos todos los requisitos, tendremos que seguir los siguientes pasos:

  1. Clonar el repositorio

     #Clonar el repositorio con la rama main
     git clone --branch main [URL]
  2. Instalar las dependencias

     #Instalar las dependencias del backend
     cd coderine-backend
     composer install
     #Instalar las dependencias del frontend
     cd coderine-frontend
     npm install
  3. Configurar el archivo .env

    • En 📁 ./coderine-backend
      #Copiar el archivo .env.example y renombrarlo a .env
      cp .env.example .env
      #Configurar el archivo .env
      #Cambiar variables de entorno
      ...
      DB_HOST= [Tu ip de MySQL] si estas en local puedes dejarlo como localhost
      DB_PORT=3306
      DB_DATABASE=coderine #Tendrás que crear la base de datos en MySQL vacía con ese nombre
      DB_USERNAME= [Tu usuario de MySQL]
      DB_PASSWORD= [Tu contraseña de MySQL]
      ...
    • En 📁 ./coderine-frontend
      #Copiar el archivo .env.example y renombrarlo a .env
      cp .env.example .env
      #Configurar el archivo .env
      #Cambiar variables de entorno
      #Tu ip puede ser localhost si estas en local, y el puerto es el que tengas configurado en el backend por defecto laravel utiliza el 8000
      
      VITE_BACKEND_CSRF= [IP:PORT]/sanctum/csrf-cookie/ 
      VITE_BACKEND_URL= [IP:PORT]
      
      #Sustituir IP por tu ip y PORT por el puerto que tengas configurado en el backend
  4. Migraciones de laravel Dentro de la carpeta 📁 ./coderine-backend ejecutar el siguiente comando:

    php artisan migrate
    php artisan db:seed

    El ultimo comando es para crear un usuario de prueba, con el que poder acceder a la aplicación, los datos de este usuario son:

  5. Ejecutar el proyecto

    • En 📁 ./coderine-backend
      php artisan serve
    • En 📁 ./coderine-frontend
      npm run dev

    Nota: Si quieres ejecutar el proyecto en modo producción, tendrás que ejecutar el comando npm run build y luego npm run serve

    OPCIONAL en caso de error al ejecutar el proyecto de laravel ejecuta este comando para regenerar las keys php artisan key:generate

🐋Con docker

Para ejecutar la aplicación con docker, tendremos que tener unos requisitos previos, que son los siguientes:

Una vez tengamos todos los requisitos, tendremos que seguir los siguientes pasos:

  1. Clonar el repositorio
     #Clonar el repositorio con la rama main
     git clone --branch main [URL]
  2. Configurar el archivo .env
    • En 📁 ./coderine-backend
      cp .env.example .env
    • En 📁 ./coderine-frontend
      cp .env.example .env
  3. Levantar los contenedores
    docker-compose up -d

    Nota: Este comando puede tardar un poco, ya que tiene que descargar las imágenes de docker, y luego instalar las dependencias de laravel y de node.js

📝 Notas

Para acceder a la aplicación, tendremos que acceder a la siguiente url:

About

Este es un proyecto de una aplicación web que se asemeja a la plataforma Codepen, donde los usuarios pueden crear pequeños proyectos web utilizando HTML, CSS y JavaScript

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published