Remix Forge
Remix Forge - A VS Code extension for Remix.run applications that super charges your development with a ever-growing set of functionalities.
Whats new?
- Added ability to generate the whole authentication scaffolding for Remix applications with a single click
- Added ability to add authentication to your loaders with a click
- Added ability to add authentication to your actions with a click
Features
Generating authentication flows
You can now generate the whole authentication scaffolding for Remix applications with a single click. This includes:
auth0
facebook
github
google
microsoft
discord
twitter
oauth2
form
(email/password)
Right click
the app
folder and select Generate Authentication Workflow
and select the authentication method(s) you want to use.
After that fill the required secrets inside of the .env
file and you are good to go.
Generating authentication for loaders and actions
You can now add authentication to your loaders and actions with a click.
Click
the Add authentication
above a loader or action and it will auto generate the authentication using remix-auth.
Opening routes in the browser
You can now open up your routes in the browser from the route file itself. This is useful for when you want to test out your routes without having to go to the browser and type in the url or navigate to it.
Each route file with the default export will have a button(s) above the default export that will open up the route in the browser by clicking it.
This is configurable and you can change the url generator function and the paths that you want to generate urls for. See the Extension Settings section on how you can customize your output
Route File Generation
Generates every possible export from a route file for Remix.run applications. You can do this by right-clicking your routes folder and selecting convert to v2 convention.
Including:
dependencies
loader function
links function
ErrorBoundary component
default Component
shouldRevalidate function
meta function
action function
headers function
handle function
Tip: This is highly configurable per workspace. See the Extension Settings section on how you can customize your output
Routing Convention Conversion
Converts the v1 routing convention to the v2 routing convention.
This command will try to convert your routes from v1 to v2 and if anything goes wrong it will restore your routes to initial state.
Just in case PLEASE make sure you have a backup in case something unexpected happens or you find a bug. In case of a bug
feel free to submit an issue on our Github repository.
Usage
Generating routes
Here is an example video of the basic usage:
Extension Settings
This extension contributes the following configuration settings:
remix-forge.preselected
: Array of preselected options after clicking the Generate Remix route (default is []
).
remix-forge.orderOfGeneration
: Allows you to change the order of generation, eg: ["loader", "action"] (default is []
).
remix-forge.loader
: Allows you to change the output for the loader segment of the code (default is ''
).
remix-forge.action
: Allows you to change the output for the action segment of the code (default is ''
).
remix-forge.meta
: Allows you to change the output for the meta segment of the code (default is ''
).
remix-forge.handle
: Allows you to change the output for the handle segment of the code (default is ''
).
remix-forge.component
: Allows you to change the output for the component segment of the code (default is ''
).
remix-forge.links
: Allows you to change the output for the links segment of the code (default is ''
).
remix-forge.errorBoundary
: Allows you to change the output for the ErrorBoundary segment of the code (default is ''
).
remix-forge.revalidate
: Allows you to change the output for the revalidate segment of the code (default is ''
).
remix-forge.headers
: Allows you to change the output for the headers segment of the code (default is ''
).
remix-forge.runtimeDependency
: Allows you to change the output for the runtime dependencies (default is ''
).
remix-forge.urlGenerator
: Allows you to pass in a custom url generator function for the relative part of the url (default is ''
).
remix-forge.urlGeneratorPaths
: Allows you to specify multiple url paths to generate urls for (eg. staging, production, local...) (default is [{ title: "Local", url: "http://localhost:3000" }]
).
Roadmap
- [x] Add ability to convert v1 route convention to v2 route convention
- [x] Add ability to change runtime dependencies
- [x] Add ability to open up your routes in the browser from the file itself.
- [ ] Add ability for the extension to sniff out the runtime dependency instead of you configuring it
- [ ] Add ability to generate a component name based on the route name
- [ ] Add ability to generate fully progressive forms with validation
- [ ] Add ability to generate authenticated routes via actions
Release Notes
0.1.0
- Ability to generate the whole authentication scaffolding for Remix applications with a single click
- Ability to add authentication to your loaders with a click
- Ability to add authentication to your actions with a click
- Support for 9 Authentication methods including Facebook, Google, Auth0, Microsoft, Github, Discord and more...
0.0.5
- Ability to open up routes in the browser from the file via the buttons above the default export
urlGenerator
config option that allows you to pass in a custom function to generate your urls
urlGeneratorPaths
config option that allows you to specify multiple url paths to generate urls for (eg. staging, production, local...)
0.0.4
- Ability to convert v1 route convention to v2 route convention
- Updated readme
- Moved the commands to a separate context menu section
- Ability to change runtime dependencies
0.0.3
Readme update
0.0.2
Readme update
0.0.1
Initial release of Remix Forge