Starting a new project

Starting a new project

To create a new project, run tinloof-remix new or select "Start new project (new)" from the list of available commands in tinloof-remix. You'll need to answer the questions asked by the CLI, of which the most important is which template to use:

  • Shopify store - if you're building e-commerce sites with platforms other than Shopify, this is still recommended as a means for gathering inspiration on how to implement features like product filtering, carts, currency selection, etc.
  • Base template - option for any website that isn't a store

Different templates, same core

Both templates share dozens of files and follow the same Sanity <-> Remix architecture (which we cover in File structure & architecture basics. However, the Shopify store overwrites some of these files and adds many more due to its increased complexity.

Setting up the project

After you've created your folder, follow the steps below to set-up your project:

Install dependencies

We recommend using npm instead of yarn or pnpm.

npm install
# or
yarn
# or
pnpm install

Populate your .env file

The CLI will create a .env file for you, with some values populated based on what you've answered in the tinloof-remix new prompts. You'll need to fill in the rest of the values yourself. Their different meanings are documented in the comments above them, and you can always reach out for help if you're unsure how to get them.

⚠️

Don't commit your .env file

Make sure .env is in your .gitignore, so that you don't accidentally commit it to your repository. This is the default behavior of the templates.

2.1 Creating a Sanity project (if you don't have one already)

Unfortunately, you can only create a new Sanity project from their CLI. That said, you can skip creating their templates by stopping the terminal process before it completes, right after you get your project ID:

# 1. Run their creation package
npm create sanity@latest
 
# 2. Install create-sanity
 
# 3. Log-in if you aren't already
 
# 4. Choose "Create new project"
 
# 5. Give it a descriptive name you'll find later
 
# 6. Select an organization - pick Tinloof if available & applicable
 
# 7. Don't choose the "default dataset configuration",
# instead create a "production" dataset that is private
 
# 8. After the dataset is created, quit the program when it asks for "Project output path"

Now, go into sanity.io/manage (opens in a new tab) and you'll find your project there, under your organization of choice.

Note: this flow was lest tested with create-sanity@3.12.0 on June 2023

Ensure minimal singletons are in place

Go through the singletons in app/config.ts, make sure they make sense to your project and, when ready, run npm run cli singletons to create them in your Sanity dataset. You don't have to add all of them in one go, you can always do it later as the project evolves.

The CLI will fetch the existing singletons from Sanity, compare them to how they should look like according to your configuration, and suggest a list of patches/mutations to run in Sanity, which you can choose to execute or not:

Running tinloof-remix singletons in the terminal (w/ npm run cli singletons)
? What do you want to do? Create/update singletons (singletons)
? Which operations do you want to perform on singletons?
(Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◉ patch homepage__i18n_en: {"set":{"internalTitle":"Homepage (new title)"}}
 ◉ patch drafts.homepage__i18n_en: {"set":{"internalTitle":"Homepage (new title)"}}
 ◯ patch homepage__i18n_fr: {"set":{"internalTitle":"Homepage (new title)"}}
❯◯ patch homepage__i18n_es: {"set":{"internalTitle":"Homepage (new title)"}}
 ◉ patch blogIndex__i18n_es: {"set":{"routePath.current":"articulos-informativos"}}
 
# In the above, we're skipping patching homepage FR & ES by unticking their checkboxes

Doing so will ensure you've got the minimal documents to run your site, like global settings, header & footer (although w/o links), the homepage, 404, etc.

Run your project in dev mode

Now that it's configured, you can always start development mode with:

npm run dev

Generate favicons for your site

  • Export a 512x512 PNG from the brand's logo
  • Go to https://favicon-generator.org/ (opens in a new tab), add the original PNG and generate variations
  • Extract the favicons .zip into the public/favicons folder
  • Move favicon.ico to the root public folder to comply with browsers' standards

Read through the toolkit's architecture

This will clarify how the toolkit works, how it's structured, and how to extend it. It will save a lot of headache.

IntroductionFile structure & architecture basics