Building an End-To-End App In Under 5 Minutes

2 bulan yang lalu

Building An End-To-End App Using React, GraphQL and TypeScript successful Under 5 Minutes

If you were building an end-to-end app, what would you do?

You’d apt beryllium using:

Create React App to create your React app
NPM Projects to build your Express API.
Creating Entities that you copy crossed your frontend and backend app for entity sharing.

Apart from this, you’d person to do much stuff:

Set up a creation strategy specified arsenic MUI aliases Tailwind to style your React app
Create reusable components specified arsenic headers, nav bars for your app.
Set up TypeScript and Linters.
Create a trial model to constitute and execute your portion tests.

In a nutshell, this process is rather lengthy and time-consuming. You person to put successful a immense effort earlier you commencement to create nan thought you want to get out.

So, by nan clip you get this up and running, personification might’ve already hit you to your ain idea.

This is wherever you person to beryllium efficient. So, that’s precisely wherever this article fits in. Let’s return a look astatine really we tin build a complete end-to-end app successful nether 5 minutes!

Pst, if you want to cheque retired nan codification directly, here’s nan Bit Scope.

To do so, we’re going to beryllium playing pinch independent components and build a composable app.

Simply put, we’re going to build our app loosely coupled and make judge that our app components are reusable crossed different projects.

By doing so, we tin prevention clip for each early projects! And we’re going to leverage Bit to do this.

Bit is simply a next-generation build strategy for composable software. It lets you build independent Bit components that let you to design, develop, build, trial and type your constituent successful an isolated space.

This intends that you don’t request to activity connected an full task to activity connected 1 component. You tin retrieve nan constituent you wish to update and push it backmost to nan Bit Cloud.

Bit past uses its CI Server — Ripple CI to build your constituent character and propagate changes up your character to guarantee that each components usage nan latest type and stay up to date.

For example, see nan component character shown above. You tin spot that each constituent has a different version, meaning that they aren’t updated astatine nan aforesaid time. Ripple CI propagates changes to each independent constituent crossed nan character to make judge everything remains up to date.

Pretty cool, isn’t it? You tin return this 1 measurement further and create entity components that you tin stock crossed your app.

For example, here’s another constituent tree that showcases inferior features for illustration format-date being utilized crossed backend (AWS Lambda) and frontend (React) environments.

It’s beautiful bully to spot that you’re capable to build 1 type of your utilities and usage it without moreover publishing an NPM package!

Well, capable said. Let’s build an end-to-end pinch Bit successful nether 5 minutes.

Step 01 — Pre-requisites

let’s first instal Bit. Use Bit’s type head (BVMM) to instal Bit globally:

# instal bit
npx @teambit/bvm install

Next, to verify your installation, tally nan command:

bit --version

If you’ve installed Bit correctly, you’ll spot nan output:

Step 02 — Bootstrapping an end-to-end app

Next, let’s bootstrap an app that we tin usage to commencement moving connected pinch nary effort.

Lucky for us, Bit has already made “starters” for america that we tin usage to footwear disconnected a fully-functional end-to-end project.

So, successful this article, let’s leverage a starter to footwear disconnected nan end-to-end app:

Open up a terminal, and tally nan bid below:

bit caller respond my-project --env bitdev.react/react-env --default-scope dummyorg.end-to-end

Tip: Make judge you create an relationship connected Bit Cloud and a Scope and switch nan dummyorg.end-to-end pinch your Bit username and Scope name.

If you’ve tally nan bid successfully, you should spot nan output below:

Next, let’s motorboat nan Bit server to spot nan starter. To do so, navigate to your task directory and tally nan command:

bit start

You should spot your dev server output:

Out of nan box, you should a React and a GraphQL app on pinch nan pursuing components:

acme-corporate is your level composition. Composing nan backend work and nan frontend app.
corporate-website is simply a React web exertion for your project.
corporate-service is simply a backend work for Acme corporate.
ui/announcements is simply a UI constituent for displaying caller announcements.
hooks/use-announcements is React hook for retrieve announcement from nan backend.
entities/announcement is an entity to picture nan announcement information object.

If you spell up an unfastened your my-project-service.graphql.ts, you should spot nan query resolvers:

We initially person a azygous query — listAnnouncements that communicates pinch nan task work and lists nan announcements. This is an async operation, truthful you tin hook this up to a database, but for now, it only fetches a group of mock announcements:

To fetch nan mock announcements, it communicates pinch nan announcement entity to drawback nan database of mock information that it has created for nan entity:

By doing so, nan GraphQL API is created. It is past invoked by nan useAnnouncement hook successful nan React app:

As you tin see, it is invoking nan listAnnouncement query that was initially defined done nan useQuery API offered by Apollo.

And, that’s fundamentally a starting constituent that you tin usage to build widen your app.

Step 03: Building a civilization feature

Now that we cognize really things work, let’s create a elemental characteristic for our app. Let’s adhd a Blogs API that we tin usage to fetch a database of Blogs.

To do so, we’ll request nan following:

A Blog entity
A group of mock information for blogs
A GraphQL query to fetch nan blogs
A React hook to invoke nan GraphQL API
A React constituent to show nan blogs.

All of this tin beryllium created successful nether 5 minutes

Let’s get cracking and build nan end-to-end feature:

Creating nan Blog Entity

Let’s create a Node constituent to create nan Blog Entity utilizing nan command:

bit create node entities/blog

You’ll spot nan output below:

Next, unfastened nan blog.ts record and update your entity by including nan code:

export type PlainBlog = {
/**
* title of nan blog
*/
title: string;

/**
* subtitle of nan blog
*/
subtitle: string

/**
* outline of nan blog
*/
outline: string
}

export people Blog {
constructor(
/**
* title of nan blog
*/
readonly title: string,

/**
* subtitle of nan blog
*/
readonly subtitle: string,

/**
* outline of nan blog
*/
readonly outline: string
) { }

/**
* serialize a Blog into
* a serializable object.
*/
toObject() {
return {
title: this.title,
subtitle: this.subtitle,
outline: this.outline
};
}

/**
* create a Blog entity from a
* plain object.
*/
fixed from(plainBlog: PlainBlog) {
return caller Blog(
plainBlog.title,
plainBlog.subtitle,
plainBlog.outline
);
}
}

As you tin see, we’re managing a Blog entity here. You’re free to create your validations for Blog creation wrong this entity component.

For example, you could group up a validation that says a Blog title cannot transcend 15 characters.

Next, let’s adhd immoderate mock information to this by creating a record blog.mock.ts and by including nan following:

import { Blog, PlainBlog } from "./blog.js";

const plainBlogs: PlainBlog[] = [
{
title: "First Blog Post",
subtitle: "An preamble to our blog",
outline: "In this blog post, we will present nan intent of our blog and what readers tin expect successful early posts."
},
{
title: "Second Blog Post",
subtitle: "Diving deeper into our topic",
outline: "Building upon our introduction, this station will delve deeper into nan main topic, providing valuable insights and analysis."
},
{
title: "Third Blog Post",
subtitle: "Exploring a circumstantial aspect",
outline: "Focusing connected a circumstantial facet related to our topic, this station will supply elaborate accusation and examples for readers to understand."
},
{
title: "Fourth Blog Post",
subtitle: "Discussing caller developments",
outline: "In this post, we will talk caller developments and trends successful our field, offering commentary and position connected their implications."
},
{
title: "Fifth Blog Post",
subtitle: "Sharing applicable tips",
outline: "Concluding our bid of posts, this 1 will supply applicable tips and proposal for readers to use nan knowledge gained from our erstwhile posts."
}
];

export usability mockBlogs() {
return plainBlogs.map((plainBlog: PlainBlog) => Blog.from(plainBlog));
}

By doing so, we’re capable to return nan Mock information done our GraphQL API.

Creating nan GraphQL Query

Next, let’s create a query to database each blogs. To do so, let’s update nan my-project-service.graphql.ts pinch this caller addition:

export usability myProjectServiceSchema(myProjectService: MyProjectService): ServerSchema {
const typeDefs = gql`#graphql

type Announcement {
title: String
date: String
}

type Blog {
title: String
outline: String
subtitle: String
}

# The "Query" type is special: it lists each of nan disposable queries that
# clients tin execute, on pinch nan return type for each. In this
# case, nan "users" query returns an array of zero aliases much Users (defined above).
type Query {
listAnnouncements: [Announcement]
listBlogs: [Blog]
}
`;

const resolvers = {
Query: {
listAnnouncements: async () => {
const announcements = await myProjectService.listAnnouncements();

return announcements.map((announcement) => {
return announcement.toObject();
});
},

listBlogs: async () => {
const blogs = await myProjectService.listBlogs();

return blogs.map((blog) => {
return blog.toObject();
});
},
},
};

return {
typeDefs,
resolvers
};
}

As you tin see, we’ve created a caller GraphQL type to support nan Blog meaning and we’ve besides created nan query — listBlogs by adding an implementation - myProjectService.listBlogs().

Therefore, unfastened up your myProjectService and update it pinch this caller function:

import { mockAnnouncements } from "@dummyorg/end-to-end.entities.announcement";
import { mockBlogs } from "@dummyorg/end-to-end.entities.blog";

/**
* firm service
*/
export people MyProjectService {
/**
* opportunity hello.
*/
async listAnnouncements() {
return mockAnnouncements();
}

/**
* return blogs.
*/
async listBlogs() {
return mockBlogs();
}

/**
* create a caller lawsuit of a firm service.
*/
fixed from() {
return caller MyProjectService();
}
}

As you tin spot we’re now leveraging nan mockBlogs usability we created earlier to return nan database of sample data.

Well, that’s our backend!

Creating nan React component

Now, let’s create nan frontend portion of this. Let’s first create a React hook to invoke nan API:

bit create react-hook hooks/use-blogs

After you’ve created your hook, unfastened up your use-blogs.ts and update it arsenic follows:

import { useQuery, gql } from '@apollo/client';
import { useIsMock } from '@acme/acme.testing.mock-provider';
import { Blog, mockBlogs } from '@dummyorg/end-to-end.entities.blog';

// specify a graphql query
export const LIST_BLOGS = gql`
query LIST_BLOGS {
listBlogs {
title
subtitle
outline
}
}
`;

/**
* fetch database of blogs.
*/
export usability useBlogs(): undefined | null | Blog[] {
const results = useQuery(LIST_BLOGS);
const isMock = useIsMock();
if (isMock) return mockBlogs();

if (!results.data || results.loading) return undefined;
if (!results?.data?.listBlogs) return null;

return results.data.listBlogs.map((blog) => {
return Blog.from(blog);
});
}

As you tin see, our React hook now communicates pinch nan GraphQL API to fetch nan blogs. Next, let’s create a React constituent that leverages nan hook to fetch nan data. To do so, create nan constituent utilizing nan command:

bit create respond ui/blogs

Next, unfastened up your blogs.tsx and update it arsenic follows:

import React from 'react';
import type { ReactNode } from 'react';
import classNames from 'classnames';
import { Heading } from '@bitdesign/sparks.typography.heading';
import { Text } from '@bitdesign/sparks.typography.text';
import { useBlogs } from '@dummyorg/end-to-end.hooks.use-blogs';
import { Flex } from '@bitdesign/sparks.layout.flex';
import { Card } from '@acme/design.content.card';
import styles from './blogs.module.scss';

export type BlogProps = {
/**
* children for nan blogs
*/
children?: ReactNode;

/**
* blogs to use
*/
className?: string;
};

export usability Blogs({ className }: BlogProps) {
const blogs = useBlogs();
if (!blogs) return null;

return (
<Flex className={classNames(styles.blog, className)}>
{blogs.map((blog, key) => {
return (
<Card key={key}>
<Heading level={2}>{blog.title}</Heading>
<Heading level={3}>{blog.subtitle}</Heading>
<Text>{blog.outline}</Text>
</Card>
);
})}
</Flex>
);
}

Next, create a record blogs.module.scss and adhd nan pursuing CSS meaning to style nan components:

// study more: https://bit.dev/docs/design/styling
.blog {
max-width: 1280px;
margin: auto;
padding: var(--spacing-triple);
gap: var(--spacing-double);
}

We’re leveraging Bit’s creation strategy to make our life easier. But if you’d for illustration to, you tin group up different creation systems for illustration MUI.

And, that’s fundamentally it! We now person a afloat extremity to extremity implementation fresh to go. Let’s trial this retired by launching our app.

To do so, tally nan command:

bit tally my-project

You should spot nan servers rotation up, arsenic shown below:

Next, motorboat your frontend app to spot nan output:

Next, let’s hook nan Blogs way to our app constituent by updating nan my-project-web/my-project-web.tsx record arsenic follows:

import { Routes, Route } from 'react-router-dom';
import { NavigationProvider, Link } from '@bitdesign/sparks.navigation.link';
import { Header } from '@bitdesign/sparks.layout.header';
import { Logo } from '@bitdesign/sparks.content.logo';
import { AcmeTheme } from '@acme/design.acme-theme';
import { Announcements } from '@dummyorg/end-to-end.ui.announcements';
import { Blogs } from '@dummyorg/end-to-end.ui.blogs';

export usability MyProjectWeb() {
return (
<AcmeTheme>
<NavigationProvider>
<Header logo={<Logo src='https://static.bit.dev/extensions-icons/acme.svg' name='Acme' slogan='Inc.' />}>
<Link href='/'>Investors</Link>
<Link href='/blogs'>Blogs</Link>
</Header>
<Routes>
<Route path="/" element={<Announcements />} />
<Route path="/blogs" element={<Blogs />} />
</Routes>
</NavigationProvider>
</AcmeTheme>
);
}

Next, you should spot nan updated header:

Click connected “Blogs” to spot nan blogs loading:

And location we person it! We created a afloat functional end-to-end exertion successful nether 5 minutes!

Not only that, but we did this by preserving nan maintainability of our codebase done reusable entities.

If you wish to cheque retired a afloat implementation, here’s nan Bit Scope.

I dream you find this article helpful.

Thank you for reading.