How can we help?
Categories
< All Topics
Print

Building Your First Application with the MEAN Stack on ServerStadium VM Instances

Once you have the MEAN Stack set up on your ServerStadium VM instance, you can start building your first application. This guide will walk you through the process of creating a simple application.

Before we dive in, make sure you’ve followed our previous guide on Setting up a MEAN Stack on ServerStadium VM Instances.

Step 1: Create an Express.js Server

Start by creating a new directory for your project and navigating into it:

mkdir mean-app
cd mean-app

Initialize a new Node.js application:

npm init -y

Install Express.js:

npm install express

Create a new file named server.js:

touch server.js

Open server.js in your text editor and add the following code to create a basic Express.js server:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

Run your server with node server.js. You should see “Server is running at http://localhost:3000” in your console. You can visit this URL in your browser to see your server in action.

Step 2: Connect to MongoDB

Install the MongoDB driver for Node.js:

npm install mongodb

Update server.js to connect to your MongoDB database:

const express = require('express');
const mongodb = require('mongodb');
const app = express();
const port = 3000;

mongodb.MongoClient.connect('mongodb://localhost:27017', (err, client) => {
  if (err) {
    console.error(err);
    return;
  }

  const db = client.db('mydb');

  app.get('/', (req, res) => {
    res.send('Connected to MongoDB!');
  });

  app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
  });
});

Step 3: Create an Angular App

Navigate to a different directory where you want to create your Angular app:

cd ..
ng new mean-angular-app
cd mean-angular-app

Serve your Angular app:

ng serve

You should see “Angular Live Development Server is listening on localhost:4200” in your console. You can visit this URL in your browser to see your Angular app.

Step 4: Connect Angular to Express.js

First, install the http package in your Angular app:

npm install @angular/common/http

Update the app.component.ts file in your Angular app to make a GET request to your Express.js server

import { HttpClient } from '@angular/common/http';

export class AppComponent {
  title = 'mean-angular-app';
  message = '';

  constructor(private http: HttpClient) {
    this.http.get('http://localhost:3000').subscribe((data: any) => {
      this.message = data;
    });
  }
}

Update the app.component.html file in your Angular app to display the message from your Express.js server:

<h1>{{ message }}</h1>

Conclusion

Congratulations! You’ve just created your first MEAN Stack application on a ServerStadium VM instance. This guide only scratches the surface of what you can do with the MEAN Stack. To further your knowledge, explore our Knowledge Base for more tutorials and guides.

Remember, our team at ServerStadium is always ready to assist you with your needs. Feel free to reach out to us if you have any questions or need further assistance.

Tags:
Table of Contents