Sådan distribueres en MERN-applikation til Heroku ved hjælp af MongoDB Atlas

Introduktion til MERN

I denne artikel bygger vi og implementerer en applikation, der er bygget med MERN-stakken til Heroku.

MERN, som står for MongoDB, Express, React og Node.js, er en populær tech stack, der bruges til at opbygge webapplikationer. Det involverer frontend-arbejde (med React), backend-arbejde (med Express og NodeJS) og en database (med MongoDB).

Heroku er derimod en platform som en tjeneste (PaaS), der gør det muligt for udviklere at opbygge, køre og betjene applikationer helt i skyen.

Til databasen bruger vi MongoDB Atlas, som er en global cloud-databasetjeneste til moderne applikationer. Dette er mere sikkert end MongoDB installeret lokalt på vores server, og det giver os også plads til flere ressourcer på vores servere.

Til frontend bygger vi en simpel React-app, der fremsætter POST-anmodninger til en API for at tilføje en bruger, og kan også foretage GET-anmodninger for at få alle brugere.

Du kan springe til ethvert trin med indholdsfortegnelsen, der er angivet nedenfor.

Indholdsfortegnelse

  • Introduktion til MERN
  • Lad os begynde at bygge
  • Opbygning af React-appen
  • Oprettelse af backend
  • Tilslut MongoDB Atlas Database
  • Opkald til API'er på frontend
  • Implementering til Heroku
  • Opret en Heroku-app
  • Konfigurer package.json
  • Pak ind

Lad os begynde at bygge

Opbygning af React-appen

Bemærk: Før vi begynder med vores projekt, nodeskal det være installeret på din computer. nodegiver os også npm, som bruges til installation af pakker.

Installere create-react-app

create-react-app bruges til at oprette en starter React-app.

Hvis du ikke har create-react-appinstalleret, skal du skrive følgende i kommandolinjen:

npm i create-react-app -g

Den -gflaget installerer pakken globalt.

Opret projektmappen

create-react-app my-project cd my-project

Ovenstående opretter en mappe 'mit-projekt' og installerer afhængigheder, der vil blive brugt i React-startappen. Når installationen er færdig, skifter den anden kommando til projektmappen.

Start appen, og foretag de nødvendige ændringer

npm start

Kommandoen ovenfor starter React-applikationen, som giver dig en URL, hvor du får vist projektet. Du kan derefter foretage nødvendige redigeringer som at ændre billeder eller tekst.

Installer aksios

npm i axios --save

axioser et JavaScript-bibliotek, der bruges til at gøre HTTP-anmodninger lettere. Det bruges til at sende anmodninger fra frontend (React) til API'erne leveret af backend.

Oprettelse af backend

Backend'en administrerer API'erne, håndterer anmodninger og opretter også forbindelse til databasen.

Installer backend-pakkerne

npm i express cors mongoose body-parser --save
  1. express: "Express er en minimal og fleksibel ramme til Node.js-webapplikation, der giver et robust sæt funktioner til webapplikationer" - Express Documentation
  2. cors: "CORS er en node.js-pakke til levering af en Connect / Express middleware, der kan bruges til at aktivere CORS med forskellige muligheder" - cors Documentation
  3. mongoose: "Mongoose er et MongoDB-objektmodelleringsværktøj designet til at arbejde i et asynkront miljø. Mongoose understøtter både løfter og tilbagekald" - Mongoose Documentation
  4. body-parser: "Node.js body parsing middleware." - body-parser-dokumentation

Opret backend-mappen

mkdir backend cd backend

Konfigurer backend

Opret et indgangspunkt server.js

Opret først en server.jsfil, der vil være indgangsstedet for backend.

touch server.js

I server.jsskrive følgende:

const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors'); const path = require('path') const app = express(); require('./database'); ----- app.use(bodyParser.json()); app.use(cors()); ----- // API const users = require('/api/users'); app.use('/api/users', users); ----- app.use(express.static(path.join(__dirname, '../build'))) app.get('*', (req, res) => { res.sendFile(path.join(__dirname, '../build')) }) ----- const port = process.env.PORT || 5000; app.listen(port, () => { console.log(`Server started on port ${port}`); });

express.staticleverer statiske filer, der er dem, der er bygget, når de npm run buildkøres på et React-projekt. Husk, den indbyggede fil er i buildmappen.

Fra vores konfiguration sendes enhver anmodning sendt /api/userstil usersAPI, som vi er ved at konfigurere.

Konfigurer usersAPI
mkdir api touch api/users.js

I api/users.jstilføj følgende:

const express = require('express'); const router = express.Router() ----- const User = require('../models/User'); ----- router.get('/', (req, res) => { User.find() .then(users => res.json(users)) .catch(err => console.log(err)) }) ----- router.post('/', (req, res) => { const { name, email } = req.body; const newUser = new User({ name: name, email: email }) newUser.save() .then(() => res.json({ message: "Created account successfully" })) .catch(err => res.status(400).json({ "error": err, "message": "Error creating account" })) }) module.exports = router

I koden ovenfor opretter vi en GET- og POST-anmodningshåndterer, der henter alle brugere og stiller brugere. Hentning og tilføjelse af en bruger til databasen understøttes af den Usermodel, vi opretter.

Opret Usermodel
mkdir models touch models/user.js

I models/user.jstilføj følgende:

const mongoose = require('mongoose'); const Schema = mongoose.Schema; ----- const userSchema = new Schema({ name: { type: String, required: true }, email: { type: String, required: true } }) module.exports = mongoose.model("User", userSchema, "users")

I koden ovenfor oprettes et skema for brugeren, der indeholder brugerens felter. I slutningen af ​​filen eksporteres modellen ("Bruger") med skemaet og samlingen ("brugere").

Tilslut MongoDB Atlas Database

Ifølge dokumenterne er "MongoDB Atlas den globale cloud-databasetjeneste til moderne applikationer."

Først skal vi registrere på Mongo cloud. Gå gennem denne dokumentation for at oprette en Atlas-konto og oprette din klynge.

En ting, der er værd at bemærke, er hvidlisting af din forbindelses IP-adresse . Hvis du ignorerer dette trin, har du ikke adgang til klyngen, så vær opmærksom på dette trin.

Klyngen er en lille server, der administrerer vores samlinger (svarer til tabeller i SQL-databaser). For at forbinde din backend til klyngen skal du oprette en fil database.js, som du kan se er påkrævet i server.js. Indtast derefter følgende:

const mongoose = require('mongoose'); const connection = "mongodb+srv://username:@/?retryWrites=true&w=majority"; mongoose.connect(connection,{ useNewUrlParser: true, useUnifiedTopology: true, useFindAndModify: false}) .then(() => console.log("Database Connected Successfully")) .catch(err => console.log(err));

I connectionvariablen skal du indtaste din username(for MongoDB-sky), din password(klyngeadgangskode), din cluster(adresse til din klynge) og database(navnet på din database). Alle disse kan let opdages, hvis du fulgte dokumentationen.

Opkald til API'er på frontend

Alle API'er vil være tilgængelige localhost:5000lokalt, ligesom vi konfigurerede i server.js. Når distribueres til Heroku, bruger serveren den port, der leveres af serveren ( process.env.PORT).

For at gøre tingene lettere tillader React os at specificere en proxy, som anmodningerne sendes til.

Åbn package.jsonog lige før den sidste krøllede bøjle, tilføj følgende:

"proxy": "//localhost:5000"

På denne måde kan vi sende anmodninger direkte til api/users. Og når vores websted implementeres og bygges, bruges standardporten til vores applikation med den samme API.

Open App.js for React and add the following:

import React, {useState, useEffect} from 'react' import axios from 'axios'; ----- const App = function () { const [users, setUsers] = useState(null); const [username, setUsername] = useState(""); const [email, setEmail] = useState(""); useEffect(() => { axios .get("/api/users") .then((users) => setUsers(users)) .catch((err) => console.log(err)); }, []); function submitForm() { if (username === "") { alert("Please fill the username field"); return; } if (email === "") { alert("Please fill the email field"); return; } axios .post("/api/users", { username: username, email: email, }) .then(function () { alert("Account created successfully"); window.location.reload(); }) .catch(function () { alert("Could not creat account. Please try again"); }); } return (  
My Project
 {users === null ? ( 
Loading...
 ) : users.length === 0 ? ( 
No user available
 ) : (  
Available Users

    
    
      {users.map((user, index) => ( 
     
  1.  Name: {user.name} - Email: {user.email} 
    2.  ))} 
    
  )}   setUsername(e.target.value)} type="text" placeholder="Enter your username" />  setEmail(e.target.value)} type="text" placeholder="Enter your email address" />    ); }; export default App

The useState and useEffect hooks are used to handle state and sideEffects. What is basically happening is that the first state of users is null and 'Loading...' is showed in the browser.

In useEffect, [] is used to specify that at the componentDidMount stage (when the component is mounted), make an Axios request to the API which is running on localhost:5000. If it gets the result and there is no user, 'No user available' is displayed. Otherwise a numbered list of the users is displayed.

If you want to learn more about useState and useEffect, check out this article - What the heck is React Hooks?

With the form available, a POST request can be made to post a new user. The state of the inputs are controlled and sent to the API at localhost:5000 on submission. Afterwards, the page is refreshed and the new user is displayed.

Deploying to Heroku

To deploy your application to Heroku, you must have a Heroku account.

Go to their page to create an account. Then go through their documention on how to create a Heroku app. Also check out the documentation on Heroku CLI.

Create a Heroku App

First, login to Heroku:

heroku login

This will redirect you to a URL in the browser where you can log in. Once you're finished you can continue in the terminal.

In the same React project directory, run the following:

heroku create

This will create a Heroku application and also give you the URL to access the application.

Configure package.json

Heroku uses your package.json file to know which scripts to run and which dependencies to install for your project to run successfully.

In your package.json file, add the following:

{ ... "scripts": { ... "start": "node backend/server.js", "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install npm && run build" }, ... "engines": { "node": "10.16.0" } }

Heroku runs a post build, which as you can see installs your dependencies and runs a build of your React project. Then it starts your project with the start script which basically starts your server. After that, your project should work fine.

engines specifies the versions of engines like node and npm to install.

Push to Heroku

git push heroku master

This pushes your code to Heroku. Remember to include unnecessary files in .gitignore.

After few seconds your site will be ready. If there are any errors, you can check your terminal or go to your dashboard in the browser to view the build logs.

Nu kan du se et eksempel på dit websted på den URL, Heroku sendte, da du løb heroku create.

Det er alt der er ved det. Glad for at du læste så langt.

Pak ind

Der er selvfølgelig mere til MERN-stack-applikationer.

Denne artikel gik ikke så dybt som godkendelser, login, sessioner og alt det der. Det dækkede bare, hvordan man implementerer MERN-stack-applikationer til Heroku og arbejder med MongoDB Atlas.

Du kan finde andre artikler som denne på min blog - dillionmegida.com

Tak for læsningen.