![]() ![]() We’ll then add the Alert component to the header on the homepage, right before the component:įinally, we’re going to adjust the header with a new color. To add a new alert banner, we open up /app/pages/home/index.jsx and add Alert and AlertIcon React components from Chakra UI to the imports: ![]() What does an example tweak to the storefront look like? To get started with adjusting PWA Kit for a new brand, let’s add a new alert banner and tweak the color scheme. Access and start adjusting the React code as needed. Once that’s done with the right values (or default values we supply for training), simply run npm start like any other Node application, and you’re all set for local development. Getting Started is as easy as running npx pwa-kit-create-app and answering a few questions about your Commerce Cloud setup. Want to see what it’s like to start building a storefront with PWA Kit? Let’s take a look. The one thing we did stretch on was embracing an open-source React Component library, where we’ve included the amazing Chakra UI, where we can reuse and contribute to base components that are focused heavily on mobile, accessibility, and opinionated ways to manage styles and themes. We’ve even gone so far as to intentionally skip traditional state management libraries like Redux, for a plain old React Hooks and Context approach, reducing what teams need to learn, manage, and deploy. Any modern web developer, even one new to your team, should be able to build, extend and deploy within minutes. See a pattern there? Combine that with the most popular build and testing frameworks ( webpack, Jest, React Testing Library), and you have a winning combo. We based the new PWA Kit on Node.js, the most popular JavaScript runtime, the React framework, the most popular single page app framework, and Express.js, the most popular JavaScript web app framework. These are ones that had large user communities that you could learn from and get help from without breaking your team or your budget. When faced with the challenge of deciding how future headless storefront experiences should be built on Commerce Cloud, we went with popular and safe, what some might call “boring,” technology choices. One of my favorite talks is Dan McKinley’s Choose Boring Technology, based on his experience at Etsy and MailChimp, where he attempts to answer “how to make developers happy.” Dan proposes that “new tech typically has more known unknowns, and many more unknown unknowns,” and therefore, “new technology choices come with a great deal of baggage.” Making “boring” technology choices to build modern storefronts This GA ushers in a new era for Commerce Cloud, where front-end storefront development is intentionally based on modern, API-first, open-sourced web approaches. With the General Availability of the Progressive Web App (PWA) Kit and Managed Runtime, our goal is to make any front-end development team feel immediately comfortable and excited about the storefront developer experience from day zero. ![]()
3 Comments
8/15/2023 01:50:00 pm
Usually I never comment on blogs but your article is so convincing that I never stop myself to say something about it. You’re doing a great job Man,Keep Working.
Reply
8/15/2023 01:50:54 pm
Friends are life. Every one has that one best friend who is so special for us.Talking about the age old problem of my friends and your friends. There is no relationship where the guy and the girl like every friend of each other.
Reply
8/15/2023 02:49:12 pm
We’ve even gone so far as to intentionally skip traditional state management libraries like Redux, for a plain old React Hooks and Context approach reducing what teams need to learn manage and deploy. Thank you for making this such an awesome post!
Reply
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |