Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(create-remix): rewrite create-remix CLI #6887

Merged
merged 13 commits into from
Jul 21, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .changeset/create-remix.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"create-remix": major
"@remix-run/dev": major
---

The `create-remix` CLI has been rewritten to feature a cleaner interface, Git repo initialization and optional `remix.init` script execution. The interactive template prompt and official Remix stack/template shorthands have also been removed so that community/third-party templates are now on a more equal footing.

The code for `create-remix` has been moved out of the Remix CLI since it's not intended for use within an existing Remix application. This means that the `remix create` command is no longer available.
2 changes: 1 addition & 1 deletion .github/PULL_REQUEST_TEMPLATE.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ Or
> I opened up my windows machine and ran this script:
>
> ```
> npx create-remix@0.0.0-experimental-7e420ee3 --template remix my-test
> npx create-remix@0.0.0-experimental-7e420ee3 my-test
> cd my-test
> npm run dev
> ```
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/stacks.yml
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ jobs:

- name: ⚒️ Create new ${{ matrix.stack.name }} app with ${{ inputs.version }}
run: |
npx -y create-remix@${{ inputs.version }} ${{ matrix.stack.name }} --template ${{ matrix.stack.repo }} --typescript --no-install
npx -y create-remix@${{ inputs.version }} ${{ matrix.stack.name }} --template ${{ matrix.stack.repo }} --no-install --no-git-init

- name: ⎔ Setup dependency caching
uses: actions/setup-node@v3
Expand Down
15 changes: 5 additions & 10 deletions docs/guides/deployment.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,12 @@ toc: false

# Deployment

Remix maintains a few starter templates to help you deploy to various servers right from the start. You should be able to initialize your app and get it live within a couple of minutes.
Remix maintains a few [starter templates][starter-templates] to help you deploy to various servers right from the start. You should be able to initialize your app and get it live within a couple of minutes.

Running `npx create-remix@latest` will prompt you to pick a deployment target:
Running `npx create-remix@latest` with the `--template` flag allows you to provide the URL to one of these templates, for example:

```sh
npx create-remix@latest
? Where do you want to deploy? (Use arrow keys)
❯ Remix App Server
Architect
Cloudflare Workers
Fly.io
Netlify
Vercel
npx create-remix@latest --template remix-run/remix/templates/express
```

Each target has unique file structures, configuration files, cli commands that need to be run, server environment variables to be set etc. Because of this, it's important to read the README.md to deploy the app. It's got all of the steps you need to take to get your app live within minutes.
Expand All @@ -27,3 +20,5 @@ Each target has unique file structures, configuration files, cli commands that n
Additionally, Remix doesn't abstract over your infrastructure, so the templates don't hide anything about where you're deploying to (you may want other functions besides the Remix app!). You're welcome to tweak the configuration to suit your needs. Remix runs on your server, but it is not your server.

In a nutshell: if you want to deploy your app, Read the manual 😋

[starter-templates]: https://github.com/remix-run/remix/tree/main/templates
73 changes: 73 additions & 0 deletions docs/other-api/create-remix.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
---
title: "create-remix (CLI)"
---

# `create-remix`

The `create-remix` CLI will create a new Remix project. Without passing arguments, this command will launch an interactive CLI to configure the new project and set it up in a given directory.

```sh
npx create-remix@latest
```

Optionally you can pass the desired directory path as an argument and a starter template with the `--template` flag.

```sh
npx create-remix@latest <projectDir>
```

To get a full list of available commands and flags, run:

```sh
npx create-remix@latest --help
```

### Package managers

`create-remix` can also be invoked using the `create` command of various package managers, allowing you to choose between npm, Yarn and pnpm for managing the install process.

```sh
npm create remix@latest <projectDir>
# or
yarn create remix@latest <projectDir>
# or
pnpm create remix@latest <projectDir>
```

### `create-remix --template`

For a more comprehensive guide to available templates, see our [templates page.][templates]

A valid template can be:

- a GitHub repo shorthand — `:username/:repo` or `:username/:repo/:directory`
- the URL of a GitHub repo (or directory within it) — `https://github.com/:username/:repo` or `https://github.com/:username/:repo/tree/:branch/:directory`
- the URL of a remote tarball — `https://example.com/remix-template.tar.gz`
- a local file path to a directory of files — `./path/to/remix-template`
- a local file path to a tarball — `./path/to/remix-template.tar.gz`

```sh
npx create-remix@latest ./my-app --template remix-run/grunge-stack
npx create-remix@latest ./my-app --template remix-run/remix/templates/remix
npx create-remix@latest ./my-app --template remix-run/examples/basic
npx create-remix@latest ./my-app --template :username/:repo
npx create-remix@latest ./my-app --template :username/:repo/:directory
npx create-remix@latest ./my-app --template https://github.com/:username/:repo
npx create-remix@latest ./my-app --template https://github.com/:username/:repo/tree/:branch
npx create-remix@latest ./my-app --template https://github.com/:username/:repo/tree/:branch/:directory
npx create-remix@latest ./my-app --template https://github.com/:username/:repo/archive/refs/tags/:tag.tar.gz
npx create-remix@latest ./my-app --template https://github.com/:username/:repo/releases/latest/download/:tag.tar.gz
npx create-remix@latest ./my-app --template https://example.com/remix-template.tar.gz
npx create-remix@latest ./my-app --template ./path/to/remix-template
npx create-remix@latest ./my-app --template ./path/to/remix-template.tar.gz
```

<aside aria-label="Private GitHub repo templates">
<docs-info>

To create a new project from a template in a private GitHub repo, pass the `--token` flag a personal access token with access to that repo.

</docs-info>
</aside>

[templates]: ../pages/templates
41 changes: 1 addition & 40 deletions docs/other-api/dev.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,45 +21,6 @@ To get a full list of available commands and flags, run:
npx @remix-run/dev -h
```

## `remix create`

`remix create` will create a new Remix project. Without passing arguments, this command will launch an interactive CLI to configure the new project and set it up in a given directory. Optionally you can pass the desired directory path as an argument and a starter template with the `--template` flag.

```sh
remix create <projectDir>
```

### `remix create --template`

A valid template can be:

- a directory located in the [`templates` folder of the Remix repository][templates-folder-of-the-remix-repository]
- a local file path to a directory of files
- a local file path to a tarball
- the name of a `:username/:repo` on GitHub
- the URL of a remote tarball

```sh
remix create ./my-app --template fly
remix create ./my-app --template /path/to/remix-template
remix create ./my-app --template /path/to/remix-template.tar.gz
remix create ./my-app --template remix-run/grunge-stack
remix create ./my-app --template :username/:repo
remix create ./my-app --template https://github.com/:username/:repo
remix create ./my-app --template https://github.com/:username/:repo/tree/:branch
remix create ./my-app --template https://github.com/:username/:repo/archive/refs/tags/:tag.tar.gz
remix create ./my-app --template https://github.com/:username/:repo/releases/latest/download/:tag.tar.gz
remix create ./my-app --template https://example.com/remix-template.tar.gz
```

<aside aria-label="Private GitHub repo templates">
<docs-info>

To create a new project from a template in a private GitHub repo, pass the `--token` flag a personal access token with access to that repo.

</docs-info>
</aside>

## `remix build`

Builds your app for production. This command will set `process.env.NODE_ENV` to `production` and minify the output for deployment.
Expand Down Expand Up @@ -112,7 +73,7 @@ You could even use `remix.init/index.js` to ask further questions to the develop

After the init script has been run, the `remix.init` folder gets deleted, so you don't need to worry about it cluttering up the finished codebase.

<docs-info>You'll only ever interact with this command if you've opted out of installing dependencies when creating a new Remix app, or you're developing a custom template that includes a `remix.init/index.js` file.</docs-info>
<docs-info>You'll only ever interact with this command if you've opted out of installing dependencies or running the `remix.init` script when creating a new Remix app, or you're developing a custom template that includes a `remix.init/index.js` file.</docs-info>

### `remix init --no-delete`

Expand Down
92 changes: 4 additions & 88 deletions docs/pages/stacks.md
Original file line number Diff line number Diff line change
@@ -1,95 +1,11 @@
---
title: Remix Stacks
description: The quickest way to get rocking and rolling with Remix
order: 3
toc: false
hidden: true
---

# Remix Stacks

Remix Stacks is a feature of the Remix CLI that allows you to generate a Remix project quickly and easily. There are several built-in and official stacks that are full-blown applications. You can also make your own (read more below).
[The documentation for Remix Stacks has moved to the "Templates" page.][moved]

[Read the feature announcement blog post][read-the-feature-announcement-blog-post] and [watch Remix Stacks videos on YouTube][watch-remix-stacks-videos-on-you-tube].

The built-in official stacks come ready with common things you need for a production application including:

- Database
- Automatic deployment pipelines
- Authentication
- Testing
- Linting/Formatting/TypeScript

What you're left with is everything completely set up for you to just get to work building whatever amazing web experience you want to build with Remix. Here are the built-in official stacks:

- [The Blues Stack][the-blues-stack]: Deployed to the edge (distributed) with a long-running Node.js server and PostgreSQL database. Intended for large and fast production-grade applications serving millions of users.
- [The Indie Stack][the-indie-stack]: Deployed to a long-running Node.js server with a persistent SQLite database. This stack is great for websites with dynamic data that you control (blogs, marketing, content sites). It's also a perfect, low-complexity bootstrap for MVPs, prototypes, and proof-of-concepts that can later be updated to the Blues stack easily.
- [The Grunge Stack][the-grunge-stack]: Deployed to a serverless function running Node.js with DynamoDB for persistence. Intended for folks who want to deploy a production-grade application on AWS infrastructure serving millions of users.

Yes, these are named after music genres. 🤘 Rock on.

There will be more stacks available in the future. And you can make your own (and we strongly encourage it)!

## Custom Stacks

The Remix CLI will help you get started with one of these built-in stacks, but if you want, you can create your own stack and the Remix CLI will help you get started with that stack. There are several ways to do this, but the most straightforward is to create a GitHub repo:

```
npx create-remix@latest --template my-username/my-repo
```

Custom stacks give an enormous amount of power and flexibility, and we hope you create your own that suits the preferences of you and your organization (feel free to fork ours!).

<docs-success>Yes, we do recommend that you name your own stack after a music sub-genre (not "rock" but "indie"!). In the future, we will have a page where you can list your open-source stacks for others to learn and discover. For now, please add the <a href="https://github.com/topics/remix-stack"><code>remix-stack</code></a> tag to your repo!</docs-success>

### `--template`

The template option can be any of the following values:

- The name of a stack in the remix-run GH org (e.g. `blues-stack`)
- A GH username/repo combo (e.g. `mcansh/snkrs`)
- A file path to a directory on disk (e.g. `/my/remix-stack`)
- A path to a tarball on disk (e.g. `/my/remix-stack.tar.gz`)
- A URL to a tarball (e.g. `https://example.com/remix-stack.tar.gz`)
- A file URL (e.g. `file:///Users/michael/remix-stack.tar.gz`)

Additionally, if your stack is in a private GitHub repo, you can pass a GitHub token via the `--token` cli flag:

```
npx create-remix@latest --template your-private/repo --token yourtoken
```

The [token just needs `repo` access][repo access token].

### Custom Template Tips

#### Dependency versions

If you set any dependencies in package.json to `*`, the Remix CLI will change it to a semver caret of the installed Remix version:

```diff
- "remix": "*",
+ "remix": "^1.2.3",
```

This allows you to not have to regularly update your template to the latest version of that specific package. Of course, you do not have to put `*` if you'd prefer to manually manage the version for that package.

#### Customize Initialization

If the template has a `remix.init/index.js` file at the root then that file will be executed after the project has been generated and dependencies have been installed. This gives you a chance to do anything you'd like as part of the initialization of your template. For example, in the blues stack, the `app` property has to be globally unique, so we use the `remix.init/index.js` file to change it to the name of the directory that was created for the project + a couple random characters.

You could even use `remix.init/index.js` to ask further questions to the developer for additional configuration (using something like [inquirer][inquirer]). Sometimes, you'll need dependencies installed to do this, but those deps are only useful during initialization. In that case, you can also create a `remix.init/package.json` with dependencies and the Remix CLI will install those before running your script.

After the init script has been run, the `remix.init` folder gets deleted, so you don't need to worry about it cluttering up the finished codebase.

<docs-warning>Do note however, that opting out of installing dependencies will not run the remix.init setup, to do so manually, run `remix init`.</docs-warning>

#### Remove TypeScript

If there's a `tsconfig.json` file in the root of the project, the Remix CLI will ask whether the user wants the TypeScript automatically removed from the template. We don't recommend this, but some folks just really want to write regular JavaScript.

[repo access token]: https://github.com/settings/tokens/new?description=Remix%20Private%20Stack%20Access&scopes=repo
[inquirer]: https://npm.im/inquirer
[read-the-feature-announcement-blog-post]: /blog/remix-stacks
[watch-remix-stacks-videos-on-you-tube]: https://www.youtube.com/playlist?list=PLXoynULbYuEC8-gJCqyXo94RufAvSA6R3
[the-blues-stack]: https://github.com/remix-run/blues-stack
[the-indie-stack]: https://github.com/remix-run/indie-stack
[the-grunge-stack]: https://github.com/remix-run/grunge-stack
[moved]: ./templates
Loading