Recientemente aprendí a implementar mi proyecto MERN Full-stack y no veo la hora de ayudarte a implementar el tuyo también.

Al implementar un proyecto MERN de pila completa, el backend y el frontend deben implementarse por separado. Veamos primero cómo implementar el backend:

Aquí está la configuración del repositorio que estoy implementando en Render:

Tengo una carpeta de cliente para la interfaz y una carpeta de servidor para el servidor.

Lo primero y más importante: Regístrese en Render para obtener una cuenta gratuita. Recomiendo registrarse a través de su cuenta de GitHub para que pueda acceder a sus carpetas más rápido.

back-end:

Para back-end:

1. Haga clic en nuevo y seleccione Servicio web

3. Identifique un nombre único para su servicio web.

4. Podemos dejar la 'Región' en paz

5. Deje 'Sucursal' como 'principal'.

6. Para 'Directorio raíz', especifiqué 'servidor' ya que toda mi información de back-end se encuentra en esta carpeta.

7. Deje Runtime a Node ya que eso es lo que usamos para nuestro backend.

8. Comando de compilación, puede dejarlo como 'hilo'.

9. El comando Inicio, puede poner 'npm start'.

10. Luego, asegúrese de elegir libre para el Tipo de instancia .

11. Luego, haga clic en el botón 'avanzado':

Después de hacer clic en el botón, aparecerán más opciones en la parte inferior de la página.

12. Haga clic en 'Agregar variable de entorno':

Agregue una variable de entorno llamada 'MY_MONGO_URL' y pegue su URL de conexión MongoDB en el valor.

Este paso le dice a Render cómo conectarse a su base de datos MongoDB.

13. Luego haga clic en 'Crear servicio web'.

Luego, debería aparecer un registro de la consola que le indique que está comenzando a clonarse desde su archivo de GitHub.

Después de un par de ejecuciones, el registro debe indicar que está "conectado a db && escuchando en el puerto ###".

Probando si el Backend funciona:

La forma de probar si sabe si su backend está implementado es hacer clic en el hipervínculo que se proporciona en la esquina superior derecha. Mostrará un error similar a este:

Si va al hipervínculo al final, agregue 'api/(el punto final de su ruta)' a la cadena de consulta, entonces debería ver la información de su base de datos en formato JSON.

Et voila, nuestro backend ha sido desplegado. Ahora, para terminar todo, implementemos nuestra interfaz.

Interfaz:

Para la interfaz:

1. Haga clic en 'Nuevo' y seleccione 'Sitio estático' en el menú desplegable.

4. Identifique un nombre único para él

5. Deje Branch como 'principal'.

6. Para 'Directorio raíz', escriba 'cliente'.

7. Comando de construcción - construcción de hilo

8. Para 'Publicar directorio', escriba 'compilar'.

9. Haga clic en 'Crear sitio estático' y debería aparecer una nueva página con el registro de la consola. En el lado izquierdo, busque 'Redirecciones/Reescrituras'.

10. Luego, crea dos reglas.

La primera regla que se incluye es reescribir '/api/*' en su código para su nuevo backend implementado.

La segunda regla es reescribir '/*' en el archivo 'index.html'.

Luego, debería intentar implementarse nuevamente y el mensaje debería indicar "cargando compilación ..." y "su sitio está activo".

Por favor, hágamelo saber si tiene alguna pregunta o dificultad. ¿De qué otras formas puede implementar la aplicación MERN de pila completa?

No dude en ponerse en contacto conmigo en LinkedIn:https://www.linkedin.com/in/mai-vang-software-engineer/