correct-apricot•15mo ago

Problem following JavaScript Masteries Tutorial - Vite / Create-React-App

Hey Guys; thank you for this nice community discord and your support. I am new to refine and want to take advantage on it - even for professional production. I really enjoyed what I saw! To my first steps and questions: I (most likely as many others) at the moment start with coding along JavaScript Masteries Tutorial on the Fullstack MERN App with Refine. As the video is 2 months old and you guys seem to be working very frequently on the product the create react app cli option is deprecated so I chose Vite, as I really like it. Now the first steps in the Tutorial are to change the Side Bar / The Login Page and so on. In my Project the Login Page is very small just a

<AuthPage
      type="login"
      
      formProps={{
        defaultValues: { email: "", password: "" },
        
      }}
      
    />

<AuthPage
      type="login"
      
      formProps={{
        defaultValues: { email: "", password: "" },
        
      }}
      
    />

where in the video it is a very customizable page. How can I customize this component or this page with all the options that the video told ? Same with the Layout. The Video Scripter has a components folder with "Sider, Header," and so on. My example folder just has the header. No side bar for example. I installed with example and have all the data structure with the BlogPosts in my project but I seem to be a little lost of how to follow the customization. Sorry for that wall of Text - anyone help ? 🙂

3 Replies

kapa.ai•15mo ago

Hi @brudinero. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hello! I'm glad you're enjoying refine and want to use it for your projects. I'll try to help you with your customization questions. To customize the login page, you can create your own custom login page component and use refine's Auth Provider hooks. You can find an example of a custom login page in the refine documentation (https://refine.dev/docs/examples/customization/customLogin). Here's a code snippet from the example:

import React from "react";
import { useLogin, useNavigation } from "@refinedev/core";

import {
  Row,
  Col,
  AntdLayout,
  Card,
  Typography,
  Form,
  Input,
  Button,
} from "@refinedev/antd";

import "./styles.css";

const { Text, Title } = Typography;

export interface ILoginForm {
  email: string;
  password: string;
}

export const Login: React.FC = () => {
  const [form] = Form.useForm<ILoginForm>();

  const { mutate: login } = useLogin<ILoginForm>();
  const { push } = useNavigation();

  const CardTitle = (
    <Title level={3} className="title">
      Sign in your account
    </Title>
  );

  // ... rest of the component
};

import React from "react";
import { useLogin, useNavigation } from "@refinedev/core";

import {
  Row,
  Col,
  AntdLayout,
  Card,
  Typography,
  Form,
  Input,
  Button,
} from "@refinedev/antd";

import "./styles.css";

const { Text, Title } = Typography;

export interface ILoginForm {
  email: string;
  password: string;
}

export const Login: React.FC = () => {
  const [form] = Form.useForm<ILoginForm>();

  const { mutate: login } = useLogin<ILoginForm>();
  const { push } = useNavigation();

  const CardTitle = (
    <Title level={3} className="title">
      Sign in your account
    </Title>
  );

  // ... rest of the component
};

For customizing the layout, you can create your own layout component and include the necessary components like Sider, Header, etc. You can find an example of a custom layout in the refine documentation (https://refine.dev/docs/tutorial/adding-crud-pages/headless/layout-menu-breadcrumb). Here's a code snippet from the example:

import { PropsWithChildren } from "react";

import { Menu } from "../menu";
import { Breadcrumb } from "../breadcrumb";

export const Layout: React.FC<PropsWithChildren> = ({ children }) => {
  return (
    <div className="layout">
      <Menu />
      <div className="content">
        <Breadcrumb />
        <div>{children}</div>
      </div>
    </div>
  );
};

import { PropsWithChildren } from "react";

import { Menu } from "../menu";
import { Breadcrumb } from "../breadcrumb";

export const Layout: React.FC<PropsWithChildren> = ({ children }) => {
  return (
    <div className="layout">
      <Menu />
      <div className="content">
        <Breadcrumb />
        <div>{children}</div>
      </div>
    </div>
  );
};

You can customize these components according to your needs and use them in your project. I hope this helps you with your customization questions. If you have any more questions, feel free to ask! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•15mo ago

<@427202620432711703> kapa.ai is still learning and improving, please let us how it did by reacting below

extended-salmon•15mo ago

Hey @bruterio, We have developed a lot since the video, I am not sure exactly how you did it in the video, but you can create the Header, Sider etc. components shown in the video yourself. Then you can pass them to the Layout component. Also what the bot says can help you. Lastly, you can check it: https://refine.dev/docs/api-reference/mui/components/mui-themed-layout/#customizing-with-swizzle