An effort to port the incredible shadcn/ui project over to the Angular ecosystem.
The idea is to create unstyled primitives similar to Radix with the help of the Angular Cdk and other proven community solutions And then add the beautiful shadcn styles with primitives (and components where necessary).
You can find all UI primitives in the libs folder.
A storybook project is set up. You can run it with:
yarn storybook
We finished porting over 30/41 UI primitives. See a more detailed breakdown here!
Cypress e2e testing is set up to run on the storybook. You can run it with:
yarn e2e
An example application running on Supabase, Drizzle, Analog, tRPC, Tailwind, Angular, and Nx. It also serves as the documentation page introducing the stack and UI library.
Follow the directions below to get it up and running:
- You will need
yarn(or a different package manager) installed. - You will need to set up a Supabase account (it's free)
- You will need NodeJs installed. The version I have working is
18.13.0.
Run yarn or yarn install to install the dependencies of this project.
Your dependencies include Prisma, which is a great tool for managing your application's database. As a database provider, we use Supabase, an open-source Firebase alternative that comes with a Postgres database, Authentication, instant APIs, Edge Functions, Realtime subscriptions, and Storage.
There are two ways to get up and running with Supabase:
- Connecting directly to your managed instance on supabase.com
- Locally using Docker
This way is super easy! Simply by creating your account, you will also have set up your first project. This means that you are ready to connect to your project's database already!
Let's connect our application to our Supabase Postgres instance:
Add a .env file at the root of your Nx workspace and add the following code snippet
# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
DATABASE_URL="postgresql://postgres:[YOUR-PASSWORD]@db.[YOUR-SUPABASE-REFERENCE-ID].supabase.co:5432/postgres?schema=public"
Supabase also allows you to run a version of their system locally! To get up and running, follow this guide! They do a great job explaining how to get started, and there is plenty of resources to help you if you get stuck.
If you want the quick and dirty way and are on a Mac. Here is what I did to get up and running:
brew install supabase/tap/supabasesupabase loginCreate your access token from https://app.supabase.com/account/tokens and paste it into your terminal window.
# If you are in the spartan directory, move UP!!!
cd ..
# create your project folder
mkdir spartan-supabase
# move into the new folder
cd spartan-supabase
# start a new git repository — important, don't skip this step
git initsupabase initand
supabase startI had Docker already installed and running. However, my setup is not compatible with the config Supabase expects by default. I ran the following command to get it to work for now:
DOCKER_HOST=unix:///Users/[YOUR_USER_ACCOUNT_NAME]/.docker/run/docker.sock supabase startFor more info, see this issue on GitHub.
The previous step can take a while as all the docker images must be downloaded first. However, once everything completes, you will see a console output that looks like this:
Started Supabase local development setup.
API URL: http://localhost:54321
DB URL: postgresql://postgres:postgres@localhost:54322/postgres
Studio URL: http://localhost:54323
Inbucket URL: http://localhost:54324
anon key: eyJh......
service_role key: eyJh......
Take your cyber-security hat off for a minute (we are working locally after all) and copy the connection string:
postgresql://postgres:postgres@localhost:54322/postgres
Add a .env file at the root of your Nx workspace and add the connection string like so:
# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
DATABASE_URL="postgresql://postgres:postgres@localhost:54322/postgres?schema=public"
Perfect! You should be able to connect to your local Supabase Postgres instance now!
You can stop the guide when you get to "Database Migrations". We will take care of this in the next step!
Now that we have successfully set up our DB, we need to set up our database schema. Prisma makes this super easy!!
- We can push the schema defined in our
schema.prismafile to our DB running
yarn prisma db push- Finally, we create our Prisma client by running
yarn prisma generateThat's it! Now our DB should be all set up and ready to go!
Run
yarn nx serve analog-trpcfor a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run yarn nx graph to see a diagram of the dependencies of the projects.
Reach out to me on Twitter or GitHub if you run into any issues.