Git Product home page Git Product logo

hydrogen-2's Introduction

Hydrogen v2

This directory is a brief example of a Hydrogen v2 storefront that can be deployed to Vercel with zero configuration.

Deploy Your Own

Deploy with Vercel

Live Example: https://hydrogen-v2-template.vercel.app

You can also deploy using the Vercel CLI:

npm i -g vercel
vercel

Hydrogen is Shopify’s stack for headless commerce. Hydrogen is designed to dovetail with Remix, Shopify’s full stack web framework. This template contains a minimal setup of components, queries and tooling to get started with Hydrogen.

Check out Hydrogen docs Get familiar with Remix

What's included

  • Remix
  • Hydrogen
  • Oxygen
  • Shopify CLI
  • ESLint
  • Prettier
  • GraphQL generator
  • TypeScript and JavaScript flavors
  • Minimal setup of components and routes

Environment Variables

Using Hydrogen requires a few environment variables to be set in order to properly connect to Shopify. For this template, the minimal set of environment variables are defined in the vercel.json file, which will be applied to the deployment when deployed to Vercel. However, you should migrate these default environment variables to your Project's Environment Variables configuration in the Vercel dashboard (or using the vc env commands), and update them according to your needs (also change the SESSION_SECRET to your own value). Once that is done, delete the vercel.json file from your project to prevent the environment variables defined there from taking precedence.

Local development

Rename the .env.example file to .env in order for the Shopify dev server to use those environment variables during local development. If you defined/modified additional environment variables based on the section above, be sure to apply those changes in your .env file as well.

Then run the following commands:

npm install
npm run dev

hydrogen-2's People

Contributors

jpjuliao avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.