Proyecto (Parte 1) - Sistema de ventas para Local - Node - ExpressJs - React - MongoDB (MERN)

[jfdesousa7]

En el día de hoy voy a comenzar un proyecto para la venta de productos (comida – Artículos) para un pequeño local de venta (Bodega)

Las tecnologías a usar serán para el backend (API) Node.js y el framework Express.js
Para el administrador de contenido (React)
Para el FrontEnd usare igual manera (React)
La base de datos será en este caso MongoDB

Este conjunto de tecnologías se conoce como el Stack MERN

Comenzare en esta primera parte con la configuración de la API (Backend) que será consumida tanto por el administrador como el frontend.

Node(API) Configuracion del servidor con Express.js

Vamos a crear una carpeta en el escritorio llamado store-app

y dentro crearemos 3 carpetas

• api
• admin
• frontend

Nos movemos a la primera carpeta API y crearemos un nuevo proyecto de node con el comando:

npm init --yes

Seguidamente procedemos a instalar los módulos de producción necesarios para nuestra API

npm i express morgan cors mongoose

Procedemos a crear los modulos de Desarrollo

npm i -D @babel/core @babel/cli @babel/node @babel/preset-env dotenv nodemon

Procedemos a crear un archivo de configuracion de Babel llamado .babelrc

{
"presets" : [
"@babel/env"
]
}

Modificamos el package.json

"scripts": {
    "dev": "nodemon src/index.js --exec babel-node",
    "build": "babel src --out-dir build",
    "start": "node build/index.js"
  },

Crearemos una carpeta llamada src/

Vamos a crear las carpetas (estructura) de la API:

• models/
• controllers/
• routes/

Crearemos un archivo index.js, app.js y database.js

app.js

import express from 'express'
import morgan from 'morgan'
import cors from 'cors'
const app = express()
app.set('PORT', process.env.PORT || 3001)
// Middlewares
app.use(cors())
app.use(morgan('dev'))
// Routes
app.get('/', (req, res) => {
    res.send('Welcome')
})
export default app

index.js

import app from './app'
import './database'
app.listen(app.get('PORT'), () => {
    console.log('Server on port: ',app.get('PORT'))
})

database.js

import mongoose from "mongoose";
mongoose
  .connect("mongodb://localhost/bd_store_app", {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then((db) => console.log("Database is connected..."))
  .catch((e) => console.log(e));

Probamos que nuestra configuracion no tenga errores ejecutando en la terminal integrada de visual studio code npm run dev

Con eso listo tenemos la configuración básica lista

en el siguiente parte continuaremos con el proyecto.

Si tienes alguna duda o sugerencia no dudes en consultarme en los comentarios abajo.

¡Feliz día y Felicidad!

¡Ah! no olvides de visitar mi página web https://tupaginaonline.net