Skip to content

Commit

Permalink
simlify auto-install instructions (#867)
Browse files Browse the repository at this point in the history
* simlify auto install instructions

* Update src/pages/en/install/auto.md

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

* respond to chris feedback

* reorder next steps

* instructions more readable, even if longer (#882)

* removes duplication

* removes generic link now that we have descriptions and individual links

* more explicit, less shouty!

* more closely matches style of other descriptions

* deal with the fact that a user may have used a different package manager

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

* vocab variety!

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

* emphasize deploy, but include build

* punctiation not required when entering a folder name

* better install guidance answering questions

* fred pass

* fix lint

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
  • Loading branch information
3 people authored Jul 5, 2022
1 parent 9bee731 commit dc860f9
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 101 deletions.
120 changes: 20 additions & 100 deletions src/pages/en/install/auto.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,14 @@ Ready to install Astro? Follow our automatic or manual set-up guide to get start

#### Installation

`create-astro` is the fastest, easiest way to start a new Astro project from scratch.
`create-astro` is the fastest way to start a new Astro project from scratch.

## 1. Run the CLI

Run the following command in your terminal to start our handy install wizard, `create-astro`. This will walk you through creating your very first Astro project.
:::tip[Online previews]
Prefer to try Astro in your browser? Visit [astro.new](https://astro.new/) to browse our starter templates and spin up a new Astro project without ever leaving your browser.
:::
## 1. Run the Setup Wizard

No need to create a new directory first! The wizard will create a project folder for you.
Run the following command in your terminal to start our handy install wizard, `create-astro`.

```shell
# npm
Expand All @@ -36,88 +37,24 @@ yarn create astro
pnpm create astro@latest
```

The `create-astro` wizard will walk you through every step of setting up your new Astro project. You can run it anywhere on your machine, so there's no need to create a new empty directory for your project before you begin. If you don't have an empty directory yet for your new project, the wizard will help create one for you automatically.

Depending on your package manager, you may be prompted to confirm you want to install `create-astro@latest`. You will then be asked to specify a project folder (e.g. `./my-astro-site`) which will create a new directory.

### Choose a Starter Template
You will then see a short list of starter templates to choose from:
- `Just the basics`: A great starter template for anyone wanting to explore Astro.
- `Blog`, `Documentation`, `Portfolio`: opinionated themes for specific use-cases.
- `Completely empty`: A template that just includes the bare minimium to get started.

Use the arrow keys (up and down) to navigate to the template you want to install, then press return (enter) to submit.

:::tip[Online previews]
Want to check out the templates in your browser before choosing? Visit [astro.new](https://astro.new/)
:::

### Install Dependencies (optional)
The wizard will offer to run an `install` command for you at this time, which is optional.

:::caution
If you do not do so at this time, you will need to [install dependencies](/en/install/auto/#2-install-dependencies) after the wizard has finished, before starting your project.
:::

### Install any Official Astro Integrations (optional)
You will be given the option at this time to add any [additional UI frameworks](/en/core-concepts/framework-components/) (React, Svelte, Vue, Solid, Preact, Lit) and then other Astro official integrations (Tailwind, Partytown, Sitemap) by running `astro add --yes`


To select which Astro integrations, if any, you would like to include in your project, use the arrow keys (up and down) to navigate and the space bar to toggle between selected states. You can select multiple items at once, or you can continue without selecting any integrations.


When you are satisfied with your selection, press return (enter) to submit.

:::note
These integrations, and any [Astro community integrations](https://astro.build/integrations/), can also be added later by following the instructions in our [integrations guide](/en/guides/integrations-guide/).
:::


After selecting your integrations to add, you should see the following terminal message notifying you of the changes that `create-astro` will apply to your project's `astro.config.mjs`:

```bash
Astro will make the following changes to your config file:
```

This message should show that your chosen integrations have been successfully added to your project configuration. (If not, you can always add them manually later.)


### Initialize a `.git` Repository (optional)

At this final step, you can choose to initialize a git repository in your new directory. This is optional, but useful if you plan to use the tool [Git](https://git-scm.com/) for your project.
If all goes well, you should see a "Ready for liftoff!" message followed by some recommended "Next steps". `cd` into your new project directory to begin using Astro.

### Next Steps
If you skipped the `npm install` step during the `create-astro` wizard, then be sure to install your dependencies before continuing.

When the `create-astro` install wizard is complete, you should see some recommended instructions ("Next Steps") on your screen to follow that will help you complete setup and start your new project.
## 2. Start Astro ✨

## 2. Install Dependencies
Astro comes with a built-in development server that has everything you need for project development. The `astro dev` command will start the local development server so that you can see your new website in action for the very first time.

If you did not install your project's dependencies using the wizard, you will now need to do so using your preferred package manager:

```bash
# npm
npm install

# yarn
yarn

# pnpm
pnpm install

```


## 3. Start Astro ✨

You can expect to use Astro's built-in dev server for most of your project development. This is how you will run your project locally during development.

To start, use your package manager to run your pre-configured start script:
Every starter template comes with a pre-configured script that will run `astro dev` for you. Use your favorite package manager to run this command and start the Astro development server.

```bash
# npm
npm run dev

# yarn
yarn start
yarn run dev

# pnpm
pnpm run dev
Expand All @@ -127,33 +64,16 @@ If all goes well, Astro should now be serving your project on [http://localhost:

Astro will listen for live file changes in your `src/` directory, so you will not need to restart the server as you make changes during development.

If you aren't able to open your project in the browser, go back to the terminal where you ran the `start` command to see what went wrong.

## 4. Deploy to the web

It's time to deploy your project to the web! Run the `build` command in your project to build your static website to a new `dist/` folder in your project.

```bash
# npm
npm run build

# yarn
yarn build

# pnpm
pnpm run build
```

When the command finishes, you should have a new `dist/` folder in your project that you can deploy directly to your favorite web host.

To get started hosting your website for free, check out our proud hosting partner, [Netlify](https://www.netlify.com/). For instructions on deploying to whatever host you choose, read our detailed [deployment guide](/en/guides/deploy/).
If you aren't able to open your project in the browser, go back to the terminal where you ran the `start` command and look to see if an error occurred, or if your project is being served at a different URL than the one linked to above.

## Next Steps

Success! Now you're ready to start developing!
Success! You are now ready to start building with Astro! 🥳

Here are a few topics that we recommend exploring next. You can read them in any order. You can even leave our documentation for a bit and go play in your new Astro project codebase, coming back here whenever you run into trouble or have a question.

📚 Learn more about Astro’s project structure in our [Project Structure guide](/en/core-concepts/project-structure/).
📚 **Add a framework:** Learn how to extend Astro with support for React, Svelte, Tailwind and more using `npx astro add` in our [Integrations guide](/en/guides/integrations-guide/).

📚 Learn more about Astro’s component syntax in our [Astro Components guide](/en/core-concepts/astro-components/).
📚 **Deploy your site:** Learn how to build and deploy an Astro project to the web in our [Deployment guide](/en/guides/deploy/).

📚 Learn more about Astro’s file-based routing in our [Routing guide](/en/core-concepts/astro-pages/).
📚 **Understand your codebase:** Learn more about Astro’s project structure in our [Project Structure guide](/en/core-concepts/project-structure/).
2 changes: 1 addition & 1 deletion src/pages/en/install/manual.md
Original file line number Diff line number Diff line change
Expand Up @@ -133,4 +133,4 @@ If you have followed the steps above, your project directory should now look lik

Congratulations, you're now set up to use Astro!

If you followed this guide completely, you can jump directly to [Step 3: Start](/en/install/auto/#3-start-astro-) to continue and learn how to run Astro for the first time.
If you followed this guide completely, you can jump directly to [Step 2: Start Astro](/en/install/auto/#2-start-astro-) to continue and learn how to run Astro for the first time.

0 comments on commit dc860f9

Please sign in to comment.