Git Product home page Git Product logo

astro-netlify-edge-starter's Introduction

Using Netlify Edge Functions with Astro

A starter template for building a Server-Side Rendered (SSR) Astro app with Netlify Edge Functions.

Deploy to Netlify

This demo uses Astro's @astrojs/netlify package to deploy your site with SSR enabled. The application will detect the location of the user requesting the page and will render it in the browser.

Demo site

Visit https://astro-edge-functions-demo.netlify.app/ to see the code in this repository in action.

Example of the sample application detectiong the location and showing an in-browser alert

Local development

To get started with local development, follow the instructions below in your terminal application.

  1. Clone this repository locally:

    git clone https://github.com/sarahetter/astro-netlify-edge-starter
  2. Navigate to the repository folder:

    cd astro-netlify-edge-starter
  3. Install the package dependencies:

    npm install
  4. Start the application:

    npm run dev

If the command was successful, you should be able to get a local URL that you can open in your browser.

Example of Astro SSR application running locally

Keep in mind that because you are running the application locally, the geolocation component will not work. Once you deploy the application to Netlify, the location should be correctly identified.

Deploying the project to Netlify

To deploy the project to Netlify, make sure that you have the Netlify CLI installed. You can install the Netlify CLI globally by running this command in the terminal:

npm install netlify-cli -g

Once the CLI is installed, run the deployment command in the terminal:

netlify deploy --build

Once the command is executed, you'll be prompted for information about the site where the code needs to be deployed.

Example of deployment to a new Netlify site

If the command is successful, you should see a URL to your site in the terminal.

Questions and troubleshooting

If you found an issue with the code in this repository, feel free to open an issue or let us know in the Netlify Forums.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.