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

Minimal create-astro CLI #136

Merged
merged 2 commits into from
Apr 27, 2021
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
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
src/parser/parse/**/*.ts
vscode/**/*.ts
create-astro/**/*.js
90 changes: 26 additions & 64 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,75 +1,54 @@
![Astro](./assets/social/banner.png)

**Astro** is a next-generation static-site generator with partial hydration. Use your favorite JS framework and ship bare-minimum JS (or none at all!).
**Astro** is a _fresh but familiar_ approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era.

With Astro, you can use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default, it's none at all!

## 🔧 Setup

```bash
# currently hidden during private beta, please don't share :)
npm install astro@shhhhh
# currently "hidden" during private beta
npm init astro@shhhhh ./my-astro-project

# NOTE: There is currently a bug in Snowpack that prevents you
# from using astro outside of the monorepo setup that we have here.
# For now, do all development inside the `examples/` directory for this repo.
# then... cd => install => start
cd ./my-astro-project
npm install
npm start
```

## 🧞 Development
### 🚀 Build & Deployment

Add a `dev` npm script to your `/package.json` file:
The default Astro project has the following `scripts` in the `/package.json` file:

```json
{
"scripts": {
"dev": "astro dev ."
"start": "astro dev .",
"build": "astro build ."
}
}
```

Then run:
For local development, run:

```
npm run dev
npm run start
```

### ⚙️ Configuration
To build for production, run the following command:

To configure Astro, add a `astro.config.mjs` file in the root of your project. All settings are optional. Here are the defaults:

```js
export default {
/** Where to resolve all URLs relative to. Useful if you have a monorepo project. */
projectRoot: '.',
/** Path to Astro components, pages, and data */
astroRoot: './src',
/** When running `astro build`, path to final static output */
dist: './dist',
/** A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing. */
public: './public',
/** Extension-specific handlings */
extensions: {
/** Set this to "preact" or "react" to determine what *.jsx files should load */
'.jsx': 'react',
},
/** Options specific to `astro build` */
buildOptions: {
/** Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs. */
site: '',
/** Generate sitemap (set to "false" to disable) */
sitemap: true,
},
/** Options for the development server run with `astro dev`. */
devOptions: {
/** The port to run the dev server on. */
port: 3000,
},
};
```
npm run build
```

To deploy your Astro site to production, upload the contents of `/dist` to your favorite static site host.


## 🥾 Guides

### 🚀 Basic Usage

Even though nearly-everything [is configurable][config], we recommend starting out by creating an `src/` folder in your project with the following structure:
Even though nearly-everything [is configurable][docs-config], we recommend starting out by creating an `src/` folder in your project with the following structure:

```
├── src/
Expand Down Expand Up @@ -166,7 +145,7 @@ const localData = Astro.fetchContent('../post/*.md');

### 🗺️ Sitemap

Astro will automatically create a `/sitemap.xml` for you for SEO! Be sure to set `buildOptions.site` in your [Astro config][config] so the URLs can be generated properly.
Astro will automatically create a `/sitemap.xml` for you for SEO! Be sure to set `buildOptions.site` in your [Astro config][docs-config] so the URLs can be generated properly.

⚠️ Note that Astro won’t inject this into your HTML for you! You’ll have to add the tag yourself in your `<head>` on all pages that need it:

Expand All @@ -185,27 +164,10 @@ Astro will automatically create a `/sitemap.xml` for you for SEO! Be sure to set

👉 [**Collections API**][docs-collections]

### 🚀 Build & Deployment

Add a `build` npm script to your `/package.json` file:

```json
{
"scripts": {
"dev": "astro dev .",
"build": "astro build ."
}
}
```

Then run:

```
npm run build
```

Now upload the contents of `/dist` to your favorite static site host.
## ⚙️ Config

👉 [**`astro.config.mjs` Reference**][docs-config]
## 📚 API

👉 [**Full API Reference**][docs-api]
Expand All @@ -218,7 +180,7 @@ Now upload the contents of `/dist` to your favorite static site host.

👉 [**Dev Server Docs**][docs-dev]

[config]: #%EF%B8%8F-configuration
[docs-config]: ./docs/config.md
[docs-api]: ./docs/api.md
[docs-collections]: ./docs/collections.md
[docs-dev]: ./docs/dev.md
Expand Down
4 changes: 4 additions & 0 deletions create-astro/bin.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
#!/usr/bin/env node
import cli from './index.js';

cli(process.argv);
47 changes: 47 additions & 0 deletions create-astro/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import * as fs from 'fs';
import { resolve } from 'path';
import decompress from 'decompress';
import { fileURLToPath, URL } from 'url';
import { join } from 'node:path';

const log = (...args) => console.log(' ', ...args);
export default async function createAstro(argv) {
const [name] = argv.slice(2);
const templateRoot = fileURLToPath(new URL('../create-astro/templates', import.meta.url));
if (!name) {
log();
log(`npm init astro <dest>`);
log(`Provide a destination!`);
process.exit(0);
}

log();
const dest = resolve(process.cwd(), name);
const relDest = `./${name}`;
if (isEmpty(relDest)) {
await decompress(fs.readFileSync(join(templateRoot, 'starter.tar.gz')), dest);
log(`Your Astro project has been scaffolded at "${relDest}"`);
log();
log(`Next steps:`);
log();
log(` cd ${relDest}`);
log(` npm install`);
log(` npm run start`);
}
}

function isEmpty(path) {
try {
const files = fs.readdirSync(resolve(process.cwd(), path));
if (files.length > 0) {
log(`It looks like "${path}" isn't empty!`);
return false;
} else {
log(`Scaffolding Astro project at "${path}"`);
return true;
}
} catch (err) {
if (err.code !== 'ENOENT') throw err;
}
return true;
}
Loading