Skip to content

Instantly share code, notes, and snippets.

@cubu
Last active December 11, 2024 02:30
Show Gist options
  • Select an option

  • Save cubu/ec91354417bb2736fde5c5822a893bbc to your computer and use it in GitHub Desktop.

Select an option

Save cubu/ec91354417bb2736fde5c5822a893bbc to your computer and use it in GitHub Desktop.
To make Figma Google Sheet Sync work with localhost folder, we need 1. Ngrok for https and 2. Serving the file allow to download rather than preview.

To serve a local directory over HTTPS using ngrok, follow these steps:

  1. Install ngrok:

    • Download ngrok from the official website.
    • Unzip the downloaded file.
    • Move the ngrok executable to a directory included in your system's PATH for easy access from the command line.
  2. Authenticate ngrok:

    • Sign up for a free ngrok account to obtain an authentication token.
    • In your terminal, run:
      ngrok config add-authtoken YOUR_AUTHTOKEN
      Replace YOUR_AUTHTOKEN with the token from your ngrok dashboard.
  3. Serve the local directory:

    • Navigate to the directory you want to serve:
      cd /path/to/your/directory
    • Start a simple HTTP server using Python:
      python3 -m http.server 8000
      This command serves the current directory's contents at http://localhost:8000.
  4. Expose the local server with ngrok:

    • In a new terminal window, run:
      ngrok http 8000
    • ngrok will display a forwarding URL, such as https://abcd1234.ngrok.io, which securely tunnels to your local server.

By following these steps, you can share the https:// URL provided by ngrok to allow others to access your local directory's contents over the internet.

For more detailed information, refer to ngrok's Getting Started Guide.

To create direct download links for files hosted on your local http-server, ensuring that clicking the link immediately starts the download rather than previewing the file: using a Different Server for Advanced Needs

If you require more advanced header configurations (like pattern matching), consider using a more feature-rich server such as Express.js with custom middleware.

Example with Express.js:

  1. Install Express:

    npm install express
  2. Create server.js:

    const express = require('express');
    const path = require('path');
    
    const app = express();
    const PORT = 8080;
    
    // Middleware to set Content-Disposition header for specific file types
    app.use((req, res, next) => {
      const ext = path.extname(req.path).toLowerCase();
      const downloadableExtensions = ['.pdf', '.jpg', '.zip']; // Add extensions as needed
    
      if (downloadableExtensions.includes(ext)) {
        res.setHeader('Content-Disposition', 'attachment');
      }
      next();
    });
    
    // Serve static files
    app.use(express.static(path.join(__dirname, 'public'))); // Adjust 'public' to your directory
    
    app.listen(PORT, () => {
      console.log(`Server is running on http://localhost:${PORT}`);
    });
  3. Run the Server:

    node server.js

Pros:

  • Advanced Control: Easily apply headers based on file types, routes, or other criteria.
  • Scalability: Better suited for larger projects requiring more customization.

Cons:

  • More Complex Setup: Requires writing and maintaining server code.

Summary

For a straightforward setup using http-server, the HTML download attribute is the easiest and most effective method to create direct download links. If you need server-side control to enforce downloads regardless of how files are accessed, configuring http-server with custom headers is possible but requires manual configuration for each file. For more advanced needs, consider using a server framework like Express.js.


References:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment