Get started with create-lofi-app
the fastest way to build a local-first app from scratch
In this guide, you will:
- Create a new local-first project using
create-lofi-app
- Customize the homepage and schema
- Connect to a Basic project
- Add sign in and sign out functionality
installation
Create a new local-first project
When prompted in the CLI, enter y
for installing the vite package.
Then give your project a name.
And finally choose the Basic + Tailwind variant.
running the app
install npm packages
cd project-name
into your project, run npm i
, and start your server with npm run dev
:
You’ll now be able to navigate to http://localhost:5173
and see the app running as below:
customizing the app
change the homepage
Let’s delete the existing code and simplify it by printing “my lofi app”.
update the schema
set up the schema based on your project needs and as per the schema docs.
You’re ready to test and develop your app locally!
testing local-first sync and Auth
You can continue to test the app locally without the following steps, but if you wish to test local-first sync and Auth, you would need to create a Basic project and connect it to the app.
create and connect to a Basic project
You can use the Basic CLI to create a new project (the basic init
command will automatically update the basic.config.ts
file with the project_id). You will need to basic push
to update the version number in the basic.config.ts
file.
…or use the Basic dashboard to create and connect to a new Basic project (make sure to update the basic.config.ts
file with the project_id). You will need to manually update the version number in the basic.config.ts
file to match the version number in your Basic admin project dashboard.
Add a login button to App.tsx
Now navigate to src/App.tsx
and import signin
, isSignedIn
, and user
.
Let’s test it out! Clicking on the button should now redirect you to the Basic.id page where your users can login or create an account. Once they’re done, they’ll be redirected back to your app and see their email displayed.
Add a logout button
Use the isSignedIn hook to check if the user is logged in, and the signout function to sign out the user:
That’s it! You’ve successfully added Basic Auth to your React app 🎉
Using the database
You can use the React SDK documentation to read and write to the user’s database. Checkout the React SDK docs to get started.