Live Demo · Twitter
An Open Source Remix template that integrates Stripe Subscriptions, Social Authentication, Testing and a few more features. SQLite version. Deploys to Fly.io
💿
Features
- Fly app Deployment with Docker.
- Database ORM with Prisma.
- Production Ready with SQLite Database.
- GitHub Actions for Deploy on merge to Production and Staging environments.
- Healthcheck Endpoint for Fly backups Region Fallbacks.
- Styling with Tailwind.css + Tailwind Prettier-Plugin.
- End-to-End testing with Cypress.
- Unit Testing with Vitest and Testing Library.
- Local third party request mocking with MSW.
- Linting with ESLint.
- Code formatting with Prettier.
- Static Types with TypeScript.
Special Stack Features
- Authentication Ready with Remix-Auth and Socials + Twitter Strategies.
- Stripe Subscriptions with Support for multiple plans, Upgrade / Downgrade and Customer Portal.
- Support for Javascript developers with continuous updates over time based on
remix.init.
We've got a
🐘
PostgreSQL version also.
Would you like to change something? Fork it, change it and use npx create-remix --template your/repo!
Learn more about Remix Stacks.
⚡️
Quickstart
# Initialize the following template in your workspace:
npx create-remix --template dev-xo/stripe-stack
# Start dev server:
npm run dev
Done! This starts your app in development mode, rebuilding assets on file changes.
👋
Getting Started
This section will be splitted into three quick threads: Live Demo | Development | Production.
Live Demo
Template's Demo has been developed to be really simple to use, being able to show all its provided features. Let's see the workflow to test it:
-
Log In with your preferred Social.
Feel free to remove the authorized App after testing it.
-
Select a Subscription Plan.
Besides you will see real money values from Stripe Checkout, don't worry, it's absolutely safe.
-
Fill Stripe Checkout inputs with default development values.
Type
4242as much times as you can on each available Input. -
Done! We should be redirected back to our App with newly Plan already set.
Development
Understanding our development workspace will keep us productive.
▫️
Folder Structure
A solid folder structure will help our App grow healthy over time. Let's review the most important folders.
├── modules # Groups our App logic and splits it into smaller sections.
├── Stores related Components, Database interactions, Sessions, Utils etc.
├── This folder could also be called "lib", "services" etc.
├── routes
├── api # Stores Stripe Webhook Endpoint file, and any realted API calls.
├── resources # Used to call our own Server, do Redirects, update Sessions and so on.
▫️
Authentication Strategies
To provide Authentication to our App, we will need to get the API Keys from our Socials Providers. Below here you can find all template's Providers OAuth Documentations.
Once we got our Providers API Keys, we can set them into .env file.
If you are struggling on this step, feel free to contact me directly, have a look on youtube, or do a quick search on Google!.
▫️
Stripe Webhook
Let's see how we can start receiving Stripe Events to our Webhook Endpoint.
-
Install Stripe CLI
-
Keep the following command running in the background:
stripe listen --forward-to localhost:3000/api/webhook
The provided Webhook Signing Secret from the above command, has to be set in our .env file as DEV_STRIPE_WEBHOOK_ENDPOINT_SECRET.
▫️
Stripe Products
From Stripe Products Dashboard, create as many products as you want. Remember to update their API Keys from .env file, as well as their descriptions from /modules/stripe/stripe-plans.
Production
▫️
Stripe Webhook - Web Dashboard
Let's see how we can get and set our Production Webhook.
- Visit Webhooks Section into your Stripe Dashboard.
The link provided to Webhooks its from Stripe Test Mode. Feel free to complete the "Activate Payments" steps to get a production Webhook Key.
-
Create a new Webhook Endpoint.
-
Set your deployed App Webhook Endpoint URL into
Endpoint URLinput.
For this template was: https://stripe-stack.fly.dev/api/webhook
- Reveal the
Signing Secretvalue that has been provided from Stripe Webhook page and set it asPROD_STRIPE_WEBHOOK_ENDPOINT_SECRETin our.envfile.
Done! Give it a try. If something went wrong, verify that all the steps has been followed correctly.
🚀
Deployment
This Remix Stack comes with two GitHub Actions that handle automatically deploying our app to Production and Staging Environments.
Prior to the first deployment, we'll need to do a few things:
-
Sign up and Log in to Fly:
fly auth signup
- Create two apps on Fly, one for staging and one for production:
fly apps create stripe-stack
fly apps create stripe-stack-staging
Make sure this name matches the
appset intofly.tomlfile. Otherwise, you will not be able to deploy.
- Initialize Git:
git init
- Create a new GitHub Repository, and then add it as the remote for your project. Do not push your app yet!
git remote add origin <ORIGIN_URL>
-
Add a
FLY_API_TOKENto your GitHub repo. To do this, go to your user settings on Fly and create a new token, then add it to your repo secrets with the nameFLY_API_TOKEN. -
Add a
SESSION_SECRETto your fly app secrets, to do this you can run the following commands:
fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app stripe-stack
fly secrets set SESSION_SECRET=$(openssl rand -hex 32) --app stripe-stack-staging
If you don't have openssl installed, you can also use 1password to generate a random secret, just replace
$(openssl rand -hex 32)with the generated secret.
- Create a persistent volume for the sqlite database for both your staging and production environments. Run the following:
fly volumes create data --size 1 --app stripe-stack
fly volumes create data --size 1 --app stripe-stack-staging
- Now that everything is set up you can commit and push your changes to your repo.
Every commit to your
mainbranch will trigger a deployment to your production environment, and every commit to yourdevbranch will trigger a deployment to your staging environment.
▫️
Setting Up Production Envs
Here is a simple command we can use after deployment. Fill it with the required App .env variables.
flyctl secrets set NODE_ENV=production PROD_HOST_URL= GOOGLE_CLIENT_ID= GOOGLE_CLIENT_SECRET= GITHUB_CLIENT_ID= GITHUB_CLIENT_SECRET= TWITTER_CLIENT_ID= TWITTER_CLIENT_SECRET= DISCORD_CLIENT_ID= DISCORD_CLIENT_SECRET= STRIPE_PUBLIC_KEY= STRIPE_SECRET_KEY= PLAN_1_PRICE_ID= PLAN_2_PRICE_ID= PLAN_3_PRICE_ID= PROD_STRIPE_WEBHOOK_ENDPOINT_SECRET=
Development variables has opted out from this command.
▫️
Connecting to your database
The SQLite database lives at /data/sqlite.db in your deployed application. You can connect to the live database by running fly ssh console -C database-cli.
⚙️
GitHub Actions
We use GitHub Actions for continuous integration and deployment.
Anything that gets into the main branch will be deployed to production after running tests / build / etc.
Anything in the dev branch will be deployed to staging.
🧩
Testing
▫️
Cypress
We use Cypress for End-to-End tests. You'll find those in the cypress directory. As you make changes, add to an existing file or create a new file in the cypress/e2e directory to test your changes.
We use @testing-library/cypress for selecting elements on the page semantically.
To run these tests in development, run npm run test:e2e:dev which will start the dev server for the app as well as the Cypress client. Make sure the database is running in docker as described above.
▫️
Vitest
For lower level tests of utilities and individual components, we use vitest. We have DOM-specific assertion helpers via @testing-library/jest-dom.
▫️
Type Checking
This project uses TypeScript. It's recommended to get TypeScript set up for your editor to get a really great in-editor experience with type checking and auto-complete. To run type checking across the whole project, run npm run typecheck.
▫️
Linting
This project uses ESLint for linting. That is configured in .eslintrc.js.
▫️
Formatting
We use Prettier for auto-formatting in this project. It's recommended to install an editor plugin to get auto-formatting on save. There's also a npm run format script you can run to format all files in the project.
Also feel free to update prettier settings from .package-json with your preferred configuration.
👥
Contributing
Contributions are Welcome! Jump in and help us improve this Community Template over time!
- Contributing Guide Docs.
- Public Project Roadmap Check our TODOs, Fixes and Updates.
🍪
Support
If you found the template useful, feel free to Star
▫️
Acknowledgments
Big thanks to Kent C. Dodds (Not gonna bother @him tagging, instead gonna leave here his Website). Him has supported some of my work on Twitter a few times already, and that's something truly amazing for any small developer.
Also a big shout out to @vueeez who just jumped on Twitter DMs, contributing on Twitter Authentication Strategy.
18 Oct 31, 2022
97 Dec 30, 2022
688 Dec 30, 2022
141 Jan 2, 2023
157 Jan 7, 2023
8 Dec 8, 2022
61 Dec 22, 2022
32 Jan 2, 2023
38 Dec 27, 2022
6 Nov 25, 2022
26 Dec 26, 2022
167 Dec 9, 2022
33 Dec 29, 2022
56 Dec 22, 2022
4 Oct 9, 2022
10 Dec 3, 2022
10 Jul 10, 2022