MERN StackVM by Anarion Technologies
The MERN stack is a robust and widely-used web development framework that enables developers to build dynamic, full-stack applications using JavaScript across both client-side and server-side environments. The stack comprises four key technologies:
MongoDB: As a NoSQL database, MongoDB stores data in flexible, JSON-like documents, allowing for easy scalability and adaptability to changing data structures. Its document-oriented nature makes it suitable for applications that require a flexible schema, enabling developers to store complex data relationships without the constraints of traditional relational databases. MongoDB supports powerful querying capabilities and provides high availability through its built-in replication features.
Express.js: This minimal and flexible web application framework for Node.js simplifies the process of building web applications and APIs. Express.js provides a robust set of features for handling routing, middleware, and server-side logic, allowing developers to create powerful backends with ease. Its minimalist design helps streamline the development process, enabling quick setup and deployment of applications. The framework also integrates seamlessly with various templating engines and third-party middleware, enhancing its functionality.
React: Developed by Facebook, React is a powerful JavaScript library used for building user interfaces, especially for single-page applications (SPAs). React allows developers to create reusable UI components, promoting a component-based architecture that enhances maintainability and scalability. Its virtual DOM implementation optimizes rendering performance, providing a smooth user experience. Additionally, React’s ecosystem includes tools like React Router for navigation and Redux for state management, further simplifying the development of complex user interfaces.
Node.js: As a JavaScript runtime built on Chrome’s V8 engine, Node.js allows developers to run JavaScript code on the server side. This capability enables full-stack JavaScript development, allowing for a unified codebase across both the frontend and backend. Node.js is event-driven and non-blocking, making it ideal for handling multiple connections simultaneously, which is essential for real-time applications. Its rich ecosystem of packages available through npm (Node Package Manager) empowers developers to leverage existing modules and libraries, accelerating the development process.
The combination of these technologies in the MERN stack allows for seamless integration between the client and server, enabling developers to build feature-rich applications efficiently. The stack is particularly favored for its flexibility, allowing for rapid prototyping and development while maintaining a high level of performance and scalability. Additionally, the use of JavaScript throughout the entire stack minimizes context switching for developers and streamlines the overall development workflow.
To subscribe to this product from Azure Marketplace and initiate an instance using the Azure compute service, follow these steps:
1. Navigate to Azure Marketplace and subscribe to the desired product.
2. Search for “virtual machines” and select “Virtual machines” under Services.
3. Click on “Add” in the Virtual machines page, which will lead you to the Create a virtual machine page.
4. In the Basics tab:
- Ensure the correct subscription is chosen under Project details.
- Opt for creating a new resource group by selecting “Create new resource group” and name it as “myResourceGroup.”
5. Under Instance details:
- Enter “myVM” as the Virtual machine name.
- Choose “East US” as the Region.
- Select “Ubuntu 18.04 LTS” as the Image.
- Leave other settings as default.
6. For Administrator account:
- Pick “SSH public key.”
- Provide your user name and paste your public key, ensuring no leading or trailing white spaces.
7. Under Inbound port rules > Public inbound ports:
- Choose “Allow selected ports.”
- Select “SSH (22)” and “HTTP (80)” from the drop-down.
8. Keep the remaining settings at their defaults and click on “Review + create” at the bottom of the page.
9. The “Create a virtual machine” page will display the details of the VM you’re about to create. Once ready, click on “Create.”
10. The deployment process will take a few minutes. Once it’s finished, proceed to the next section.
To connect to the virtual machine:
1. Access the overview page of your VM and click on “Connect.”
2. On the “Connect to virtual machine” page:
- Keep the default options for connecting via IP address over port 22.
- A connection command for logging in will be displayed. Click the button to copy the command. Here’s an example of what the SSH connection command looks like:
“`
ssh [email protected]
“`
3. Using the same bash shell that you used to generate your SSH key pair, you can either reopen the Cloud Shell by selecting >_ again
or going to https://shell.azure.com/bash.
4. Paste the SSH connection command into the shell to initiate an SSH session.
Usage/Deployment Instructions
Anarion Technologies- Mern Stack
Note: Search product on Azure marketplace and click on “Get it now”
Click on Continue
Click on Create
Creating a Virtual Machine, enter or select appropriate values for zone, machine type, resource group and so on as per your choice.
After Process of Create Virtual Machine. You have got an Option Go to Resource Group
Click Go to Resource Group
Click on the Network Security Group: mern-nsg
Click on Inbound Security Rule
Click on Add
Add Port
Add Port
Destination Port Ranges Section* (where default value is 8080)
5000, 3000
Select Protocol as TCP
Option Action is to be Allow
Click on Add
Click on Refresh
Copy the Public IP Address
SSH into terminal and run these commands:
$ sudo su
$ sudo apt update
Copy the Public IP Address
SSH into Terminal & run these following Commands:
$ sudo su
$ sudo apt update
Verify the Version:
$ node -v
$ npm -v
MongoDB Status:
$ sudo systemctl status mongod
Check Express.js is Working:
You can create a directory for your application
$ mkdir my-mern-app
$ cd my-mern-app
Create a Basic Express Server
Create a file called server.js:
// server.js
const express = require(‘express’);
const app = express();
const port = 5000;
app.get(‘/’, (req, res) => {
res.send(‘Hello World!’);
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
Run the server:
$ node server.js
Use the browser to access the application at http://”instance Ip address:5000“
Check React is Working
In a separate terminal window, navigate to your project directory
$ npx create-react-app client
$ cd client
Run the React Application
Inside the client directory, run:
$ npm start
Use the browser to access the application at http://”instance Ip address:3000“
To modify src/App.js in your React project, follow these steps:
1. Locate src/App.js
Navigate to the src folder in your React app directory and open the App.js file. The path is typically client/src/App.js.
2. Modify App.js
Here’s an example of how you can edit the file to display a custom message:
$ npm start
Thanks!!!
All your queries are important to us. Please feel free to connect.
24X7 support provided for all the customers.
We are happy to help you.
Contact Number: +1 (415) 800-4585
Support E-mail: [email protected]