PETAL stack setup (Phoenix 1.6, Elixir, Tailwindcss, Alpinejs, LiveView)

hi my name is ram and in this video we're going to set up pdl stack application pdl stands for phoenix elixir tell me css alpine gs i think and live view so but basically we have the phoenix elixir stack with the alpine and television css setup inside of it that's one of my favorite stacks nowadays and that's going to be the stylish we're going to use this boilerplate stuff we're going to use later in all the episodes connected to this type of technology and very important thing that we need to note is that we're using phoenix 1.6 and that's important because in this version the way that phoenix handles the assets quite different it's changed quite a bit so instead of using webpack now it uses the es build so that's very important pay attention to what version you use and let's get down to it so of course the first thing that you need to do is install everything that you need you need to install elixir you need to install phoenix framework all of this stuff and you can just follow the documentation to do that we're not going to do that with you we're going to jump right into the terminal and start our application so we generate application with makes phx new and we call it petrol okay and we're gonna install all the dependencies right away okay it's done okay so the first thing that i want to do is of course to initialize the repository etc but we're gonna do it very in very nerdy stuff we're gonna use tmax and neovim for that there is no reason you need to do that but it's just kind of fun so we're going to cd into this bit of stack and we're going to open the and theme and here i'm just running the lazy git so the first thing that i want to do is of course create new repository yeah i want to create new repository then i'm going would add everything here and then commit with initial commit how cool is that right wow it's just it just wow of course you can do everything just in your terminal you do the getting it first then you do the git at everything and then you have the commit dash m with the message so cool we've done that let's return back to our new theme so the first thing that we want to do is we go into the dev config dev file and here i want to change the credentials for the database so i'm using dev dev in my local postgresql database so you can use anything that you want that you use on your machine so after that we can just run command a mix act or create to create the database but i've already have it created yeah it's already been created so nothing good for me so the next thing that we want to do so if we go to the file browser you will see this folder assets and that's where phoenix handles all the assets inside of this folder so inside of this folder we're going to you we're going to work with npm as well and that's why i prefer to create another tab in your terminal or in this particular case i'm going to use another window that i'm going to just rename right away to the assets because i'm going to do here in petal assets folder so this way i'm writing my commands right here because very often i just run npm commands from the root of the project and it's very infuriating sometimes so here i'm going to use npm init dash y just to create the package.json file and inside of it let's install with save alpine.js and of course we can also install needs to install the tailwind css the l wind css but also the packages and tools that we're going to use to actually compile our tailwind stuff to the cls and for that we're going to use auto prefixer and post css and also post css import plugin let's install it and we're done cool so let's start with the tailwind css setup we're going to use the pos css to compile our element and we're going to use awesome just-in-time compiler mode as well so but to do that we need to generate two files we need to generate tailwind config and post css config and of course you can do that just manually but why if you can do it automatically with npex tailwind css tailwind css command init and if you run it like this it will create only the tailwind config file but if you add the flag post css it will create both of these files perfect so now let's go to editor and let's open let's start with both css it's already have the tailwind and auto prefix included but we also use post css imports so let's add it here post css import plugin like this save it and we're done next let's go to the tailwinds tailwind config javascript file and here we'll add the jit mode here just in time compiler and for jitmod to work we need to specify the purge files as well so this way application knows where to search for this tailwind css classes that it can include into the final css so in phoenix application we have everything in lib folder under the web folder and there i just want to find any file that has the ex extension another path that you want to include here and a lot of people do is javascript because sometimes in javascript you can manipulate dom and maybe add some tailwind classes so we just want just to be safe to include everything inside of here as well in javascript files and that's it that's all that we need to do so that's the setup but that's not all that we need to do the last step in this chain so we installed everything we created post css and tailwind says uh post css config and television config files and the last thing that we need to do is go to app css file and instead of this importing this phoenix we're going to input tailwind css base as well as a couple of others component components and util utilities and it just comes right from the documentation nothing weird here but another thing that you need to do you need to go to fgs file and you do not need to import this file anymore because it will be handled by post css not by the phoenix es build system so we just remove it from here like that okay so all the configuration is done but if we run it now nothing nothing changed so let's just create a new folder here and we're gonna run a phx server just to see how it looks now so if you go to the browser and refresh it you can see there are no styling at all so we do not have any kind of tailwind css yet and of course we don't because we just set up a couple of files but we never did anything with them and you can even see that we do not have assets at css it's never been generated cool so we need to generate it and to do that we need to go to the dev dev ex so config dev excess file and go to the bottom here not to the bottom right here config panel and here we have the watchers and you can see here the es build watcher that's the washer that builds the assets by default and here we're just going to add our own one which is going to be very simple so it's going to be npx and we specify the command to generate our css and this command will be tailwind css but we need to provide several options to it the first one of course is the input so the input is going to be css app.css then of course we need to provide the output output if i learn how to type correctly and that's going to be static assets app.css that's the location of the app css file by default of course you can change it all the built assets are stored inside of pre-static and then you have your assets and if you go to the root oops if you go to the root dot html file you will see here that we use the assets app css then for the javascript assets app.js so that's where phoenix application expects files to be so that's done but then we need to also specify that we're using pos css and in development we actually want to watch for changes like this you can see here that we're using some kind of relative paths so we need to specify where we want this command to be executed and we do it with the path expand path expand and let's say that from the current directory we're going to go up to the assets folder so this way we basically execute this command inside of the assets folder so we run npm there in the assets we have if you go here you can see that we have our app css file and then we just put it up one folder into priv static assets right here cool so let's save it and let's rerun our server and see how it goes i think now it does not actually work it's not complaining about app css and if you go to the browser and refresh you will see that now we have tailwind css another cool thing is if we go back let's go to the uh to edit that and open up css but not here because it's ignored by git we're going to go to here and let's refresh it here in assets we have fcss and if we open it up you will see that it's all only 700 lines long so it just used the things that we use inside of our application and to be honest there are not so here's the alerts and here's the contest so there's nothing that we actually use for now but let's open index.html file and let's add for example here class text center like this now we actually rebuild everything and if we go back right here you can see that it appeared magically that's just in time compiler that's the beauty of it how cool is that right so all the file all the classes that we actually use will be compiled and added into the final css file cool so that's that's all for uh telling css now let's go with alpine alpine gs is much easier to set up so we're going to app gs and here let's import the alpine from alpine gs and then we need to do two things first we need to set alpine on the window and then we need to initialize it with alpine dot start and that will work on the alpine version three with alpine version two it was quite different and that's all that's all that we need to do and it should work so let's test it out so let's go back to index.html stuff we select everything and we're going to get rid of it now let's create this section with the class let's say tax blue 500 and text center like this and inside of it we're going to test the actual alpine stuff so we're going to have the p tag and if nothing works we have the doesn't work so if alpine doesn't work we just rendered this message here but if alpine works we actually want to replace this text with message some kind of message and this message we're gonna set up right here in the same place with data and we're gonna say the message is gonna be hello it works because everybody likes when like be shouted from the screen so now if you go back hello it works cool so if i reload perfect so alpine.js works and tailwind css works as well but that's not it so it works in development but it's it will be completely ignored in the production so to make it work in the production uh let's go to the mix excess file and here at the bottom of the file we have the aliases and we have the analysis like assets deploy and that's basically a chain of commands that will be run when we build our project for deployment so we have this build and we have phx digest and we want to add our own and basically oops what we want to do here is to run the command from the assets folder remember everything happens in assets so we cd into assets and then we run npm npm run deploy that's it so we do not have this command yet of course but we're going to create it in a second and also in setup we also want to run commands from the from the assets and that command will be npm install like this so now we need to create this deploy command so let's go to the package.json and here instead of test we're going to have the deploy and inside of here we're going to run basically the same command that we run in the development but we need to set up the node environment to be production and then we run tailwind css with deflectboss css because we're using pro css with the flight minify so we minify the actual results and then the same thing the input is going to be css app.css and the output will be prev as a static assets uh f.css and that's it so this command will be run when we uh run the build and uh yeah and we're gonna have our result in css file okay so let's let's commit our change and i'm just going to use lazy git here i add everything and we can meet speedel stack setup like this cool and we're done okay that's it so now we've got the pedal stack setup and we're going to use this at the starting point for for all other things that we're going to develop using this technology so i hope you liked it thank you very much for your time and see you in the next one

Channel: Rem Zolotykh

Views: 1,532

Keywords:

Id: vZBHkvTAb2U

Length: 15min 7sec (907 seconds)

Published: Wed Oct 20 2021