Build Better Websites. Create modern, resilient user experiences with web fundamentals。
We are happy you're here!
Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience that deploys to any Node.js server and even non-Node.js environments at the edge like Cloudflare Workers.
Want to know more? Read the Technical Explanation of Remix
This repository contains the Remix source code. This repo is a work in progress, so we appreciate your patience as we figure things out.
Documentation
For documentation about Remix, please visit our website.
Also, please join our community on Discord.
The documentation is automatically generated on each release from the files in the docs directory.
from
https://github.com/remix-run/remix
-----------------------------------------------
Prerequisites
Click this button to create a Gitpod workspace with the project set up and ready to run in VS Code or JetBrains either directly in the browser or on the desktop.
If you want to follow this tutorial locally on your own computer, it is important for you to have these things installed:
Creating the project
💿 Initialize a new Remix project. We'll call ours "blog-tutorial" but you can call it something else if you'd like.
npx create-remix@latest --template remix-run/indie-stack blog-tutorial
? Do you want me to run `npm install`? Yes
You can read more about the stacks available in the stacks docs.
We're using the Indie stack, which is a full application ready to deploy to fly.io. This includes development tools as well as production-ready authentication and persistence. Don't worry if you're unfamiliar with the tools used, we'll walk you through things as we go.
npx create-remix@latest without the --template flag. The generated project is much more minimal that way. However, some bits of the tutorial will be different for you and you'll have to configure things for deployment manually.
💿 Now, open the project that was generated in your preferred editor and check the instructions in the README.md file. Feel free to read over this. We'll get to the deployment bit later in the tutorial.
💿 Let's start the dev server:
npm run dev
💿 Open up http://localhost:3000, the app should be running.
If you want, take a minute and poke around the UI a bit. Feel free to create an account and create/delete some notes to get an idea of what's available in the UI out of the box.
Your First Route
We're going to make a new route to render at the "/posts" URL. Before we do that, let's link to it.
💿 Add a link to posts in app/routes/_index.tsx
Go ahead and copy/paste this:
<div className="mx-auto mt-16 max-w-7xl text-center">
<Link
to="/posts"
className="text-xl text-blue-600 underline"
>
Blog Posts
</Link>
</div>
You can put it anywhere you like.
from
