xenial-black•14mo ago

Refine example setup

Hello there, I've been in search for low-code / no-code open source dashboards and I stumbled upon refine.dev, I must say that it is really impressive! I installed it on my computer and it was hassle free! I must admit, I'm not a nerd, I don't know how websites work. I'd like to install app-crm example as is but Im not quite sure how to set it up. I'd really appreciate a guide to make it functioning without the dummy data

8 Replies

kapa.ai•14mo ago

Hi @mrvibefr. 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 to hear that you're finding refine.dev impressive and easy to use. To set up the app-crm example, you can follow these steps: 1. First, you need to clone the repository from GitHub. You can find the source code for the app-crm example here (https://github.com/refinedev/refine/tree/master/examples/app-crm). 2. Once you have cloned the repository, navigate to the app-crm directory in your terminal. 3. Install the necessary packages by running npm install in your terminal. 4. After the installation is complete, you can start the application by running npm run dev. This will start the development server and you should be able to see the application running in your browser at <http://localhost:3000.> As for removing the dummy data, you would need to modify the source code of the application. The dummy data is likely being imported from a file and used to populate the application's state. You would need to locate where this is happening in the code and remove or modify it as needed. If you're not comfortable doing this yourself, you might want to consider hiring a developer to assist you. They would be able to quickly make these changes and ensure the application is functioning correctly without the dummy data. I hope this helps! Let me know if you have any other questions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

xenial-blackOP•14mo ago

Can you help me setup google signin? @kapa.ai can you help me setup google sign in?

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, I'd be happy to guide you through setting up Google Sign-In with refine. Here are the steps: 1. Enable Google Auth on Supabase: Go to app.supabase.com and sign in to your Supabase account. Navigate to Authentication -> Settings to configure the Auth providers. Enable the Google Auth option and set your Google Credentials. More details can be found in the Supabase docs (https://supabase.com/docs/guides/auth/auth-google#create-your-google-credentials). 2. Set up Google Login in your refine project: You can use Google Login to control access and provide identity for your app. If you're developing your own OAuth application, remember to add the URLs of both your deployed application and your local development to the list of allowed origins in the OAuth app settings. More detailed guidance can be found in this video tutorial (https://www.youtube.com/watch?v=HtJKUQXmtok). 3. Add Google Login option to your app: You can activate the social login feature by setting the provider property of the <AuthPage> component. Here's an example of how to do this:

import { AuthPage } from "@refinedev/antd";  
import { GoogleOutlined } from "@ant-design/icons";  
  
const App: React.FC = () => {  
 return (  
 <Refine>  
 <Routes>  
 <Route  
 path="/login"  
 element={  
 <AuthPage  
 type="login"  
 providers={[  
 {  
 name: "google",  
 label: "Sign in with Google",  
 icon:   
 <GoogleOutlined  
 style={{  
 fontSize: 18,  
 lineHeight: 0,  
 }}  
 />  
 ),  
 },  
 ]}  
 />  
 }  
 />  
 </Routes>  
 {/* ... */}  
 </Refine>  
 );  
};  
  
export default App;

import { AuthPage } from "@refinedev/antd";  
import { GoogleOutlined } from "@ant-design/icons";  
  
const App: React.FC = () => {  
 return (  
 <Refine>  
 <Routes>  
 <Route  
 path="/login"  
 element={  
 <AuthPage  
 type="login"  
 providers={[  
 {  
 name: "google",  
 label: "Sign in with Google",  
 icon:   
 <GoogleOutlined  
 style={{  
 fontSize: 18,  
 lineHeight: 0,  
 }}  
 />  
 ),  
 },  
 ]}  
 />  
 }  
 />  
 </Routes>  
 {/* ... */}  
 </Refine>  
 );  
};  
  
export default App;

This will add a new Google login button to the login page. After the user successfully logs in, the app will redirect back to the app. 4. Troubleshooting: If you encounter any issues, make sure you have provided your Client ID in the configuration. You can check your login.tsx file, and you should see a code block like this:

        window.google.accounts.id.initialize({
          ux_mode: "popup",
          client_id: "your-client-id",
          callback: async (res: CredentialResponse) => {
            if (res.credential) {
              login(res);
            }
          },
        });

        window.google.accounts.id.initialize({
          ux_mode: "popup",
          client_id: "your-client-id",
          callback: async (res: CredentialResponse) => {
            if (res.credential) {
              login(res);
            }
          },
        });

You need to provide your client_id there. I hope this helps! Let me know if you have any other questions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

xenial-blackOP•14mo ago

@kapa.ai How do I edit settings page in crm example?

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To edit the settings page in the CRM example, you would need to locate the file that contains the code for the settings page. This is typically a JavaScript or TypeScript file with a name like Settings.js or Settings.tsx. Once you've located the file, you can open it in a text editor and make the desired changes. The specifics of what you need to do will depend on what changes you want to make. For example, if you want to add a new field to a form on the settings page, you would need to add a new form control to the form in the code. If you're not familiar with React and JavaScript/TypeScript, you might find it helpful to read some tutorials or documentation on these topics. The official React documentation (https://reactjs.org/docs/getting-started.html) is a good place to start. Please note that making changes to the code can have unintended side effects if you're not careful, so it's a good idea to make a backup of the file before you start editing it. Unfortunately, the provided extracts do not include specific code or file paths related to the settings page in the CRM example. For more detailed guidance, you might want to refer to the refine documentation (https://refine.dev/docs) or ask for help in the refine Discord community (https://discord.com/channels/837692625737613362/1151712438237007902). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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