Let's get you up and running with Rack & Pinion
This guide is intended to get you up and running with a project quickly so you can follow along with the docs and start building!
Rack & Pinion aims to be best in class Dev Ex for building design focused marketing websites. The first thing we will need to do is setup our 3 primary technologies NextJS, Sanity and Vercel.
You should already be familiar, but just in case:
NextJS is the Javascript framework that scaffolds our component files, handles routing and even has the ability to create API endpoints
Sanity is an open source CMS, tailored for headless. It has some major benefits when it comes to serving images over the network and is highly customizable.
Vercel, the makers of NextJS, host sites pre-configured for a continuous deployment workflow. Vercel builds our static sites from branches that can then be previewed, even commented on before promoting
Navigate to the Rack and Pinion repository and in the top corner where you would normally the code dropdown, click "Use This Template"
Name the new project [project-name]-rack-pinion
That's all for now, we'll come back to this repo later.
The first thing you'll want to do is ensure you have installed the Sanity CLI,
been added to the correct Sanity Team and logged in. Check this by running sanity manage.
Once you have the CLI setup create a new Sanity instance by running sanity init. You will be prompted to create a new project or select an existing one. For the Getting Started Guide we are going to create a new project.
In creating the project you will be notified that the default dataset configuration has a public dataset named "production". Select Yes.
Continue with the defaults UNTIL prompted to select a project template. Ensure you select Clean project with no predefined schemas as your project template.
After initializing the project with the Sanity CLI, remove the entire boilerplate project created by the CLI from the root directory and clone the contents of your newly created Rack & Pinion github repo in.
Once the project repo contents have been cloned into your project directory rename the example.env file at the root of the project to .env. From the root of the project make sure all dependencies have been installed before moving on, ensuring you have used the preferred package manager Yarn, then use this link: https://manage.sanity.io/projects, select the project we just created and go to “Settings” then select “API”.
Add http://localhost:3000 as a CORS origin and allow credentials. More preview domains will be added later.
Next, move a little further down the page, to create your token with read & write permissions. You can name this SANITY_STUDIO_APP_TOKEN consistent with the .env variable name. Ensure permissions are set to "Editor" and copy this into your .env file.
Inside .env add the Sanity Studio Project ID, from the Sanity dashboard to the SANITY_STUDIO_API_PROJECT_ID .env variable.
Hit up this link: vercel.com/gearboxbuilt. In the top corner, hit Add New -> Project and continue with GitHub. Import your repository.
In the project configuration add these preferences:
Framework Preset: Next.js
Set the Root Directory to apps/web. R&P has several subdirectories that we’ll dive into later on, but this is where all the components, pages and layouts will live.
Build & Output Settings, Build Command: cd ../../ && npx turbo run build --scope=web --include-dependencies --no-deps --force (this seems extreme, but it’s how we leverage TurboRepo for our builds).
Build & Output Settings, Install Command: yarn install
Environment Variables: In the root of the project, go back to our previously created .env file. Some of the values are empty, and some have universal values that we use in all projects. For now, add these variables to Vercel with the corresponding values:
SANITY_STUDIO_API_PROJECT_ID - we configured this in the sanity setup
SANITY_STUDIO_API_DATASET - use the default value from the renamed example.env file. production
SANITY_STUDIO_API_VERSION - use the default value from the renamed example.env file.
SANITY_STUDIO_APP_TOKEN - we configured this in the sanity setup
SANITY_STUDIO_PROJECT_NAME - we configured this in the sanity setup this value will be used to customize the Sanity dashboard.
NEXT_PUBLIC_URL - Primary domain of the website. This is used for the sitemap.xml eg: https://gearboxbuilt.com
Deploy, and have a short stretch while you wait...
In "Next Steps" or from the Settings view we are able to Add Domains. We want to add a fixed url for development previews [your-repo-name].gearboxbuilt.com (more below). To do this we will have to go to our Gearbox Cloudflare account and set up this alias in our DNS. The login info can be found in OnePassword.
Click “Gearbox Account”
Select “gearboxbuilt.com”
On the sidebar, click DNS.
Add the new CNAME record for [your-repo-name]. In our case this looks like CNAME getting-started-rack-pinion cname.vercel-dns.com and ensure you turn off the proxy option
Go back to Vercel and add the new domain, eg. getting-started-rack-pinion.gearboxbuilt.com. It will then verify information you populated in Cloudflare. Troubleshoot by following any errors provided in Vercel.
First ensure you have the Vercel CLI installed on your machine.
Next run the vercel link command.
Follow the instructions provided by the CLI tool to connect the local project to the Vercel Deployment
You can now run and preview the project locally. Any changes pushed to Github and merged into the develop branch will be visible at the previously created preview url. If you're having trouble building locally, reimport your environment variables with vercel env pull