Remix tutorial

Build your first Remix starter with Contentful. Combining Remix with a headless CMS like Contentful increases performance, speeds up build times, and greatly improves developer experience.
Web editor art illustration with Remix logo
What is Remix
Remix is a full stack web framework that focuses developer attention on the user interface. In working through web standards, this framework helps to deliver a timely, modern user experience.
1
Create a new Remix project

With our Remix stack, you’ll have a portfolio website up and running in no time. The stack uses Tailwind CSS for design and the Contentful GraphQL API to fetch content. The best part? Remix’s single code base — which lets developers write front and back-end code in one place.

Run the following command in your terminal to clone the Contentful Remix stack.

Enter a name for your project.

Select your preferred language TypeScript/JavaScript and type Y to install the dependencies.

NOTE: When prompted to install dependencies, if you enter n, run the npm install command. This will install the dependencies manually.

2
Set up the content model

This starter comes with a script to import the required content model and sample content into your Contentful space.

Space ID, Content Delivery API, and the Content Management API.

When prompted, enter IDs for the following into the terminal: Space ID, Content Delivery API, and the Content Management API. This will initialize the project, create a new file with the filename .env, and store the credentials in that file.

3
Run the development server

To start the development server, run the following command in your terminal.

To view the portfolio, navigate to localhost:3000.

4
Push to GitHub

Create a new repository on GitHub, GitLab, or Bitbucket.

Commit the changes and push the code to the new repository.

Make sure to use the correct GitHub username and the repository name.


5
Deploy to Netlify

Create an account on Netlify.

Click Add new site or Import from Git.

Under the Connect to Git provider section, select GitHub and provide the required authorization.

If you are using GitLab or BitBucket, select that instead.

Once authorized, select your newly created GitHub repository.

To add the Contentful credentials - CONTENTFUL_SPACE_ID and CONTENTFUL_ACCESS_TOKEN, click Show advanced. Then, click New variable and add the environment variables.

To deploy, click Deploy site.

On successful deployment, you’ll be able to view your site live!

Create a Contentful and Remix blog

CLI icon with remix logo and contentful logo

Choose your technology path with our language and framework agnostic CMS

Bundle of technologies that can be used with Contentful.
Partner with us
Contact us
Structured Content
add-circle arrow-right remove style-two-pin-marker subtract-circle remove