o.html

<!--Section: Docs content-->
<section>
  <section id="intro">
    <!-- Main title -->
    <h2 class="h1 fw-bold"><?= $data_var['main_title']; ?></h2>

    <!-- Seo title -->
    <h1 class="h6"><?= $data_var['seo_title']; ?></h1>

    <!-- Description -->
    <p>
      After reading this tutorial you will know how to create full-stack apps using MEVN stack.
    </p>
  </section>

  <hr class="my-5" />

  <section id="whatis-mevn">
    <!-- Section title -->
    <h2 class="mb-4">What does MEVN stand for?</h2>

    <div class="row">
      <div class="col-md-12">
        <p>
          <strong>MEVN</strong> is an acronym for web development tech stack consisting of these
          four technologies:
        </p>
        <ul>
          <li><strong>M</strong>ongoDB</li>
          <li><strong>E</strong>xpress.js</li>
          <li><strong>V</strong>ue</li>
          <li><strong>N</strong>ode.js</li>
        </ul>

        <p>Let's quickly recall what are these.</p>
      </div>
    </div>
  </section>

  <section id="mevn-recap">
    <!-- Section title -->
    <h2 class="mb-4">MEVN recap</h2>

    <div class="row">
      <div class="col-md-12">
        <p>Here's a quick recap what are the main technologies used in the MEVN stack:</p>
        <ul>
          <li>
            <strong>MongoDB</strong> is a document-oriented NoSQL database mevnt to store
            non-tabular data. If you want to learn more about it check out a
            <a href="/docs/standard/cli/getting-started/mongo/" target="_blank">separate tutorial</a
            >.
          </li>
          <li>
            <strong>Express.js</strong> is a web framework built for Node.js that allows you to
            create web servers in a very convenient way. Learn more about it
            <a href="https://mdbootstrap.com/docs/standard/cli/getting-started/express/">here</a>.
          </li>
          <li>
            <strong>Vue</strong> is a JavaScript framework that allows you to create very advanced
            single-page apps. You can check out how to create an Vue project in
            <a href="/docs/standard/cli/getting-started/vue/">another tutorial</a>.
          </li>
          <li>
            <strong>Node.js</strong> is a multi-platform JavaScript runtime built on V8 engine. It's
            used as a backend side of web apps. Read more about it
            <a href="https://mdbgo.com/docs/tutorials/node/">here</a>.
          </li>
        </ul>

        <p>
          We won't dive deep into details about how to get started with these technologies using MDB
          GO. Go ahead and check the linked tutorials and once you learn a few things get back here.
        </p>
        <p>If you have enough knowledge to get started, let's do this.</p>
      </div>
    </div>
  </section>

  <section id="building-mevn-app">
    <!-- Section title -->
    <h2 class="mb-4">Building the MEVN app</h2>

    <div class="row">
      <div class="col-md-12">
        <p>
          Our example app will be a TODO list. It's a very popular use-case so let's simply get
          things done one at a time. We will go through the following steps:
        </p>
        <ul>
          <li>Create a MongoDB database named <code>todo_app</code></li>
          <li>Create Node.js API with Express and Mongoose</li>
          <li>Connect our frontend app to the Node.js API.</li>
        </ul>

        <p>Let's go!</p>

        <h3>Creating MongoDB database</h3>
        <p>In order to create a new database you need to run the following command:</p>
        <mdbsnippet>
          <code data-lang="shell" data-name="Shell">
            $ mdb database init -db mongodb
          </code>
        </mdbsnippet>
        <p>
          Now you need to provide your user data and then the database details. Please provide the
          values of your choice. For example:
        </p>
        <pre><code>? Enter username tony
? Enter password Stark_12
? Repeat password Stark_12
? Enter database name todo_app
? Enter description Database for the TODO app
</code></pre>
        <p class="note note-warning">
          <strong>Note:</strong> the password must contain <i>at least</i> one uppercase letter, one
          lowercase letter, one number, one special symbol and have minimum length of 8.
        </p>

        <p>Hit <kbd>Enter</kbd> and it's done.</p>

        <p>
          Please notice that in the command output the username and database name slightly differs
          from what you provided earlier. Don't worry - it's OK. A few random characters have been
          added to these values to randomize them and improve security of your database credentials.
        </p>
        <p class="note note-danger">
          <strong>Important:</strong> Do not close your terminal window until you save your
          credentials somewhere. This is the only time we will show you your database password. If
          you won't save it you'll loose it.
        </p>

        <p>
          That's pretty much it. You can now see how to connect with this database from the Node.js
          API.
        </p>

        <p class="note note-warning">
          <strong>Note:</strong> in MongoDB you don't need to create collections before they are
          used. MongoDB will create a collection when it's first time accessed.
        </p>

        <h3>Creating Node.js API with Express and Mongoose</h3>
        <p>
          In case you don't know, Mongoose is a MongoDB object modeling tool. It helps managing
          MongoDB access and models. You can initialize a MDB GO starter that already has configured
          Mongoose. Simply run the following command:
        </p>
        <mdbsnippet>
          <code data-lang="shell" data-name="Shell">
            $ mdb backend init
          </code>
        </mdbsnippet>
        <p>and choose <code>Express.js + MongoDB API starter</code> from the list that shows up.</p>
        <p>
          After initialization just go to the newly created project directory and open the
          <code>.env</code> file. After that edit the <code>DB_CONNECTION_STRING</code> value. You
          should paste the connection string that's been shown to you in the previous step. In my
          case the updated value looks like this:
        </p>
        <pre><code>DB_CONNECTION_STRING=mongodb://tonye9c88223:Stark_12@mongo.db.mdbgo.com:8604/todo_appbd2f70e0</code></pre>
        <p>Save the file and close it.</p>
        <p>
          The starter project is ready to use. You don't have to change anything to run the example
          app for the sake of this tutorial. Simply publish it using the following command:
        </p>
        <mdbsnippet>
          <code data-lang="shell" data-name="Shell">
            $ mdb publish -p node12
          </code>
        </mdbsnippet>

        <p>
          After your files get uploaded you can access your app under the address shown in the
          output.
        </p>

        <p class="note note-danger">
          <strong>Note:</strong> You may want to check
          <a href="https://mdbgo.com/docs/tutorials/node/">the tutorial</a> where we explain in
          detail what can go wrong here and how to deal with it.
        </p>

        <p class="note note-warning">
          <strong>Note:</strong> Since we need to install dependencies and run your app, it may take
          a few moments until it will be available under the provided URL.
        </p>

        <p>
          When you open the app URL you will see the default view on the <code>/</code> endpoint but
          when you'll visit <code>/tasks</code> you will see an empty array indicating that the
          <code>tasks</code> collection has been created and is empty. There are also other
          endpoints defined like this:
        </p>
        <ul>
          <li><code>GET /tasks/:id</code></li>
          <li><code>POST /tasks</code></li>
          <li><code>PUT /tasks/:id</code></li>
          <li><code>DELETE /tasks/:id</code></li>
        </ul>

        <p>
          These are self-explanatory but if you don't know how to operate on that go and check the
          <a href="https://mdbgo.com/docs/tutorials/node/">tutorial</a> where it is explained.
        </p>

        <p>
          Alright, only one step left for the fully-working TODO app - Vue frontend. Let's create
          it.
        </p>

        <h3>Connecting to the API via Vue app</h3>
        <p>
          We won't show how to create the whole Vue app here. Instead, you'll learn how to connect
          to the API <strong>assuming you already have a working app</strong>.
        </p>

        <p>
          It's actually pretty easy. All we need to use if JavaScript Fetch API. Let's jump right
          into it.
        </p>
        <p>
          First, let's quickly have a look where we are going to place our code. We are assuming you
          have the <code>App.vue</code> file where you want to put API communication logic. It
          should look somewhat like this:
        </p>
        <!-- prettier-ignore -->
        <mdbsnippet>
            <code data-lang="javascript" data-name="App.vue">
                export default {
                  name: "App",
                  data() {
                    return {
                      tasks: [],
                    };
                  },
                  mounted() {
                    // ...
                  },
                };
            </code>
          </mdbsnippet>

        <p>
          It's also wise to add <code>apiUrl</code> constant in our component so that we don't have
          to repeat it every time:
        </p>
        <!-- prettier-ignore -->
        <mdbsnippet>
              <code data-lang="javascript" data-name="App.vue">
                  const apiUrl = 'http://express-mongoose-starter.mdbgo.io'; // in your case it will be different
              </code>
          </mdbsnippet>

        <p>
          We will be adding our methods in the <code>methods</code> field. Add it right after the
          <code>mounted()</code> method:
        </p>
        <!-- prettier-ignore -->
        <mdbsnippet>
              <code data-lang="javascript" data-name="App.vue">
                  mounted() {
                    // ...
                  },
                  methods: {

                  }
              </code>
          </mdbsnippet>

        <p>
          In order to read data from the server we need to make a <code>GET /tasks</code> request.
          You can do it like this:
        </p>
        <!-- prettier-ignore -->
        <mdbsnippet>
              <code data-lang="javascript" data-name="App.vue">
                  methods: {
                      getTasks() {
                          return fetch(`${this.apiUrl}/tasks`)
                              .then(res => res.json());
                      }
                  }
              </code>
          </mdbsnippet>

        <p>
          It's a new method that performs the GET request and returns the result. We will take care
          of this result later. In a meantime let's add the remaining three methods:
        </p>

        <!-- prettier-ignore -->
        <mdbsnippet>
              <code data-lang="javascript" data-name="App.vue">
                  methods: {
                      // ...
                      createTask(name, desc) {
                        const data = { name, desc };
                        return fetch(`${this.apiUrl}/tasks`, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify(data);
                        })
                            .then((res) => res.json());
                      }

                      updateTask(id, name, desc) {
                        const data = { name, desc };
                        return fetch(`${this.apiUrl}/tasks/${id}`, {
                            method: 'PUT',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify(data);
                        })
                            .then((res) => res.json());
                      }

                      deleteTask(id) {
                        return fetch(`${this.apiUrl}/tasks/${id}`, { method: 'DELETE' })
                            .then((res) => res.json());
                      }
                  }
              </code>
          </mdbsnippet>

        <p>Alright, let's find out how to use this.</p>

        <h4>Calling the API from the Vue component</h4>

        <p>
          In order to use our methods we can call them in the <code>mounted()</code> hook for
          example like this:
        </p>
        <!-- prettier-ignore -->
        <mdbsnippet>
              <code data-lang="javascript" data-name="App.vue">
                  mounted() {
                    this.getTasks()
                        .then((tasks) => {
                            this.tasks = tasks
                        });
                  }
              </code>
          </mdbsnippet>

        <p>It will make an API request and assign the result to the <code>tasks</code> field.</p>

        <p>Making POST, PUT and DELETE requests is just as easy:</p>

        <!-- prettier-ignore -->
        <mdbsnippet>
              <code data-lang="javascript" data-name="App.vue">
                  mounted() {
                    // Create a task
                    this.createTask('Wash the dishes', 'will take a while')
                      .then((task) => {
                        this.tasks.push(newTask);
                      });

                    // Update a task
                    const currentTaskId = 1;
                    this.updateTask(currentTaskId, 'Wash the dishes', 'will take 30 mins')
                        .then((updatedTask) => {
                            const oldTask = this.tasks.find((t => t.id === currentTaskId));
                            oldTask.id = updatedTask.id;
                            oldTask.name = updatedTask.name;
                            oldTask.desc = updatedTask.desc;
                        });

                    // Delete a task
                    const currentTaskId = 1;
                    this.deleteTask(currentTaskId)
                        .then(() => {
                            const idx = this.tasks.findIndex(t => t.id === currentTaskId);
                            this.tasks.splice(idx, 1);
                        });
                  }
              </code>
          </mdbsnippet>

        <p>And that's how you communicate with your API from the Vue app.</p>
      </div>
    </div>
  </section>

  <!--Section: Docs content-->
</section>
<!--Section: Docs content-->