This project aims to provide a react boilerplate with all basic configuration pre-configured. We are using MUI as base library to extend the Theme module and create reuseable components.
src/
├── Assets
├── Components
├── Helpers
├── Hooks/
│ ├── useAuth.ts (Hook for auth related methods/properties)
│ ├── useConfig.ts (Hook for fetching runtime app config and parsing values)management
├── Layouts (Reuseable page layouts , which will provide sub route config for accessing Pages)
├── Pages
├── Providers
│ ├── theme (mui theme config)
│ ├── Provider (Redux Provider)
│ ├── ErrorBoundary.ts
│ └── NotificationProvider.ts (provider for showing notifications)
└── Routes/
├── Routes.ts (contains route guards)
└── layoutRouteConfig.ts (contains top level route mapping for layouts)
The react app is pre configured with mui material theme , auth guards , notification provider , error boundary , routes , page layouts , vite package bundler and many reuseable components inside the components directory . To Use the template
- Clone the github repo
- cd into the folder and run
npm ito install node_modules. - Add the environment variables to connect to ARC backend service.
- Run
npm startto run the vite development server.
The App comes pre-configured with docker , To deploy the app on server/EC2 machine you need to install docker and docker compose and set the required env variables mentioned in docker-compose.yml and run docker compose up , the app will connect to port 80 and will be available on static ip address of EC2 machine.
Creating a simple login page using ARC form components
- Without ARC form components
- Lot more line of code
- state of each variable has to managed separately
- Styling has to be managed individually
- Separate error block for each field
import './App.css';
import {Formik} from 'formik';
import * as Yup from 'yup';
// Creating schema
const schema = Yup.object().shape({
email: Yup.string().required('Email is a required field').email('Invalid email format'),
password: Yup.string().required('Password is a required field').min(8, 'Password must be at least 8 characters'),
});
function App() {
return (
<>
{/* Wrapping form inside formik tag and passing our schema to validationSchema prop */}
<Formik
validationSchema={schema}
initialValues={{email: '', password: ''}}
onSubmit={(values) => {
// Alert the input values of the form that we filled
alert(JSON.stringify(values));
}}
>
{({values, errors, touched, handleChange, handleBlur, handleSubmit}) => (
<div className="login">
<div className="form">
{/* Passing handleSubmit parameter tohtml form onSubmit property */}
<form noValidate onSubmit={handleSubmit}>
<span>Login</span>
{/* Our input html with passing formik parameters like handleChange, values, handleBlur to input properties */}
<input
type="email"
name="email"
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
placeholder="Enter email id / username"
className="form-control inp_text"
id="email"
/>
{/* If validation is not passed show errors */}
<p className="error">{errors.email && touched.email && errors.email}</p>
{/* Our input html with passing formik parameters like handleChange, values, handleBlur to input properties */}
<input
type="password"
name="password"
onChange={handleChange}
onBlur={handleBlur}
value={values.password}
placeholder="Enter password"
className="form-control"
/>
{/* If validation is not passed show errors */}
<p className="error">{errors.password && touched.password && errors.password}</p>
{/* Click on submit button to submit the form */}
<button type="submit">Login</button>
</form>
</div>
</div>
)}
</Formik>
</>
);
}
export default App;- With ARC form components
- All data, errors and styles are managed internally
- Less amount of code on the actual page
import {Box, Stack} from '@mui/material';
import Grid from '@mui/material/Grid';
import Button from 'Components/Button/Button';
import Form from 'Components/Forms/Form';
import FormInput from 'Components/Forms/FormInput';
import FormPasswordInput from 'Components/Forms/FormPasswordInput';
import PagePaper from 'Components/PagePaper';
import * as yup from 'yup';
import {initialValues} from './utils';
type LoginForm = {userName: string, password: string};
const validationSchema = () => {
return yup.object({
userName: yup.string().required().label('User Name'),
password: yup.string().required().label('Password'),
});
};
export default function Login() {
return (
<Stack direction="row">
<Box sx={{flexGrow: 1}}>
<PagePaper title="Form">
<Form
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={(val: LoginForm) => alert(JSON.stringify(val))}
>
<Grid container spacing={2}>
<Grid item xs={12}>
<FormInput id="userName" label="User Name" />
</Grid>
<Grid item xs={12}>
<FormPasswordInput id="Password" label="Password" />
</Grid>
</Grid>
<Button variant="outlined" type="submit" sx={{marginTop: 1}}>
Submit
</Button>
</Form>
</PagePaper>
</Box>
</Stack>
);
}
- node.js
- npm
- Sourceloop Auth service
- use VS code for best development experience and install the following extensions also
| Script | Description |
|---|---|
| npm start | Runs the app in the development mode |
| npm run config | Generates config file from .env , this file is used for runtime configuration for env vars |
| npm run build | Builds the app for production to the build folder. |
| npm run lint | Checks linting error in code |
| npm run lint:fix | Fix all auto-fixable lint errors |
| npm run format | Format all files using prettier |
At ARC, we are driven by a steadfast mission – to empower developers and organizations with seamless solutions for both backend and frontend application development and deployment. Our unwavering commitment to the highest security and industry standards ensures that every facet of app development contributes to a smooth and secure user experience.
In our dedication to the open-source community, we actively contribute to a diverse range of projects that reflect our values of innovation and collaboration. Some of our notable contributions include:
- React Boilerplate: Discover our meticulously crafted React Boilerplate application, designed to accelerate your development process.
React Boilerplate
- Telemed App: The ARC Telemedicine App establishes seamless communication channels between medical professionals and patients through video calls and chat. This app is meticulously crafted using the ARC React Boilerplate.
Telemed App UI
- Storybook: Components within the ARC React Boilerplate through our comprehensive Storybook.
Storybook
- ARC API: ARC API, is a collection of pre-built microservices designed to accelerate the development timeline for enterprise projects. These services address common challenges encountered by large enterprises during the development of cloud-native platforms for digital transformation initiatives or new product creation
- ARC Lambda: Easily deploy your services to a serverless environment on AWS.
- ARC IAC: Explore the intricacies of Infrastructure as Code with our comprehensive documentation on ARC IAC.