00:02
All right, so before we change anything
00:06
inside of our project,
00:07
let's go ahead and jump into our terminal
00:09
and boot it up and see what it looks like.
00:10
So npm run dev, we'll get our server up and running.
00:13
So let's go ahead and run that.
00:15
All right, we can click on the server address right here
00:17
by holding command and clicking it.
00:19
And it opens up our application inside of our browser
00:21
at localhost and the default port of 3333.
00:25
And sweet, so we can see that our application's up running
00:27
and working a-okay.
00:28
As a next step, let's go ahead and get
00:30
the core dependencies of our application installed.
00:32
So that's gonna be tail and CSS, shodcm-view,
00:35
which is our view component library.
00:36
And then on top of that, since shodcm-view
00:39
puts the components directly inside of our project,
00:41
we'll go ahead and incorporate an automatic
00:43
component import and registration step
00:45
within our project flow so that we don't have to worry
00:47
about importing them every time that we wanna use a component.
00:50
So to start out with, I have a secondary tab
00:52
open up here for shodcm-view.
00:53
You can find the documentation at shodcm-view.com.
00:56
And you can find the installation instructions
00:58
that we'll be following by clicking getting started
01:00
and going to the install tab.
01:02
AdonisJS uses Vite, so we will be using
01:04
the Vite instruction steps.
01:06
And step one of their instructions has you create
01:08
a brand new project.
01:09
Well, we already have a project that we're working within,
01:11
so we're just gonna skip straight to step two,
01:13
which is getting tail and CSS installed.
01:15
So we can go ahead and give that command there a copy
01:17
and jump back into our terminal, stop our server,
01:20
clear that out, and paste that command in.
01:22
Awesome, so that installed a-okay.
01:24
We can go ahead and clear that out as well.
01:26
And next, we're gonna want to jump into our project.
01:27
So I'm gonna hide my browser away and jump back into here,
01:30
go into our Vite config.
01:31
We'll see a red squiggly just because all of this
01:33
is on one line.
01:34
If we give our project a save there,
01:35
and you have ESLint configured,
01:37
it will go ahead and run the fix for that
01:38
to add new lines for each of those.
01:41
What we need to do now is set up Tailwind
01:42
and AutoPrefixer, so we can do that by doing CSS,
01:45
providing an object inside of there.
01:47
Tailwind and AutoPrefixer are for post-CSS,
01:49
which we will be using and comes pre-installed with Vite.
01:52
So we can go ahead and specify a configuration
01:54
for that right here.
01:55
And specifically, we want to add them as plugins.
01:58
So we'll add a plugins array there as well.
02:00
We're going to want to use the Tailwind plugin
02:03
as well as the AutoPrefixer plugin there.
02:05
And you'll see that neither of those auto-imported for me.
02:08
So I'm gonna jump up to the top of my file
02:10
and import Tailwind from TailwindCSS
02:13
and import AutoPrefixer from AutoPrefixer.
02:18
Give that a save to fix our squigglies.
02:20
And there we go.
02:21
Out of the box, AdonisJS and its Inertia Starter Kit
02:23
started us with an Inertia plugin
02:25
that specified that we do want to use SSR,
02:28
the Vue plugin.
02:29
So if you're using Vue, that will be there,
02:31
and your traditional AdonisJS plugin
02:33
that comes with any AdonisJS project.
02:35
The resolve alias right down here
02:37
is going to allow us to import files
02:39
from the Inertia directory using a alias of tilde.
02:43
So for example, up here in this comment,
02:45
let's say we wanted to import something
02:46
from Inertia components header.
02:48
We would be able to do that in Vue via import header
02:52
from your string to the tilde to specify this alias slash.
02:56
And now we're already looking
02:57
inside of our Inertia directory.
02:59
So we would just need to do components/header.vue there
03:03
to import that file prefix that one example there as well.
03:06
As a heads up, if you are looking at the shodcm-vue,
03:08
if we scroll down a little bit,
03:09
they use an at character for their alias.
03:11
We're going to stick with a tilde.
03:12
The differentiation there doesn't really matter at all.
03:14
Either one will get the job done.
03:15
All right, let's hide that back away.
03:16
This resolve alias is also defined by default
03:19
inside of our Inertia TS config directory right here
03:22
with the paths under our compile options.
03:25
So if you do change that to say the at character instead,
03:29
you want to make that change here as well.
03:31
We're sticking with the defaults of the Inertia starter kit.
03:33
So we will leave those as is.
03:35
All right, so our V config should be all set up.
03:37
shodcm-vue comes with its own configuration step
03:40
that's going to alter some things inside of a project.
03:43
So we're going to want to jump inside of our CSS file
03:45
inside of our Inertia directory
03:47
and just go ahead and delete this out
03:48
because it's going to add one in for us automatically.
03:51
So we'll delete that there and move the trash for right now.
03:54
Once we've deleted that,
03:55
we can jump back inside of our terminal.
03:56
Make sure you're at the root of your application there.
03:58
And let's run shodcm-vue's configuration command,
04:01
mpx shodcm-vue at latest init.
04:06
We can hit enter to start this.
04:07
And it's going to walk us through some questions
04:09
to determine how we want it configured.
04:11
So we are using TypeScript here, so we'll hit yes for that.
04:14
Out of these options, we're using Vite,
04:15
so we will move forward with Vite there.
04:17
We'll go ahead and stick with just the default style.
04:19
This is really asking which flavor of gray
04:22
you would like to use with TailwindCSS.
04:24
I tend to stick with Slate, so I'll be going with that.
04:26
This is inconsequential,
04:27
so feel free to select whichever one you would prefer.
04:29
Then it's going to ask where our tsconfig file is located.
04:32
Now, this is going to be our Inertia tsconfig
04:35
because shodcm-vue is specific to our Vue application.
04:38
So we don't want to point it to our root tsconfig
04:41
like the default is here,
04:42
but instead to our Inertia tsconfig.
04:45
So we'll do ./inertia/tsconfig.json
04:50
to ensure that it is looking inside of our Inertia directory
04:52
for that tsconfig.
04:54
Then it's going to ask where our global CSS file is.
04:56
This is that file that we just deleted
04:58
out of our Inertia CSS directory.
05:00
So we can point it to Inertia CSS,
05:03
and that file is called app.css.
05:05
So we can hit enter there as well.
05:07
And it'll ask us whether or not we want to use CSS variables.
05:09
This will set up our Tailwind configuration
05:12
in a way where it will use CSS variables,
05:14
which I tend to prefer.
05:15
So I will hit yes here.
05:16
Then it's going to ask where we want
05:17
our Tailwind config to be located.
05:19
Default is a-okay there.
05:21
We can have that at the root of our application.
05:23
And here's an important distinction
05:24
that's going to ask us to configure our import alias.
05:27
Their default is using the @ character.
05:29
The Inertia starter kit uses a tilde instead.
05:32
So we'll overwrite this instead of using the @ character
05:34
with tilde/components there.
05:37
Same thing here for utilities, tilde/,
05:40
and we can put that at lib/utils,
05:42
sticking with their defaults there for everything
05:44
except for the @ character.
05:45
We're replacing that with a tilde.
05:47
Then lastly, we'll have a go ahead
05:48
and write everything that we've configured here
05:49
to a components.json file.
05:51
So we'll hit yes for that.
05:52
Then it's going to set all of this up for us.
05:54
And once it says success,
05:56
everything should be ready to go for us.
05:57
So in the background here,
05:58
in our side of our text editor,
05:59
we should see a couple of things got added in.
06:01
First, we now have a CSS file back inside of our application
06:05
with the same name that we were using originally.
06:07
So we don't need to change any of our configuration there.
06:09
With this, it's added the Tailwind directives,
06:11
as well as set it up in a way
06:12
where we use CSS variables for our colors.
06:15
And these are then passed into our Tailwind configuration.
06:18
And you can see it's also using layers here as well
06:20
to designate priority on certain things.
06:23
We now also have a components directory.
06:25
This is where it will install our shotCN components
06:28
as we install them individually.
06:30
It will put them inside of a subdirectory
06:31
inside of components called UI.
06:33
And we also now have a lib with utilities added in.
06:37
This is really just a single function of CN
06:39
that's just going to merge classes together.
06:42
I'm not sure if we actually ever make use of this,
06:44
but this is something that shotCN view uses internally
06:47
inside of the components as well.
06:49
Okay, so we can collapse those back down,
06:51
scroll down a little bit further,
06:52
and we should see in addition to those two files,
06:54
a components.json that just kind of holds
06:57
our shotCN configuration inside of it,
06:59
specifying that we are using TypeScript,
07:01
that we're using the default style,
07:02
where our TS config is, the Tailwind config,
07:05
what framework we're using, and the aliases there as well.
07:07
And then lastly, our Tailwind config,
07:09
which has now been added.
07:10
If you're using ESLint,
07:11
you can go ahead and give that a save
07:12
or replace all of the double quotes with single quotes.
07:14
And then you can see that it sets our theme up
07:16
and it extends our colors
07:17
so that we are using CSS variables for all of those.
07:20
And it also adds in their animate plugin there
07:22
that they use as well.
07:23
So you can tell by the red squigglies here
07:25
that we definitely want to change some things
07:26
inside of here, but most importantly,
07:28
we're going to want to make sure that our content is updated
07:30
because currently this thinks that we're working off
07:32
of the root of our project, which we are not.
07:34
All of our view-based stuff is going to be
07:36
specifically inside of our inertia directory.
07:38
So we want to update that accordingly.
07:40
We can also simplify their strings there
07:41
a little bit as well.
07:42
So we can do ./inertia,
07:44
have this consider the pages directory,
07:47
components directory, app, and layouts directory
07:50
inside of our inertia directory.
07:51
And then any sub folder and any sub file
07:54
inside of those folders, ending with TS, TSX, or view.
07:59
And that should account for most use cases here.
08:02
We can go ahead and update this to account
08:03
for our EdgeJS pages, should we add any as well.
08:06
So ./resources/views,
08:09
./.in any Edge file there.
08:13
Cool.
08:14
And then we are using modules instead of common.js.
08:17
So we just need to update our imports
08:19
and our exports accordingly.
08:21
So export default there.
08:23
And then instead of using require,
08:25
we want to import animate from TailwindCSS animate.
08:30
There we go.
08:31
And that should be all of the red squigglies
08:32
that we had inside of this file.
08:34
Looks good.
08:35
So let's go ahead and give it all a test
08:36
by installing our first component.
08:37
Now, if you are using Visual Studio Code,
08:39
there is a plugin that we can use to make this easier.
08:42
So we can search shodcn-view.
08:46
And you should see this right here by Selman Dev.
08:49
And give that an install.
08:50
And what this will allow us to do
08:51
is use the command palette to install components as needed.
08:55
So if we hide both these files away
08:58
and let's do command shift P, type in shodcn/view,
09:02
you should see all of the applicable commands
09:04
that this plugin has added.
09:05
We can add a new component.
09:07
We can add multiple components,
09:08
open a documentation and reload the components list there.
09:11
What we want to do right now is install our first component.
09:13
So we will click on install new components
09:16
and let's just search for a button
09:18
as that's a typical use case there.
09:20
What that's going to do is it's going to run
09:21
npx shodcn-view at latest,
09:23
add button to install that inside of our project for us.
09:26
So once that's run,
09:27
we can go ahead and close out that terminal altogether.
09:30
And now if we look inside of our inertia components UI
09:33
directory, we should see a UI
09:35
and a button directory within there
09:37
that has our shodcn button
09:39
as well as an index file inside of there.
09:41
So it has successfully installed our button.
09:43
What we can do is jump inside of our page,
09:45
go inside of our home.view page.
09:47
This is the page that's rendered out
09:48
whenever we boot our application
09:49
and open it up inside of the browser.
09:51
And let's just drop a button on here.
09:53
So we can do import.
09:54
This is not an export default, but rather a named export.
09:57
So we'll import button from tilde
09:59
to use our alias slash components slash UI slash button.
10:05
And that index file inside of the button directory
10:07
that we saw just allows us to reach directly
10:09
for the button directory as a whole,
10:10
rather than a specific file inside of there.
10:13
So now we can make use of our button by doing button.
10:15
And we can just do example button for the actual text.
10:19
Give that a save.
10:20
Let's jump back inside of our terminal,
10:22
clear that out and npm run dev to boot everything back up.
10:25
We can command click on our server address
10:27
to open it back up.
10:28
And there we go.
10:29
Our example button looks like a shodcn button
10:31
as it's supposed to.
10:32
So everything there is working a-okay.
10:34
Furthermore, all of the initial styles
10:36
that we had saw whenever we booted our application
10:38
up initially are now gone
10:39
because our app.css file has been deleted and overwritten.
10:42
Cool, so last thing to take care of here
10:44
that I promised at the beginning of this lesson
10:45
is automatic imports so that we don't have to add
10:47
that button import or any other imports
10:49
for the components that we have installed
10:51
as we're working on things.
10:52
So let's hide that back away.
10:53
Stop our server here for a moment, clear that out.
10:56
And let's do npm i hyphen capital D
10:59
to install this as a dev dependency.
11:01
Unplugin hyphen view hyphen components.
11:04
Let's install that.
11:05
And this is the package that's going to allow us
11:07
to automatically import components
11:09
without actually having to write the import ourselves.
11:12
It will detect that we're making use of the component
11:14
and register it inside of a file
11:15
that will then be used whenever we build our final assets.
11:18
So that installed successfully,
11:20
we can go ahead and clear that out,
11:21
jump back into our text editor
11:22
and specifically go down to our V configuration
11:24
because we need to wire this up.
11:26
We can import the components plugin
11:29
from unplugin view components.
11:31
And we want to use specifically their V component plugin.
11:34
So with that defined,
11:35
what we want to do is add that
11:37
to our V configuration plugins.
11:39
So underneath our AdonisJS plugin here,
11:41
we can add components,
11:43
call this as a function and provide it in some options.
11:46
First, what we're going to want to do
11:47
is tell it which directories to look for.
11:49
We only have a single directory here,
11:51
which is our inertia components directory.
11:53
Everything inside of there, we want it to consider
11:55
so that as we make use of it inside of our pages
11:57
or even other components,
11:59
it will map those imports automatically for us
12:01
so that we don't need to make them manually.
12:02
Then since we are using TypeScript
12:04
and we are using Visual Studio Code,
12:06
which supports this configuration option,
12:08
we'll specify DTS and set that to true.
12:11
This DTS option tells the unplug and view components
12:14
that we want to generate out
12:15
a TypeScript friendly configuration
12:17
of our component mappings,
12:19
which essentially is going to add TypeScript support
12:21
to these automatic imports for us.
12:23
Now this may or may not work with your text editor.
12:25
It does work with Visual Studio Code.
12:27
So we are okay here to go ahead and use it.
12:30
With that defined,
12:31
let's go ahead and jump inside of our home page again,
12:33
and let's just remove the import altogether.
12:36
With that import gone,
12:37
we're still going to make use of our button,
12:38
but now that unplug and view components plugin
12:40
is going to automatically detect
12:42
that we're making use of a button component,
12:44
map that back to the actual component that we have
12:46
inside of our components directory
12:48
and automatically register it for us
12:50
whenever we start our server.
12:51
So let's jump back into our terminal,
12:53
npm run dev to start our server.
12:55
And whenever we did that,
12:56
you should see that a components.d.ts
12:58
got added to the root of our project.
13:00
If we open this up real quick,
13:01
you'll see that it detected
13:02
that we're making use of our button
13:03
and it registered to import for it.
13:05
So if we open our browser back up,
13:07
you see our page just refreshed there
13:09
and we still see our button.
13:10
Let's do a sanity hard refresh here as well.
13:12
And we still see our button.
13:14
So everything there is working a-okay.
13:16
So we now have Tailwind configured,
13:17
ShotCM view configured,
13:19
and we have automatic imports
13:20
from our components directory configured as well.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!