La necesidad es tener un servidor aparte por todas las dependencias que se necesitan o casos donde hay conflicto con lo instalado localmente, el servidor puede ser un vps, homestead, docker, etc. y poder editarlo conectándose remotamente y ver los cambios reflejados como si fuera local
La idea general de esta solución es tener habilitado ftp en el servidor, conectarse desde la ide y con algún plugin sincronizarlo automáticamente.
Pasos:
Crear una nueva vm con homestead
Con la VM creada creamos la aplicación react en la ruta en vm, antes borramos la carpeta public para evitar conflictos
vagrant ssh rm -r dev-admin/public/ npx create-react-app dev-admin
npm run build
Accediendo se obtiene un error
Lo que muestra es lo que aparece en la carpeta public, que usa react para el desarrollo
GET http://vr-dev-admin.test/%PUBLIC_URL%/favicon.ico 400 (Bad Request)
Para arrancar el proyecto ejecutamos el comando npm start, pero lo correremos en background para seguir trabajando
(npm run start&)
Esperar la salida
Compiled successfully! You can now view dev-admin in the browser. Local: http://localhost:3000 On Your Network: http://10.0.2.15:3000 Note that the development build is not optimized. To create a production build, use npm run build. webpack compiled successfully
Accediendo al sitio por el puerto 3000
Ahora teniendo la máquina virtual como el servidor remoto, y poder editarlo de forma remota y tener el hot reload, preparamos la ide con la conexión FTP, este caso es con vagrant y WebStorm.
Abrimos un nuevo proyecto en una ruta de una carpeta vacía
Tools>Deployment>Browse remote host, ingresar un nombre
Se agrega una nueva coneción SSH ( contraseña por defecto “secret”), tambien se conecte por OpenSSH
Luego llenar los demas datos de conexion
Se descarga los archivos
Puntos adicionales:
Comando para buscar el proceso node y eliminarlo
ps -ef | grep node kill -9 6615 && kill -9 6622
En caso usar la conexión https, se debe habilitar el puerto 443, añadiendo WDS_SOCKET_PORT=443 en el archivo .env en la raiz del proyecto
Contenido
Referencias
Reac Doc
https://reactjs.org/docs/create-a-new-react-app.html
NPM en background
https://medium.com/idomongodb/how-to-npm-run-start-at-the-background-%EF%B8%8F-64ddda7c1f1
Conexión Vagrant FTP
https://superuser.com/questions/1011928/how-can-i-connect-filezilla-to-a-vagrant-vm
How Retload
https://stackoverflow.com/questions/43246280/how-does-hot-reloading-work
Sobre WebStorm Remote
https://www.jetbrains.com/help/webstorm/editing-individual-files-on-remote-hosts.html
https://intellij-support.jetbrains.com/hc/en-us/community/posts/207658105-Auto-sync-directory-with-remote-ftp-dir-if-file-in-directory-changed
Tunneling ngrok
https://github.com/facebook/create-react-app/issues/11850
