Forem: Mannuel

Remix, React, the Discogs API & filtermusikk.no

Mannuel — Mon, 23 Sep 2024 19:55:05 +0000

I'd like to share and hopefully inspire some of you to do more side projects.

This is how I thought about building a vinyl list web app, the process of building it, including "some" not all technical details.

First some context.

I had a "need" and an itch to get some game time with Remix.

Best way to learn is to build something, preferably something with/around something that you are interested in/passionate about.

It is no secret that I am a huge fan of music. I have been collecting and playing records over the years, on and off... and right now very much on.

I found a local record store that I like Filter Musikk, I have been buying records from them for the last little while now.

They have a Discogs store online. Discogs is marketplace for music (vinyl, cd's, cassettes) it's like eBay for music, but better.

Anyways, lets talk about code the Discogs API and how I have been playing around with it.

I thought it would be cool to build a little app that would allow me to see what they have in stock.

🎹 Live demo here

The data

I like to save my endpoints in collections in Postman, so I can easily refer to them later.

Here is the Discogs API endpoint I used to get the inventory of a user.

https://api.discogs.com/users/username/inventory
?status=status
&sort=sort
&sort_order=sort_order
&per_page=per_page
&page=page

Fairly simple.

The plan and design

Keep it clean simple design. Focus on the music, the records and the artwork.

The stack

Remix for the server side rendering. I was only concerned with learning how things work in Remix with loaders, routes and actions. So I did not build anything from scratch.

I used Tailwind CSS for the styling because it's fast and easy to use, after a second thought I decided to use shadcn/ui so I did not have to build the components from scratch either.

💽 Discogs API
📖 Remix
🎨 shadcn/ui
👩‍💻 React

The code

Make use of the Remix resources for building the app, no sense reinventing the wheel.

I used the server side pagination by Jacob Paris.

Type definitions

I like to get accustomed to the data I am working with, so I define the types I will be working with. Quicktype.io is good for this job.

export interface Pagination {
  items: number;
  page: number;
  pages: number;
  per_page: number;
  urls: Record<
    string,
    {
      last: string;
      next: string;
    }
  >;
}

export interface Price {
  currency: string;
  value: number;
}

interface OriginalPrice {
  curr_abbr: string;
  curr_id: number;
  formatted: string;
  value: number;
}

interface SellerStats {
  rating: string;
  stars: number;
  total: number;
}

interface Seller {
  id: number;
  username: string;
  avatar_url: string;
  stats: SellerStats;
  min_order_total: number;
  html_url: string;
  uid: number;
  url: string;
  payment: string;
  shipping: string;
  resource_url: string;
}

interface Image {
  type: string;
  uri: string;
  resource_url: string;
  uri150: string;
  width: number;
  height: number;
}

interface ReleaseStatsCommunity {
  in_wantlist: number;
  in_collection: number;
}

interface ReleaseStats {
  community: ReleaseStatsCommunity;
}

interface Release {
  thumbnail: string;
  description: string;
  images: Image[];
  artist: string;
  format: string;
  resource_url: string;
  title: string;
  year: number;
  id: number;
  label: string;
  catalog_number: string;
  stats: ReleaseStats;
}

export interface Listing {
  id: number;
  resource_url: string;
  uri: string;
  status: string;
  condition: string;
  sleeve_condition: string;
  comments: string;
  ships_from: string;
  posted: string;
  allow_offers: boolean;
  offer_submitted: boolean;
  audio: boolean;
  price: Price;
  original_price: OriginalPrice;
  shipping_price: Record<string, unknown>;
  original_shipping_price: Record<string, unknown>;
  seller: Seller;
  release: Release;
}

export interface InventoryFetchResponse {
  pagination: Pagination;
  listings: Listing[];
}

Inventory server component

import type { LoaderFunction, MetaFunction } from "@remix-run/node";
import { json, useLoaderData } from "@remix-run/react";
import { Footer } from "~/components/footer";
import { PaginationBar } from "~/components/paginationBar";
import { StatusAlert } from "~/components/StatusAlert";
import { fetchUserInventory } from "~/inventory";
import { Inventory } from "~/inventory/inventory";

export const loader: LoaderFunction = async ({ request }) => {
  const url = new URL(request.url);
  const searchParams = new URLSearchParams(url.search);
  const pageNumber = searchParams.get("page") || "1";

  try {
    const data = await fetchUserInventory(
      pageNumber,
      "12",
      process.env.SELLER_USERNAME,
      "for sale",
      "listed",
      "desc",
    );

    return json({ inventory: data, ENV: { sellerUsername: process.env.SELLER_USERNAME } });
  } catch (error) {
    console.log("Error fetching inventory:", error);
    return json({ error: "Failed to load inventory. Please try again later or" }, { status: 500 });
  }
};

export const Meta: MetaFunction = () => {
  const { ENV } = useLoaderData<typeof loader>();
  return [
    {
      title: `Shop ${ENV.sellerUsername} records`,
    },
    {
      name: "description",
      content: `Buy some vinyl records from ${ENV.sellerUsername}`,
    },
  ];
};

export default function Index() {
  const { inventory, error } = useLoaderData<typeof loader>();

  if (error) {
    <StatusAlert {...error} />;
  }

  if (!inventory || !inventory.pagination) {
    return <div>No inventory data available.</div>;
  }

  return (
    <>
      <Inventory {...inventory} />
      <PaginationBar total={inventory.pagination.pages} />
      <Footer />
    </>
  );
}

The Inventory component takes the inventory data and renders it, it is the entry point for the app index page, no routes planned.

I show an alert if there is an error fetching the data, with a link to Discogs api status page.

Remix works like this:

you have a loader function that fetches the data server side and returns it to the component wrapped by json() function
the default Index function then renders the data
meta function is used to set the title and description of the page.

fetchUserInventory function

export const loader: LoaderFunction = async ({ request }) => {
  const url = new URL(request.url);
  const searchParams = new URLSearchParams(url.search);
  const pageNumber = searchParams.get("page") || "1";

  try {
    const data = await fetchUserInventory(
      pageNumber,
      "12",
      process.env.SELLER_USERNAME,
      "for sale",
      "listed",
      "desc",
    );

    return json({ inventory: data, ENV: { sellerUsername: process.env.SELLER_USERNAME } });
  } catch (error) {
    console.log("Error fetching inventory:", error);
    return json({ error: "Failed to load inventory. Please try again later or" }, { status: 500 });
  }
};

this function is used to fetch the data from the Discogs API,
it takes the page number, number of items per page, seller username, status, condition, sort order as arguments.
it returns the data and the seller username to the loader function.
returns an error if there is an error fetching the data.

Inventory client component

The card component is your typical React card component, it has a header, content and footer.

I build string of the artist and song title and pass it to the link, which when clicked launches YouTube Music, its not perfect. Some times it does not find the song, but it works most of the time.

import React from "react";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { cn } from "~/lib/utils";
import type { InventoryFetchResponse, Listing } from "./inventory.types";

export const Inventory = (data: InventoryFetchResponse): React.ReactElement => {
  return (
    <section className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6 gap-4 justify-items-start pb-7">
      {data.listings.map((listing: Listing) => (
        <article
          id={listing.release.title}
          key={listing.release.title}
          className="flex justify-start w-full"
        >
          <Card className={cn("p-0 shadow-none w-full overflow-hidden")}>
            <div className="justify-items-start">
              <CardHeader
                className="flex-1 h-40 sm:h-60 md:h-90 lg:h-100 p-0 relative"
                title={listing.release.title}
                style={{
                  backgroundImage: listing.release.images[0]
                    ? `url(${listing.release.images[0].uri})`
                    : "",
                  backgroundSize: "cover",
                  backgroundPosition: "center",
                }}
              >
                {listing.condition ?? listing.condition}
              </CardHeader>
              <CardContent className="flex-1 pt-4">
                <CardTitle className="text-sm">
                  {listing.release.title}
                </CardTitle>
                <CardDescription className="leading-6 text-black">
                  <strong>Artist:</strong> {listing.release.artist}
                  <br />
                  <strong>Label:</strong> {listing.release.label} -{" "}
                  {listing.release.catalog_number}
                  <br />
                  <strong>Released:</strong> {listing.release.year}
                  <br />
                  <strong>Price:</strong> {listing.original_price.formatted}
                </CardDescription>
                <CardDescription className="leading-6">
                  <span className="grid grid-cols-1 md:grid-cols-2 gap-1">
                    <a
                      href={listing.uri}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-xs text-white border-0 border-black-600 bg-black hover:text-color-black rounded-md p-2 mt-2 "
                    >
                      View on Discogs
                    </a>
                    <a
                      href={`https://music.youtube.com/search?q=${
                        encodeURIComponent(
                          listing.release.title,
                        )
                      } ${encodeURIComponent(listing.release.artist)}`}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex justify-start text-xs text-white border-0 border-black-600 bg-black hover:text-color-black rounded-md p-2 mt-2"
                    >
                      <span className="w-[24px] mt-[2px]">
                        <img
                          src={"./icon-youtube.svg"}
                          alt="YouTube"
                          width={16}
                          height={16}
                        />
                      </span>
                      <span>Listen</span>
                    </a>
                  </span>
                </CardDescription>
              </CardContent>
            </div>
            <CardFooter className="p-0"></CardFooter>
          </Card>
        </article>
      ))}
    </section>
  );
};

The result

Live demo here

Conclusion

I enjoy the plug and play nature of Remix and the freedom to do as I please.

The documentation is good and easy to follow, it's easy to get started and build something quickly.

The data flow concept is easy to understand makes doing SSR much more approachable than it was in the past.

Data fetching with the loader and hooks to get the data out its concise, did not get the chance yet to use an action as I will need to build form (coming up next a site search).

Remix focus on performance and Web standards, which I like. Did not reach for Axios or anything like that (TanStack query) because I did not need to, the fetch API is good enough for simple tasks like this.

When it Remix merges into React Router 7 I will continue to use it, I will take this on a case by case basis, depending on the project and types of problems we trying to solve.

Looking else where/alternatives would be to use NextJS or maybe look at react server components next.

Ask me again in the future when React 19 is out.

Get the code on GitHub.

Tmux a terminal multiplexer

Mannuel — Sat, 04 Nov 2023 09:23:29 +0000

Original post

Tmux is a terminal multiplexer, it allows you to have multiple processes open in multiple window panes on your server.

All the window panes can be manged from one terminal. Servers don't have fancy multi tab terminals so yeah this is the answer.

The processes will run in the background on a tmux server. The process and windows will remain open and running even when you log out of your SSH session.

You can use it on your localhost machine as well to have multiple window panes running any process, like npm run watch, npm run start or what ever your heart desires.

Here I have four panes opens and I can move between each pane by pressing Ctrl+b then Up or Down, Left and Right.

The leader key is Ctrl plus 'b' and some "other key".

Install

Ubuntu

Do not use snap it's outdated, the latest version lives on apt.



sudo apt install tmux

Mac/OSX



brew install tmux

Using it

In the terminal enter:



tmux

This will start a tmux server and session with one window pane.

For horizontal window split: Ctrl+b %

For vertical window split: Ctrl+b "

Move up: Ctrl+b Up

Move down: Ctrl+b Down

Move left: Ctrl+b Left

Move right: Ctrl+b Right

Resize window: Press and keep pressing Ctrl+b while tapping Up or Down repeatedly this will increase/decrease window size in which ever direction you have chosen.

List all the commands Ctrl+b then :

Docs



man 1 tmux

Deep dive the docs here

That's it have fun with it.

Login to VPS without a password using SSH

Mannuel — Sat, 11 Feb 2023 20:30:51 +0000

It is possible to ssh into your Linux VPS without having to use a password.

Here are the steps:

Create ssh key if you dont have one already
Add the public ssh to the remote servers authorized_keys list

If you already have an ssh key skip to step 2

1 Create ssh key

Fire up the terminal and first go to your .ssh folder on your personal computer.

cd ~/.ssh

Then type (to create the ssh key)

ssh-keygen -t rsa -b 4096 -C "your@email.com"

Follow the prompts

push enter for each question to accept the defaults
it will create a prive and public ssh key called id_rsa and id_rsa.pub
do not enter a passwords

It will look like this:

Generating public/private rsa key pair.
Enter file in which to save the key (/home/mannuel/.ssh/id_rsa): id_rsa_test
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in id_rsa
Your public key has been saved in id_rsa.pub
The key fingerprint is:
SHA256:52n1XC/4hSWgwC8gqK0Ld0ym/fb3BBXbhHypgmQFUHI your@email.com
The key's randomart image is:
+---[RSA 4096]----+
|      ooEo...... |
|   .   +o   o=o  |
|  . . .oo.  +o.  |
| o   . ..o.o..   |
|. . o   S =.. . o|
| . *     + + + =.|
|o o +     + o = o|
|.o . ..  ... . o |
|.    ..... .. .  |
+----[SHA256]-----+

2 Add key to `authorized_keys` list

 cat ~/.ssh/id_rsa.pub | ssh yourUsername@000.000.00.00 'cat >> ~/.ssh/authorized_keys'

you will be prompted to enter your VPS password given for yourUsername.

 cat ~/.ssh/id_rsa.pub | ssh yourUsername@000.000.00.00 'cat >> ~/.ssh/authorized_keys'
 yourUsername@000.000.00.00's password:

Jobs done, you should be able to ssh into VPS without entering a password.

Follow me

Twitter
Website

Documenting React components using docz

Mannuel — Mon, 10 Oct 2022 18:18:04 +0000

Writing documentation is necessary but is often left as an after thought. In my experience It may be the last thing I do once I have finished building a feature. Things I may document include how to get started in life contributing to a repository, document properties of the components and API endpoints. Waiting to the end of the development cycle is not ideal because at times with best intentions I might never get around to actually writing the documentation.

Docz allows you to build your React documentation at exactly the same time as you build your website or feature in a monorepo style setup.

What is docz?

Docz is an Open Source, zero config, easy to customize static site generator with the goal of removing the pains of creating documentation websites.

I am able to build React components alongside my documentation website, and have the documentation site live update in real time as I add new props to said React component. Sounds amazing right! This is where Docz shines with the power of mdx and React docz can pull in a live React component.

How does it work?

Leveraging the power of Gatsby, docz builds a mobile first, SEO friendly static website along-side your projects.

You write a markdown file
point docz to a React component
the React component should have comments in the interface and type declarations as seen below
docz renders an HTML page for it in a separate website.

📁 client/src/components/common/Button.tsx



import React from 'react';

interface ButtonProps {
  /*
   * Align the button: left | right
   */
  btnAlign?: string | null;
  /*
   * Background colour: orange | #FF9900
   */
  btnBgColor?: string;
  /*
   * Padding customisation: 0 | 10
   */
  btnPadding?: string;
  /*
   * Round or square button: 0 | 10
   */
  btnRadius?: string;
  /*
   * Customise button width: 100px | 0.5rem
   */
  btnWidth?: string;
  /*
   * Shadow: true | false
   */
  btnBoxShadow?: boolean;
  /*
   * ClassName customisation: string | null
   */
  className?: string;
  /*
   * Disabled: true | false | null
   */
  disabled?: boolean;
  /*
   * Type: button | submit | reset
   */
  type?: string;
  /*
   * Name: Submit | Reset
   */
  name?: string;
  /*
   * Text | React Component
   */
  children?: React.ReactNode | React.ReactNode[];
  /*
   * Click: Function
   */
  onClick?: () => void;
}

const Button = styled.button<ButtonProps>`
  /* removed for brevity, check the GitHub repo */
`;

export default Button;

view on GitHub

Docz renders components live with MDX and has TypeScript support, to mention two of my favourite features.

I wont go into too much depth here as there are great articles about this written by Mohmed and Hillary.

Instead I will guide you through how I integrated docz into my side project Machine a drum machine built with React.

Click here to view live demo.

I've always wanted to build a site to document my React components but I always thought I didn't have enough time... enter docz.

What do I want to document?

As a developer working in a team I want to:

describe the interface of a React component
what props the component has
describe correct usage or integration patterns

Installing docz in a monorepo

I have a monorepo with a React client-side only app (SPA) and an Apollo GraphQL backend. All is driven by Yarn workspaces.

Project structure



📁 client
📁 server
   package.json
   ...

Decisions

I had to decide between two integration choices...

Option A

First decision I needed to make was do I want integrate docz within my existing client folder.

This possible with docz, docz will find all mdx files existing in the project and render a website from this. This would allow me to follow React feature based architecture pattern by having the component, the mdx file, the unit test all in one folder, like this:



📁 client
     feature
       Machine
         Machine.mdx
         Machine.tsx
         Machine.spec.ts
  ...

Click here to view tiny example on GitHub.

Option B

I could choose to create a third folder call it documentation and have a standalone website which I tell Yarn Workspaces about.



📁 client
📁 documentation
     Button.mdx
     Input.mdx
     Machine.mdx
     doczrc.js
     gatsby-config.js
     package.json
📁 server
   package.json
   ...

Click here to view on GitHub.

Option B is the what I went with. I like the separation of concerns, this is matter of personal taste you go with what you like. It also made it easier to deploy in the monorepo context on Netlify.

Installation

📁 root/



mkdir documentation
cd documentation

create package.json with Yarn

📁 documentation/



yarn init -y

Install docz and react and react-dom both @ version 16.8.0 as per the docz docs. I also included rimraf so I can delete the compiled .docz build directly from time to time.

📁 documentation/



/documentation/
yarn add docz react@16.8.0 react-dom@16.8.0 rimraf

Configurations

package.json

I set docz to run on port 3002 and 3003 as the React client is already using port 3000
you may notice I have also installed @nejcm/docz-theme-extended, its great do this.

📁 documentation/package.json



{
  ...
  "scripts": {
    "docz:build": "docz build",
    "docz:dev": " docz dev --port=3002",
    "docz:serve": "docz build && docz serve --port=3003",
    "docz:clean": "rimraf .docz"
  },
  "dependencies": {
    "docz": "^2.3.1",
    "react": "16.8.0",
    "react-dom": "16.8.0",
    "rimraf": "^3.0.2",
    "@nejcm/docz-theme-extended": "^2.0.14",
  }
}

As I have monorepo, I created scripts to run docz from the ROOT directory of the entire project.

I made one script to correspond to each script in docz folder. I am use concurrently to run all scripts at the same time to have all services running at the same time.

📁 root/package.json



...
"scripts": {
    "dev": "concurrently \"yarn dev:server\"   \"yarn dev:client\"  \"yarn studio\" \"yarn docz:dev\" ",
    "docz:build": "yarn --cwd documentation docz:build",
    "docz:clean": "yarn --cwd documentation docz:clean",
    "docz:dev": "yarn --cwd documentation docz:dev",
    "docz:serve": "yarn --cwd documentation docz:serve",
  }
...

In the root of documentation folder create a doczrc.js configuration file.

enable typescript features

📁 documentation/doczrc.js



export default {
  typescript: true,
};

Theme update

customize theme, set to dark mode by default, add dark and light logo
configure the side menu with Groups and sube nav items

📁 documentation/doczrc.js



export default {
  typescript: true,
  themeConfig: {
    mode: 'dark',
    logo: {
      src: {
        light: 'path/to/logo'
        dark: 'path/to/logo'
      },
      width: 260,
    },
    menu: {
      search: false,
      headings: {
        rightSide: true,
        scrollspy: true,
        depth: 3,
      },
    },
  },
  menuDisplayName: {},
  groups: { /* insert nav groups, these are the neat headings above the nav groups */},
  menu: [ /* create your nav structure here, see link below*/ ],
}

For brevity I have emptied some of the objects, you can see a completed version here on GitHub.

I wanted to extend the default style of the frontend and I found a really neat project docz-theme-extended.

Install @nejcm docz-theme-extended and configure the gatsby config like this:

📁 documentation/



yarn add @nejcm/docz-theme-extended

create a gatsby config file

📁 documentation/gatsby-config.js



module.exports = {
  plugins: [
    {
      resolve: '@nejcm/docz-theme-extended',
    },
  ],
};

With all the above correctly configured I have this to show for it:

Click here to view live demo.

Document first component

Recall that we have a monorepo, with 3 folders

client
documentation
server

Docz shines here, as we can now reach into any of these folders and bring React components into it's context for documentation.

Button.mdx

MDX is awesome, having a live component in a webpage that you can update the props and see the changes reflect immediately is great DX, I love it.

📁 documentation/Button.mdx



---
name: Button
route: /client/button
parent: Frontend
menu: Components
---

import { Playground, Props } from 'docz';
import Button from '../client/src/components/common/Button';

# Button

A Generic Button uses styled-components API to change the appearance of it.

The styling of components are done with [styled-components](https://styled-components.com).

## Usage

'''tsx
import Button from 'components/common/Button';
'''

<Props of={Button}/>

<Playground>
  <Button
    btnAlign='center'
    btnBgColor='orange'
    btnPadding='0.6'
    btnRadius='4'
    btnWidth='200'
    btnBoxShadow={true}
    className='some-class-here'
    disabled={false}
    onClick={() => console.log('Button was clicked')}
  >
    Signup
  </Button>

  <Button>
    Signup
  </Button>
</Playground>

Notice in the MDX file below I have meta data,

name (name of component)
route (builds the path in address bar)
parent (tel docz under which group to place the nav item)
menu (tel docs under which drop-down nav to place the menu item)

Notice my imports, I am importing Playground, Props. Secondly I am reaching into the client folder and including my button component into the documentation site.

Now any changes I make to the client will be reflected immediately in the documentation website.

Deploying to Netlify

I have 3 services in this monorepo now, the Machine (client), the documentation website, both are deployed to Netlify and the server to Heroku.

Configure Netlify

Configure Netlify deployment context to point to the documentation folder and run the correct build command.

Run the build command to create a production build of docz. Docz will create a .docz and in my case place a public folder inside which is what users will see.

📁 root/



yarn docz:build

I highly recommend that you use the Netlify CLI so you can test you production builds locally.

Docz site deployed

www.react-drum-docz.netlify.app

Conclusion

This one self inflicted issue I had was React version mismatch. The client was already running on react@17.0.1, being a Yarn monorepo the docz documentation site had installed react@16.8.0 docz ran into version mismatch error. I simply had to lower the version of react on the client.

The team at docz have done an amazing job of simplifying the process of building a documentation site. All the Gatsby complexity has been abstracted away and docz have exposed 3 commands to build and deploy your site.

📁 root/



yarn docs:dev
yarn docz:build
yarn docz:serve

Whether you are building single page apps or websites easily integrated into your workflow give it a try 🚀.

Click here to view live demo of drum machine.

Click here to view live demo of the Docz site.

Follow me

Twitter
Website

Typesense and React, Typesense an open-source alternative to Algolia and Elasticsearch

Mannuel — Tue, 26 Oct 2021 19:05:20 +0000

original posted in my blog here.

What is it

Typesense an open-source alternative to Algolia and Elasticsearch.

TLDR

Show me the code Click here

Otherwise keep reading 🚀

One key feature of any website or web application is the ability to search the data or content within the system. A fast and accurate search experience can improve user experience for you customers.

Building a custom search into your application can be a deeply technical and expensive endeavor in terms of hours and subscription fees. Typesense is aiming to fix those pains with it’s Open-Sourced solution to web search Typesense.

Typesense is a fast typo tolerant search engine boasting a sub-50ms search that feels instant. Typesense is built in C++, it is free to use and deploy on self hosted projects.

A few notable features include:

Typo tolerance

Typesense will automatically try to correct your typos. Typo tolerance is configurable on a per field basis.

Multi-tenant API Keys

Security through API keys, which allows you to restrict access to specific sets of data, not all apps need to have access to all your data.

Geo search

Filter data using geolocation data to retrieve data within a given radius.

Federated search

Users are able to search across multiple data sets (collections) in one HTTP request.

Other features include synonyms, tunable ranking, result pinning, filtering and faceting, dynamic sorting, easy high availability and easy version upgrades.

Client Libraries

Setting up a search experience in your web application is now trivial thanks to the official client libraries available in Ruby, Python, PHP and my personal favourite JavaScript. There are community driven libraries available for GO, C#, Laravel and Symphony. These HTTP libraries allow you to interact with Typesense servers with minimal friction and best practices baked in.

UI component libraries

If that wasn’t cool enough to further smooth the road, Typesense has UI Component adapters to help you build your UI. The Typesense Instant Search Adapter is based on Algolia open-sourced instantsearch.js. If you have experience with Algolias adapter it makes the switch to Typesense all that much smoother.

The adapter comes in 4 flavours:

Instantsearch.js
react-instantsearch
vue-instantsearch
angular-instantsearch

Demonstration

This demo should run on your localhost only. Have fun 🚀

Typesense React client

Fork it Click here

What you will see:

✨ Bootstrapped with Create Snowpack App (CSA).

Prerequisites

Node.js using npm or yarn
Docker

Use Docker for MAC/Windows etc it's the simplest for this code demo.

Available Scripts

Run the following scripts in multiple tabs in the order they appear here:

yarn

Yarn, to install all dependencies.

yarn typesenseServer

Pulls down a Typesense Docker image (v0.22.0.rcu6), sets a local data directory, maps it to the container and starts the container. Container is running on port 8180.

yarn indexer

Indexes the demo e-commerce data into Typesense. Thanks to @jasonbosco for this.

🚨 Note: environment variables are dangerously set to process.env.SNOWPACK_PUBLIC_ and should not be deployed to production servers in this demonstration state.

SNOWPACK_PUBLIC_TYPESENSE_HOST=localhost
SNOWPACK_PUBLIC_TYPESENSE_PORT=8108
SNOWPACK_PUBLIC_TYPESENSE_PROTOCOL=http
SNOWPACK_PUBLIC_TYPESENSE_SEARCH_ONLY_API_KEY=xyz
SNOWPACK_PUBLIC_TYPESENSE_ADMIN_API_KEY=xyz

yarn start

Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Snowpack.dev

yarn build

Builds a static copy of your site to the build/ folder.
Your app is ready to be deployed!

For the best production performance: Add a build bundler plugin like @snowpack/plugin-webpack or snowpack-plugin-rollup-bundle to your snowpack.config.mjs config file.

References

typesense.org/docs

Follow me

Twitter
Website

Content Security Policy on Netlify (guide)

Mannuel — Thu, 24 Jun 2021 05:05:05 +0000

After deploying your website to Netlify (or any server) naturally you will run performance tests using WebPageSpeedTest. You might notice an alarming red F or E in the top right of screen.

TL;DR

This is a security score linked to a CSP (Content-Security-Policy), it shows whether any security policies are configured. The CSP provides a way to control the loading and execution of scripts and media in your webpage.

Setting the correct directives will prevent clickjacking, code-injection, cross-site scripting, illegal embedding of your webpage in an offsite frame/iframe and allow only valid MIME types.

In my case, deploying to Netlify...

Created a netlify.toml file and placed the CSP policy like this:



[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "SAMEORIGIN"
    X-XSS-Protection = "0"
    X-Content-Type-Options = "nosniff"
    Content-Security-Policy = "default-src 'self'; style-src 'self'; form-action 'self'; script-src 'self'; connect-src 'self'; img-src 'self'; base-uri 'self';"

That is a basic starter policy it allows css, form actions, ajax requests, scripts and images from the same origin, does not allow object, frame, media.

This is bare bones setup and no Google Analytics scripts or font scripts will be allowed to execute, keep reading for more on how to make things work or checkout my final netlify.toml file

The long story

Clicking on the red E icon will load the Snyk test results, which looks like this:

The Snyk test results page:

JavaScript Libraries with vulnerabilities

On the left you can see all the newest reported vulnerabilities in popular npm packages.

Security headers

On the right you can see our very own reported Security Headers related vulnerabilities.

Snyk Results

netlify.toml

Okay back to the Headers, given these headers:



[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "SAMEORIGIN"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"
    Content-Security-Policy = "default-src 'self'; style-src 'self'; form-action 'self'; script-src 'self'; connect-src 'self'; img-src 'self'; base-uri 'self';"

Once the Policy has been set above with the above configuration.

Uploaded and test it by opening the browser dev tools. Look at the console, you will notice some new errors that you may have never seen before because you had no CSP configured.

In my case in a Netlify deploy preview-mode I saw:

60d2b0fc45694e0008dd4d32--mannuelferreira.netlify.app/:1 Refused to load the script 'https://d33wubrfki0l68.cloudfront.net/bundles/1bd814911a09d5e56b421403a658cbae5d2685ce.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

My CSP is preventing cloudfront.net above from executing in my webpage.

GREAT 🚀 looks like stuff is working.

Now I can decide to allow cloudfront.net because I trust Netlify and it's domains, so I should whitelist it by adding the domain and sub-domains to the default-src directive e.g.



Content-Security-Policy = "default-src 'self' cloudfront.net *.cloudfront.net; frame-ancestors 'self'; form-action 'self'"

Bare in mind this list has the potential to get lengthy the more scripts you plan to allow execution, you can see my netlify.toml here.

Rerun the test

WebpageSpeedTest results:

Security Headers results:

Click here to view my Security Headers report.

Not using Netlify? try one of these:

Nginx

server {} block.



server {
  ...
  add_header "X-Frame-Options" "SAMEORIGIN";
  add_header "X-XSS-Protection" "0";
  add_header "X-Content-Type-Options" "nosniff";
  add_header "Content-Security-Policy" "default-src 'self'; frame-ancestors 'self'; form-action 'self'";
  ...
}

Apache

.htaccess



<IfModule mod_headers.c>
  Header set X-Frame-Options "SAMEORIGIN"
  Header set X-XSS-Protection "0"
  Header set X-Content-Type-Options "nosniff"
  Header set Content-Security-Policy "default-src 'self'; frame-ancestors 'self'; form-action 'self'"
</IfModule>

IIS

web.config



<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
      <add name="X-XSS-Protection" value="0" />
      <add name="X-Content-Type-Options" value="nosniff" />
      <add name="Content-Security-Policy" value="default-src 'self'; frame-ancestors 'self'; form-action 'self'" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

DO NOT use X-Content-Security-Policy or X-WebKit-CSP. Their implementations are obsolete (since Firefox 23, Chrome 25), limited, inconsistent, and incredibly buggy. Read more here

Let's break it down

By adding those configurations to your server you are essentially creating a security policy.

A policy that tells the browser what to do with a request, allow it or block it based on what you've configured. Note the absence of this configuration will render your server in-secure.

(in order or appearance):

X-Frame-Options prevents click jacking by not allowing your webpage to be loaded in a frame or iframe. The SAMEORIGIN property allows a page to be loaded in a frame on the same origin as the page itself only. DEPRECATED Read more
- use Content-Security-Policy: frame-ancestors 'self'; instead
X-XSS-Protection blocks any request that is deemed to be Cross Site Scripting Attack. DEPRECATED Read more
- use Content-Security-Policy: frame-ancestors 'self'; instead
X-Content-Type-Options protects against MIME type confusion attacks, ensures to load a resource only if the correct MIME type of is a matched against what is expected.
Content-Security-Policy allows you to set a custom policy on what scripts, urls, images, fonts and resources are allowed to execute in your webpage. Any resource that is not whitelisted will not be allowed to execute.

originally posted: https://www.mannuelferreira.com/posts/content-security-policy-on-netlify-guide

Tools

References

Follow me

Twitter
Website

Forem: Mannuel

Remix, React, the Discogs API & filtermusikk.no

The data

The plan and design

The stack

The code

Type definitions

Inventory server component

fetchUserInventory function

Inventory client component

The result

Conclusion

Tmux a terminal multiplexer

Install

Ubuntu

Mac/OSX

Using it

Docs

Login to VPS without a password using SSH

1 Create ssh key

2 Add key to authorized_keys list

Follow me

Documenting React components using docz

What is docz?

How does it work?

What do I want to document?

Installing docz in a monorepo

Project structure

Decisions

Option A

Option B

Installation

Configurations

package.json

Theme update

Document first component

Button.mdx

Deploying to Netlify

Configure Netlify

Docz site deployed

Conclusion

Follow me

Typesense and React, Typesense an open-source alternative to Algolia and Elasticsearch

What is it

TLDR

A few notable features include:

Typo tolerance

Multi-tenant API Keys

Geo search

Federated search

Client Libraries

UI component libraries

The adapter comes in 4 flavours:

Demonstration

Typesense React client

Prerequisites

Available Scripts

Snowpack.dev

Links

References

Follow me

Content Security Policy on Netlify (guide)

TL;DR

The long story

JavaScript Libraries with vulnerabilities

Security headers

netlify.toml

Rerun the test

Nginx

Apache

IIS

Let's break it down

Tools

References

Follow me

2 Add key to `authorized_keys` list