FYDLI URL Shortener
A URL shortener for the JAMStack.
This URL shortener uses Supabase to store short code and the long URLs they are to redirect to.
Redirects are processed using Netlify Functions (prior to
v0.3.0 a Scheduled functions was used to rebuild the
_redirects file at a set interval) which facilitates query strings on short URLs (see CHANGELOG for more on this and the additional
New URLs are added via a single-input form—short codes are automatically generated.
- Deploy the
pre-launchdirectory to Netlify (use drag and drop.) This is placeholder.
- Next, configure a custom domain using Netlify DNS.
- While waiting for propagation of DNS, work through the configuration section below.
- Once propagation and configuration are complete, deploy the site from git (you can remove the
pre-launchdirectory as it is no longer required.)
For local development, store the following in a
.env.local) file in the project root. When deploying to Netlify, configure these environment variables in the UI.
A simple Supabase table is required. In the SQL editor, paste this SQL to generate the required table (changing
-- Create the table CREATE TABLE test_table ( id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY, created_at timestamp with time zone DEFAULT timezone('utc'::text, now()) NOT NULL, -- Make sure each short code is unique short varchar NOT NULL UNIQUE, long varchar NOT NULL, disabled boolean default false, user_id uuid NOT NULL ); -- Insert some links INSERT INTO test_table (short,long,disabled,user_id) VALUES -- GitHub links ('git','https://github.com/coelmay/fydli',false,'ad154745-0934-4e6e-9438-f168b9ae31b1') ,('issue','https://github.com/coelmay/fydli/issues',false,'ad154745-0934-4e6e-9438-f168b9ae31b1') ,('license','https://github.com/coelmay/fydli/LICENSE',false,'ad154745-0934-4e6e-9438-f168b9ae31b1') -- Other important links ,('ntl','https://netlify.com',false,'ad154745-0934-4e6e-9438-f168b9ae31b1') ,('jam','https://jamstack.org',false,'ad154745-0934-4e6e-9438-f168b9ae31b1') -- reserve links you don't want used; set disabled true ,('about','https://fyd.li/about',true,'ad154745-0934-4e6e-9438-f168b9ae31b1') ,('contact','https://fyd.li/contact',true,'ad154745-0934-4e6e-9438-f168b9ae31b1') ;
Environment Variables (Required)
If the following variables are not set, the deploy (or functions) will fail.
Character set for short code generation
Settings for your project/table
SUPABASE_URL=https://xxxxxxxxxx.supabase.co SUPABASE_KEY=ey... SUPABASE_TABLE=table_name
The API ID of the site, and your UA string
NETLIFY_API_ID=0ajsoas9cjapc9japsc9ja0cj API_UA_STRING=Your Name <firstname.lastname@example.org>
Set SMTP details as per mail host. Ethereal Email is great for testing.
MAIL_HOST=smtp.ethereal.email MAIL_USERNAMEemail@example.com MAIL_PASSWORD=securepassword MAIL_NAME=Your Name MAIL_EMAILfirstname.lastname@example.org
What is the name of the site?
Environment Variables (Optional)
Short URL length (defaults to 5 if unset.)
Is the site public? If not explicitly true, the build will assume the site is private and rename
If not public you can set
MAIN_PAGE to rename the
index.html or leave undefined to generate a random name (which is logged to console).
If this is run as a private shortener, you could entirely remove the
build-site.js to remove the rename) and functions other than
redir.js. To add URLs, you could (would) run a version locally using Netlify CLI to add new URLs.
Other Environment Variables
Built-in environment variables are also utilised. These are
If you wish to know that re-deploys are succeeding at the set interval, consider using Deploy Notification.
The HTML pages are basic and minimal by design. There are only two by default. The
redir.js function will return HTML and does share the same stylesheet. Custom these as you see fit, or add an SSG to generate required site pages.
This was designed to scratch an itch, as something (semi-) useful to test Netlify's Scheduled Functions Beta (which is no longer utilised in this project). This is a (relatively) basic, open system (free, open, is good.) Functions are not protected by default (see this thread on the Netlify Forums for more.) It is entirely possible (testing has proven this) to modify scripts/pages to require sign-up/login using Netlify Identity or Supabase Auth (or other provider) to limit users, and hold users accountable for the links they create (i.e. banning those who use the site for illegal/unethical endeavours.)