Web quickstart
Estimated time: 2 minutes
Use this quickstart to create your first Gadget web app and preview it in the editor. You will start with built-in authentication so your app already includes sign-up, sign-in, and protected signed-in pages.
What you will do
In this quickstart, you will:
- Create a new Gadget app
- Choose the web app template with authentication enabled
- Click the Play button to open your app preview
Step 1: Create a new Gadget app
Start by creating a new Gadget app at gadget.new.
When Gadget asks which app type you want to build:
- Select Web
- Keep Yes, enable auth selected
- Click Continue
- Enter your app name and create the app
The web app template with auth gives you authentication flows and signed-in routes out of the box, so you can start building app features instead of wiring up auth first.
Step 2: Click Play to preview your app
Gadget sets up your project automatically. This includes spinning up a development environment, adding a default user model, and installing dependencies. This only takes a few seconds.
Once the editor loads, click the Play button to open your live app preview.
If the app is still setting up when you click Play, wait a couple of seconds and refresh the page.
From there, you can sign up and sign in using the built-in authentication flows, and see the default signed-out and signed-in experiences.
That is the full quickstart. At this point you have a working Gadget web app running with authentication enabled.
Next steps
Once the preview is working, continue with one of these guides:
Or continue with the web app tutorial for a step-by-step walkthrough of building a full-stack web app:
Questions?
Reach out on Gadget's Discord server to talk with Gadget employees and the Gadget developer community.