Adapt - ReactJS for Your Infrastructure

Adapt - ReactJS for Your Infrastructure

AdaptJS is a system to easily, reliably, and repeatably deploy your full-stack applications. Adapt specifications look like React apps, but instead of rendering browser DOM elements like <input>, or <div>, Adapt specifications use elements like AWS <EC2Instance>,

Adapt - ReactJS for your infrastructure.

AdaptJS is a system to easily, reliably, and repeatably deploy your full-stack applications. Adapt specifications look like React apps, but instead of rendering browser DOM elements like <input>, or <div>, Adapt specifications use elements like AWS <EC2Instance>, Kubernetes <Pod>, or <MongoDB> database. An Adapt description for a complete front end and back end app stack looks like this:

import Adapt from "@adpt/core";
import { NodeService, ReactApp } from "@adpt/cloud/nodejs";
import { Postgres } from "@adpt/cloud/postgres";

function MyApp() {
  const pg = Adapt.handle();

  return (
    <Adapt.Group>
      <ReactApp srcDir="../frontend" />
      <NodeService srcDir="../backend" connectTo={pg} />
      <Postgres handle={pg} />
    </Adapt.Group>
  );
}

Each of the components above renders to simpler components until they get to primitive infrastructure. You can also specify a style sheet to customize how components render to infrastructure (e.g., Docker vs. Kubernetes vs. AWS). Styles can also swap out components entirely, for example, using a test database for your test environment and a hosted database service for production.

If you're already familiar with React, you'll feel right at home with Adapt. But if not, don't worry, knowledge of React isn't required to start using Adapt. You can get started with a starter, write your code and deploy, and come back to the Adapt specification when you need to change how it gets deployed.

Getting Started

For a new project, it's easy to get started with Adapt by using a starter template. The Getting Started Guide will walk through installing Adapt and deploying your first starter app.

Creating and deploying an app

This example creates a new full-stack app from a starter template. It has a React UI, an Nginx web server, a Node.js API server, and a Postgres database, then deploys it to Kubernetes:

# Install adapt
npm install -g @adpt/cli

# Create a new app from a starter template
adapt new hello-react-node-postgres ./myapp
cd myapp/deploy

# Deploy full stack locally using Docker
adapt run laptop

# Or just as easily deploy everything to Kubernetes
adapt run k8s-test

Adapt in action

This demo shows using Adapt to create and deploy a simple app called MovieDB that has a React UI, an Nginx web server, an Nginx URL router, a Node.js API server, and a Postgres database, then deploys it to Kubernetes:

Adapt in action

More info

Getting Help

Gitter

We'd love to hear about your experience with Adapt! Join us on our Gitter channel to ask questions or to give us your feedback and suggestions.

If you've found a bug, you can also file an issue.

Download Details:

Author: unboundedsystems

Demo: https://adaptjs.org/

Source Code: https://github.com/unboundedsystems/adapt

reactjs react javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

What is ReactJS? | ReactJS Basics | Learn ReactJS | React for Beginners | ReactJS Training

This Edureka video on "What is ReactJS ?" will help you understand the fundamentals of ReactJS and help you in building a strong foundation in React by understanding the advantages of ReactJS along with its features and major aspects.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.