In this guide, you’ll learn:
How to add “Login with GitHub” to your Shopify Remix app.
How to deploy your Shopify Remix app on Render by connecting a GitHub repository.
How to generate a URL for your Render service.
1. Create a Shopify Remix App
If you haven’t already created a Shopify Remix app, run the following command:
npx create-shopify-app@latest --template remix --name my-shopify-app
cd my-shopify-app
This will generate a Remix-based Shopify app. For more detail checkout our blog Create a Shopify App using Remix Template
2. Deploying Your Shopify Remix App on Render
Step 1: Push Your Code to GitHub
If your project isn’t already on GitHub, run:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/your-username/your-repo.git
git push -u origin main
Step 2: Connect GitHub to Render
- Go to Render.
- Click “New Web Service“.
- Select “Connect GitHub”, then authorize and choose your Shopify Remix app repository.
Step 3: Configure Environment Variables
- In Render, go to “Settings” → “Environment”.
- Add the following environment variables:
- SHOPIFY_API_KEY → your-shopify-api-key
- SHOPIFY_API_SECRET → your-shopify-api-secret
- SHOPIFY_SCOPES → read_products,write_products
- SHOPIFY_APP_URL → https://your-app-name.onrender.com
- GITHUB_CLIENT_ID → your-github-client-id
- GITHUB_CLIENT_SECRET → your-github-client-secret
Step 4: Deploy & Test
- Click “Deploy”, and Render will automatically build your app.
- Visit your Render service URL (e.g., https://your-app-name.onrender.com).
- Test “Login with GitHub”.
3. Render’s Free Trial and Pricing Plans
Render offers a free plan with limited resources for small projects and personal apps.
- Free Plan: Includes 512MB RAM and automatic shutdown after 15 minutes of inactivity.
- Starter Plan ($7/month): Always-on services with more resources.
- Pro & Enterprise Plans: More power, scaling, and custom pricing.
For details, visit Render Pricing.
4. Generating a URL for Your Render Service
Once deployed, Render provides a default URL like:
https://your-app-name.onrender.com
Customizing Your URL
- Go to “Settings” → “Custom Domains”.
- Add your custom domain (e.g., myshopifyapp.com).
- Update your DNS provider with Render’s CNAME record.
- Wait for propagation, and your app will be accessible via your domain!
Conclusion
You now have a Shopify Remix app with a GitHub login, deployed on Render, and running with a custom URL!
Click here to check our blog on deploying the shopify app on Fly.io Server.