what is shopify hydrogen

hey everyone jan here codingwithyen.com,so hydrogen 1.0 and oxygen are both,brand new and have just been released to,the public,and if you guys are curious right now,today we'll go over what they are why,and when to use them in the first place,and also how to practically get started,and i really hope you find some value in,this so let's have a look alright so,then let's get started by answering the,what and besides being the most common,element in the entire universe hydrogen,is also a react-based framework for,building custom shopify powered,storefronts,and assuming that you roughly know what,react is and you roughly know how,shopify works the question would be what,is a custom storefront and just to catch,everyone up here really quick the way,that shopify websites are usually,structured is that on one hand we have,the back end so that's where we manage,products pages content,we have our orders payment settings and,so forth,and on the other hand we have the front,end which is usually built by using a,theme yeah so this is like the actual,website that visitors would see,so that's where we showcase our products,and we could say that a theme is kind of,like the interface between website,visitors and then all these ecommerce,features okay now in most cases when,people are getting started this,combination of backend and then a theme,works perfectly fine but there can be,certain circumstances where a theme is,just not enough,and we will get into the why here in a,second but for now just imagine that you,would want to sell groceries through a,smart fridge,like where would you even start using a,theme in that case right doesn't make,any sense so here you would need,something custom coded namely a custom,storefront,so that's pretty much the whole concept,you have a custom place where you want,to showcase your products but you still,want to use the shopify backend features,like managing inventory orders payments,because it's like so much easier to,leverage this existing infrastructure as,opposed to building everything from,scratch,and the way you connect these two and,how you exchange data is just through,the shopify api,alright now to be fair the smart fridge,was a pretty obvious example of why,someone would need a custom storefront,and you could make the same case for,in-app purchases or in-game purchases,where using a normal theme just wouldn't,make any sense right,however in the beginning we said that,hydrogen is a react-based framework and,react-based websites,look at least somewhat similar to normal,websites you could build with a theme,and at first glance you might not even,be able to tell the difference between a,theme-based website or a react-based,website so let's talk about some of the,reasons why you might want to consider,using hydrogen in the first place and,when i think about this three different,areas or three different things,immediately come to mind,so first let's touch on theme,limitations or to be more precise,performance,i guess that's pretty well known i guess,we've all been there before,and yeah maybe i should backtrack here,for a second because some of you might,say the new dawn theme is super fast and,yeah that's true i'm also a big fan of,dawn but as soon as you add third-party,libraries or some apps that inject code,or some data-heavy content you want to,display that will still significantly,slow down your store and i guess we've,all heard about the studies conducted by,google before that over 50 of users on,mobile will just leave the website right,away if it doesn't load in less than,three seconds and yeah since it's google,i just have to imagine i have to believe,they know what they're talking about,so the bottom line faster loading times,will lead to higher conversion rates,will improve the overall user experience,and it can also help with seo rankings,so,that in and of itself can also have,direct impact on revenue all right the,second point would be design freedom and,talents,because as a theme developer you always,operate within certain boundaries you,have to look for existing liquid objects,you have to find work around sometimes,but if you build on hydrogen design,possibilities are pretty much endless,you can structure the website in any way,you want you can build it as custom as,you want,and since we're talking about a,react-based website,there are also a lot more developers out,there than if you would just be,searching for pure shopify developers,and that's a pretty interesting angle in,terms of hr or hiring people because,then you might be able to augment your,team with very qualified people from,outside the space okay the third and,last point would then be development,costs and speed and this one is,interesting because building a custom,storefront by utilizing the shopify api,has actually always been possible,but it was also very time consuming and,came with a variety of technical,challenges so that made it very,expensive,and now by providing these ready-to-use,templates and pre-built ui components,hydrogen mitigates some of that by,accelerating the development process and,that just makes it less expensive and,more accessible overall all right now,let's say you have a project where you,want to use hydrogen or you just want to,play around with it and test things out,then the question becomes how do you,practically get started let's talk about,that so first of all it really helps to,know the basics of react and also,graphqa,and then in terms of the technical,things that would be helpful or needed,they would include a package manager,such as yarn or npm,installed on your local computer,a github account,a shopify partner account,a store you want to connect and ideally,that store would also have shopify plus,permissions because then you can use,oxygen as a super simple hosting,solution for your hydrogen pages i will,also show you that in this video but,that being said you can still use,hydrogen on any other plan as well but,then you would just need to figure out,your own hosting and connect the store,manually more of that in a second and,then lastly you also might want to,install the shopify cli because it has,some useful commands to speed up the,development process and for everything,that i just mentioned of course you will,find links to the best resources in the,video description okay so then let's,move over to my development store and,this one is special because it has,shopify plus permissions which basically,allows you to install oxygen as a,hosting solution,and in order to do that you will just go,to the sales channels here,and then,all recommended sales channels and you,would find hydrogen right here otherwise,you could also search that in the app,store but as i said you will only find,that if you're operating on shopify plus,and in a second i will also show you how,to create a hydrogen app from scratch,without that,but yeah for now let's go the easy route,and just add hydrogen right here,so then we get redirected to this,welcome screen here and here we gotta,connect our github account,so here i'm already logged in let's just,authorize shopify,yes,for simplicity i would just give access,to all repositories here,so now it seems like my coding with yarn,github account was successfully,connected,and then let's enter a repository name,for this case we can just use hydrogen,test,okay and then create a new repository,here,okay now this has finished so the,hydrogen storefront was successfully,created,let me also show you what happened,behind the scenes on github,so we basically have this new repository,here hydrogen test,and it pretty much just duplicated the,demo store templates for hydrogen which,you can also clone or duplicate,if you start a project from scratch,without the integration without the,oxygen sales channel integration,but the main benefit now is that the,hydrogen config.js already points to my,development store let me show you that,so here points to my development store,coding with the undeath and here we have,the access token and by the way,never share your access token publicly,and particularly not on youtube so i'm,just going to blow this out or delete,this afterwards,but yeah you get the idea,okay so then back in the hydrogen,oxygen dashboard you can see that i have,one site in production so that's the,template or the project we just created,and we already have a preview link here,but let me show you what this demo store,template looks like it's pretty much the,snowboard store here,but interestingly enough these three,snowboards here,are already pulled from my demo store so,these are the only active products i,have in there i created them for demo,purpose let me actually show you that so,if we go back to the dashboard and then,products,let's just quickly filter for all the,active products um you can see that i,have the snowboard one two and three,right here and these are the only active,products in the store yeah so that's why,it's so convenient to use this sales,channel integration or this hydrogen,integration because it already takes,care of connecting the store and the,data is already getting pulled,automatically how awesome is that,okay so far so good and now let's see,how we can make some customizations to,the new hydrogen storefront,in order to do that we find these,instructions here basically four,different commands we first of all need,to clone the repository then navigate,into that new folder,install all the dependencies and then,run our dev server so next i'm going to,bring up visual studio code so i already,have that right here and then on my,desktop i have a new folder called,development,i brought that up in visual studio code,and next i want to bring up the terminal,so you can press ctrl shift np,and then view toggle terminal okay there,we go,and to clone this repository i'm,actually going to use the github ssh,link right here so just go to code and,then ssh,because with vs code i'm logged into a,different github account,and i only have ssh keys set up,so let's do git clone and then this,address here,okay so now we have this new folder,right here let's navigate into that,change directory,hydrogen,okay,and then we can use yarn to install the,dependencies,so yarn install,that's gonna take a bit,so i'm just gonna pause the recording,and wait for that to finish,so here we are back again and now all,the dependencies have been installed,so now we should be able to run yarn,dev,here we get this local host address so,let's just open that,and here we should see the same,storefront but now running on our local,dev server perfect,now if you want to change anything we,can now just go into the files and then,bring up the source folder,here you have one for the normal,components and one for the route,components so route components basically,determine what is shown on every page,and you will also notice,that we have a lot of server-side,rendering in hydrogen but maybe we,should have a follow-up video on that in,depth but if for example we just bring,up the product route here,uh you could see that,this is how the page is structured so we,send the layout seo information page,header and then,in the section we have the product grid,so this is used on all the product,collections,and the suspense tag here is also pretty,interesting because it allows for,streaming server side rendering so,in that case the page layout the seo,information the page header gets sent,right away,and the page becomes interactive super,fast and then the products load yeah,once they're ready basically and it's,also part of the reason why hydrogen is,so fast,and if you make any changes here at the,end you just have to push them to github,because then they will also be synced to,oxygen,and if you don't use that you would have,to do the same with your own hosting,now the last question i want to answer,in this first intro video is how would,you even get started if you can't use,the hydrogen sales channel or the oxygen,sales channel,like if you want to create all the files,from scratch and actually that's super,easy you just have to use one single,command and that's called yarn,create add shopify,hydrogen,hit enter,you would need to enter a name for your,site for now i'm just going to use the,default,here we can also select the template,either the demo store template that we,just used it just wouldn't be connected,to a development store yet so we would,have to do that manually or the hello,world template which is a little more,bare bone,if you want to start from a blank slate,um i think i can include a screenshot of,that right here,okay but if we would go with the demo,store you would just hit enter and i,would clone the same repository with all,the files that we saw before but we,would need to figure out our own hosting,but you can still use this in the local,development environment if you just run,yarn dev and it's also mentioned right,here,all right and that's it for this first,video on how to get started with shopify,hydrogen and i'm sure this was a ton of,information to take in it also took me,quite a while to summarize everything,for you so i really hope you found some,value in this and please let me know in,the comments what you would like to,learn more about then we can have,dedicated follow-up videos and also make,sure to check out the resources in the,description,and beyond that just have an amazing day,and make sure to subscribe because then,i'm gonna catch you in the next bye

Congratulation! You bave finally finished reading what is shopify hydrogen and believe you bave enougb understending what is shopify hydrogen

Come on and read the rest of the article!