React Inertia Typescript Adonis with TailwindCSS

A batteries-included starter for Adonis apps.

You will have to have mysql running on your machine

git clone https://github.com/kavinvalli/rita new-project
cd new-project
rm -rf CNAME
npm i
cp .env.example .env
docker-compose up -d # In case you want to use adonis-sail (similar to laravel's sail)
node ace migration:run
node ace db:seed
npm run dev

The starter also has support for adonis-sail, therefore introducing a Docker development environment.

Note that this is completely optional to use, but it does make your development flow much easier.

You need to have docker installed for this to work.

docker-compose up -d

By default, this will spin up MySQL, Redis and Mailhog. You can add or remove as you wish in docker-compose.yml

Types for the app are defined in resources/js/lib/types.tsx, this file has the interface IPageProps, which is used with the usePage hook from Inertia for typing shared data coming from the backend.

const { props: { user } } = usePage<IPageProps>();

This file also has IUser, the interface for the User model.

resources/js/lib/use-title.tsx contains the useTitle hook, used to set the title from inside a React component. You could also use Inertia's Head component for this.

node ace make:page <PAGE NAME> creates a page in resources/js/pages using the template in commands/templates/page.txt. For example: node ace make:page auth/login or node ace make:page test

RITA supports authentication with email-password, Github and Google out of the box. Social authentication is implemented with Ally, so it should be easy to add other providers. See app/Http/Controllers/SocialAuthController.ts for implementation.

node ace create:user prompts you fields to create a new user directly from the cli.

You can share data across all inertia pages by editting start/inertia.ts and updating IPageProps in resources/js/lib/types.tsx

Admin accounts have the admin property on the User model set to true. By default, all users who register via the /auth/register route are not admins.

You can use the auth and the admin middleware which are set in app/Middleware

The database seeder creates an admin account with the following credentials:

Email: [email protected]
Password: adminadmin

resources/js/lib/authorization.tsx contains the following components - Admin, User, Authenticated and Guest. These show/don't show the children passed to them based on the user and authentication state.

<Admin>
  Only an admin can see this
</Admin>

<User>
  Only a user who is not an admin can see this
</User>

<Authenticated>
  Both users and admins can see this
</Authenticated>

<Guest>
  Logged in users can not see this
</Guest>

You can setup listeners or emit data on start by editting start/socket.ts.

https://docs.adonisjs.com/cookbooks/socketio-with-adonisjs#broadcast-from-anywhere

1. Use the useContext api and SockerContext in resources/js/context/socket.tsx

import React, { useContext, useEffect } from 'react'
import { SocketContext } from '../context/socket'

const socket = useContext(SocketContext)

2. On useEffect, you can setup listeners or emit some data

useEffect(() => {
  socket.on('test', (data: { [key: string]: string }) => console.log(data))
  socket.on('sendMessageToClient', (data: string) => console.log(data))

  return () => socket.disconnect()
}, [])

3. You can also emit data from the frontend on certain events. For example:

<button className="button" onClick={() => socket.emit('sendMessage', 'hello world!')}>
  Hello
</button>

This project comes with ESLint and Prettier setup out of the box, configs are in .eslintrc.js and .prettierrc respectively.

A Todo app made with RITA can be found at https://github.com/kavinvalli/rita-todo