how to intergrate ejuice direct to shopify

just when you thought there wouldn't be,another javascript framework along comes,another javascript framework this one's,called hydrogen and it's a react-based,framework for building custom e-commerce,sites using shopify it's focused on,server-side rendering kind of like next,js but comes with a bunch of pre-defined,components and hooks to manage the data,and ui of a storefront it was just,announced yesterday so let's put it to,the test and see if it's something we,would actually want to use but first,make sure to hit the like button and,subscribe and let me know what you think,about hydrogen in the comments your,first question might be what is the,point of hydrogen we already have next,js and gatsby both of which have,e-commerce templates and then shopify,itself already has a ton of e-commerce,themes so where exactly does hydrogen,come in well if you've ever built an,e-commerce site from scratch you'll know,that it's extremely difficult and that's,why platforms like shopify bigcommerce,and squarespace are very popular but at,the same time when you use a platform,like that your site has a tendency to,feel like a cookie cutter template and,it can be very hard to customize it,enough to break out of that the cool,thing about shopify is that it has a,graphql api allowing you to use it in a,headless way so hydrogen basically,provides a streamlined way to get a,server rendered frontend app up and,running that connects to your shopify,backend with minimal effort in other,words it provides a starting point for,building fully customizable storefronts,it's kind of like the ruby on rails for,shopify development and i only say that,because shopify itself was built with,ruby on rails now let's take a look at,the developer experience the website is,awesome and i actually really like the,name hydrogen it's not as cool as,prometheum but still way better than,arsenic create a new app by running npx,create hydrogen app when you open it,you'll see a project configured with a,lot of stuff here the starter template,it provides you with is definitely,opinionated you'll notice a shopify,config file you can swap out your own,shopify info here to use your own,products the next thing to notice is a v,config file it uses beat as the build,tool which i really like because it's,minimal easy to use and fast it also,comes with tailwind by default which i,think is an interesting choice i like,tailwind but at the same time it's,pretty polarizing and i don't think a,lot of people will actually want,tailwind i think plain css would have,been a better default but i can always,just go and build my own javascript,framework for something like that now,let's take a look at the server.js file,as you can see a hydrogen app is just an,expressjs app with some hydrogen,middleware and it even includes a docker,file that will run the server when you,deploy your app to production now the,application code itself is contained in,the source directory inside of which,you'll see a directory for components,and pages if we open components you'll,notice that some components end in dot,client while others end in dot server,that's because the framework is,leveraging server components in react i,talked about server components in my,recent next.js video but basically,they're just react components that can,fetch data and be rendered to plain html,on the server if we take a look at one,like the default seo component you can,see here that it makes a query to the,shopify graphql api but that query will,happen on the server allowing search,engine bots and social media link bots,to understand the content on the page,now one thing that's interesting here is,that there are a ton of pre-built,components in the framework that's a bit,unusual because most frameworks aren't,really concerned about the ui but,hydrogen feels more like a cross between,a template and a framework like you have,components for a shopping cart which you,can then go in and customize as needed,personally i feel a bit overwhelmed,looking at all these components but it's,just in developer preview and i imagine,they'll have a more minimal template in,the future now let's head over to the,pages directory which works just like,next js where the structure of the pages,determine the actual routes or urls in,the application i like this approach and,it's a lot easier than trying to,configure something like react router,what you'll notice in these pages is,that they use a custom hook from,hydrogen called use shop query the hook,takes a graphql query and will,automatically fetch that data from the,shopify api that makes it very clear and,easy to access the data that you need,for the ui and once again it's rendered,on the server giving you a search engine,friendly web app which is extremely,important for ecommerce now let's move,into my final analysis overall i think,hydrogen looks awesome primarily because,it looks very similar to next.js i think,the starting point is a little too,complex but i'm guessing they'll have,multiple different templates in the,future or maybe a cli where you can pick,and choose the features that you want,kind of like nuxjs and the vue ecosystem,i think my biggest question here is why,not just build this on top of next js,rather than build yet another javascript,framework,oh wait a second i figured it out,shopify will eventually have its own,hosting service called oxygen i'm not,sure if that'll be free or paid but it,looks like they're creating a model,similar to versailles where they provide,an open source framework that funnels,you into their own hosting service,there's nothing wrong with that just,something to be aware of what's more,interesting to me is that react server,components are going to make it way,easier for anybody to just create a,server rendered react app without,needing to rely on a bunch of weird,abstractions in the near future you,might just be able to build a simple,react app with server components then,deploy it to a node.js server and that,could lead to more javascript frameworks,like hydrogen that focus on domain,specific problems i'm going to go ahead,and wrap things up there let me know,what you think about hydrogen in the,comments thanks for watching and i will,see you in the next one

Congratulation! You bave finally finished reading how to intergrate ejuice direct to shopify and believe you bave enougb understending how to intergrate ejuice direct to shopify

Come on and read the rest of the article!