Astro JS Tutorial: Quick Start Astro Guide

• astro

  10 15 9.0 Shell

  Code to accompany Astro articles. (by rodneylab)

Svelte Component { altColours = !altColours; }}>Toggle colours .container { display: flex; flex-direction: column; background: hsl( var(--colour-brand-hue) var(--colour-brand-saturation) var(--colour-brand-luminance) ); align-items: center; width: 100%; padding: var(--spacing-8) var(--spacing-0); color: hsl( var(--colour-dark-text-hue) var(--colour-dark-text-saturation) var(--colour-dark-text-luminance) ); } .container-alt { background: hsl( var(--colour-secondary-hue) var(--colour-secondary-saturation) var(--colour-secondary-luminance) ); color: hsl( var(--colour-light-text-hue) var(--colour-light-text-saturation) var(--colour-light-text-luminance) ); } .button { background: hsl( var(--colour-secondary-hue) var(--colour-secondary-saturation) var(--colour-secondary-luminance) ); } .button-alt { background: hsl( var(--colour-brand-hue) var(--colour-brand-saturation) var(--colour-brand-luminance) ); }

Enter fullscreen mode Exit fullscreen mode

Fonts

We mentioned that we are using self-hosted fonts above. For the hosting to work,we need to include the fonts in our repo so our host can serve them. Download the Roboto Font in Regular, 400 and 700. Extract the zip and then create a new fonts folder in the project’s public folder. Drop the four unzipped files in that folder. The public folder is for anything which we do not need Astro (or Vite, under the hood) to process. As well as fonts, web manifest files for PWA and favicons fall into this category.

We won’t optimise fonts here, just to get finished a little quicker. There is a nice video which focusses on self-hosted fonts in Astro together with optimisation. If you are interested in optimisation, do take a look. You can save 80% on some fonts files, especially where, for example you only use the 900 weight font in titles.

🍧 Hosting

The app should be working just fine now, with a nice Roboto sans serif font and all the colours. Try pressing the buttons below the React and Svelte components to check they work. You should notice the background colour change.

The next step is to build the site locally to check it is all working as expected. Run these commands to build and preview the site (stop the dev server with ctrl + C first):


pnpm run build
pnpm run preview

Enter fullscreen mode Exit fullscreen mode

If all is well, commit the code to a git repo and upload it to your GitHub or GitLab account, so we can host it as a static site. You might notice your site gets built to the dist directory in your project. There is no need to include this in your repo as your host will generate the site there for you.

It is worth adding a .nvmrc file to the project root folder whichever host you are using. This will tell the host know which version of node to use. We will go for the long-term support (LTS) version which is 16 at the time of writing:


16

Enter fullscreen mode Exit fullscreen mode

Configuration

Although we have used pnpm in this tutorial to build the site, for maximum compatibility, in the cloud use npm run build as your build command. We just mentioned that Astro outputs projects to the dist directory, so on your host console, set the build output directory or publish directory to dist.

Here are screenshots for Netlify and Cloudflare Pages which should help you out. Other services will be similar. Select the Astro preset if your host has one, then just check the build command and output / publish directory is dist.





🙌🏽 Astro JS Tutorial: Wrapping Up

In this post we have run through the pipeline for building a static Astro site. We have seen:

• how to spin up a new Astro project with Svelte and React integrations,
• how you can add global CSS styles, local scoped styles and style React components with plain CSS,
• configuration for deploying your static Astro site to the cloud.

The Astro JS tutorial code is in the Rodney Lab GitHub repo. You can also try it on Stackblitz.

I hope you found this article useful and am keen to hear how you will the starter on your own projects as well as possible improvements.

🙏🏽 Astro JS Tutorial: Feedback

Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.

Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram. Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as SvelteKit. Also subscribe to the newsletter to keep up-to-date with our latest projects.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

Suggest a related project