Español

Hoy empezare a crear una tienda virtual con el stack MERN (MongoDB – ExpressJS – ReactJS - NodeJS) constara de varias partes por lo que hoy comenzare con el setup básico de nuestra tienda virtual.

Crearemos una carpeta con el nombre de shopping-cart

Node(API) Configuracion del servidor con Express.js

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 || 4001)
// 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 la tienda virtual.

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

English

Today I will start creating a virtual store with the MERN stack (MongoDB - ExpressJS - ReactJS - NodeJS) it will consist of several parts so today I will start with the basic setup of our virtual store.

We will create a folder with the name of shopping-cart

Node (API) Server configuration with Express.js

and inside we will create 3 folders

• api
• admin
• frontend

We move to the first API folder and create a new node project with the command:

  npm init --yes  

Then we proceed to install the necessary production modules for our API

  npm i express morgan cors mongoose  

We proceed to create the Development modules

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

We proceed to create a Babel configuration file called .babelrc

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

We modify the package.json

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

We will create a folder called src /

Let's create the folders (structure) of the API:

• models /
• controllers /
• routes /

We will create a index.js , app.js and database.js file

app.js

  import express from 'express'
import morgan from 'morgan'
import cors from 'cors'
const app = express ()
app.set ('PORT', process.env.PORT || 4001)
// 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));  

We test that our configuration does not have errors by executing in the integrated terminal of visual studio code npm run dev

With that done we have the basic configuration ready

in the next part we will continue with the virtual store.

If you have any questions or suggestions, do not hesitate to ask me in the comments below.

Happy day and happiness!

Ah! do not forget to visit my website https://tupaginaonline.net