{"id":27793,"date":"2022-03-21T19:09:30","date_gmt":"2022-03-21T19:09:30","guid":{"rendered":"http:\/\/Adding-Custom-Branding-to-a-Redwood-App"},"modified":"2022-03-21T19:09:30","modified_gmt":"2022-03-21T19:09:30","slug":"adding-custom-branding-to-a-redwood-app","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/","title":{"rendered":"Adding Custom Branding to a Redwood App"},"content":{"rendered":"

Many organizations want some ability to use a service to handle some of their functionality and customize the interface users are shown. This includes things like the names they see displayed, data they want to be shown, or some images they want to see. Giving them the ability to add their own branding is one way to add value to your own products.<\/p>\n

In this Redwood tutorial, we\u2019ll make an app that will change formats depending on what user is associated with the page.<\/p>\n

Create the Redwood app<\/h2>\n

First thing we need to do is spin up a new app. In a terminal, run:<\/p>\n

yarn create redwood-app branding\n<\/code><\/span><\/pre>\n
When this is done, you\u2019ll have a bunch of new files and folders in a branding<\/code> directory. The main folders we\u2019ll be working in are the api<\/code> and web<\/code> folders. We\u2019ll start with some work in the api<\/code> folder first.<\/p>\n
Setting up the model<\/h2>\n
Building our app by making the models for the database schema works really well in Redwood. I usually like to start here because it\u2019s one way you can start thinking about your business logic from the beginning.<\/p>\n
We\u2019ll be using a Postgres database. Here are the docs to get Postgres installed locally<\/a>. Let\u2019s start by updating the .env<\/code> file with a connection string for your local instance. Uncomment the DATABASE_URL<\/code> line and update the value. It might look something like this.<\/p>\n
DATABASE_URL=postgres:\/\/admin:password@localhost:5432\/branding<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we can go to api > db<\/code> and open the schema.prisam<\/code> file. This is where we\u2019ll add our models. One thing we need to do is update the provider<\/code> value at the top to postgresql<\/code> instead of sqlite<\/code>. Next, you can delete the existing example model and add these.<\/p>\n
model User {\n  id     Int      @id @default<\/span>(autoincrement())\n  name   String<\/span>\n  info   Info[]\n  image  Image[]\n  layout Layout[]\n}\n\nmodel Image {\n  id     Int    @id @default<\/span>(autoincrement())\n  name   String<\/span>\n  url    String<\/span>\n  user   User   @relation(fields: [userId], references<\/span>: [id])\n  userId Int\n}\n\nmodel Info {\n  id        Int      @id @default<\/span>(autoincrement())\n  balance   Float\n  lastLogin DateTime\n  endDate   DateTime\n  user      User     @relation(fields: [userId], references<\/span>: [id])\n  userId    Int\n}\n\nmodel Layout {\n  id           Int    @id @default<\/span>(autoincrement())\n  name         String<\/span>\n  dataLocation String<\/span>\n  imageUrl     String<\/span>\n  user         User   @relation(fields: [userId], references<\/span>: [id])\n  userId       Int\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Usually, when you have relationships between tables like we have here, it\u2019s a good idea to seed your database with some initial values. You\u2019ll see this pretty often with apps that have dropdown menus or pre-defined user roles.<\/p>\n
We\u2019ll be adding our own seed data in the seed.js<\/code> file. You can open that and delete all of the commented-out code in the main<\/code> function and replace it with this.<\/p>\n
await<\/span> db<\/span>.user<\/span>.create<\/span>({\n  data<\/span>: { name: 'Nimothy'<\/span> },\n})\n\nawait<\/span> db<\/span>.image<\/span>.create<\/span>({\n  data<\/span>: {\n    name: 'Nimothy Profile'<\/span>,\n    url: 'https:\/\/res.cloudinary.com\/milecia\/image\/upload\/v1606580774\/fish-vegetables.jpg'<\/span>,\n    userId: 1<\/span>,\n  },\n})\n\nawait<\/span> db<\/span>.info<\/span>.create<\/span>({\n  data<\/span>: {\n    balance: 7.89<\/span>,\n    lastLogin: new Date<\/span>(),\n    endDate: new Date<\/span>(),\n    userId: 1<\/span>,\n  },\n})\n\nawait<\/span> db<\/span>.layout<\/span>.create<\/span>({\n  data<\/span>: {\n    name: 'MidLeft'<\/span>,\n    dataLocation: 'mid-left'<\/span>,\n    imageUrl:\n      'https:\/\/res.cloudinary.com\/milecia\/image\/upload\/v1606580774\/fish-vegetables.jpg'<\/span>,\n    userId: 1<\/span>,\n  },\n})\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Run migration<\/h3>\n
With our models and seed data in place, we can migrate the database with this command:<\/p>\n
yarn rw prisma migrate dev\n<\/code><\/span><\/pre>\n
That will add the tables and columns with the defined relationships to your Postgres instance. To seed the database, we\u2019ll need to run:<\/p>\n
yarn rw prisma db seed\n<\/code><\/span><\/pre>\n
This will add the placeholder data we created in seed.js<\/code> so that the relationships between tables and columns are met and don\u2019t cause errors with our app.<\/p>\n
Since we\u2019ve run the migration and seeding, we can move on to the back-end and front-end.<\/p>\n
Making the back-end and front-end<\/h2>\n
We\u2019re going to make the functionality to add new layouts and new users to the app for now so that we can show how things update for the user. We\u2019ll also be adding a special page to show how these updates would actually affect users.<\/p>\n
For the sake of this project, we\u2019re going to assume that adding new users and layouts is admin functionality that users of the app won\u2019t be able to see. Later on, we\u2019ll add the user view that applies the custom branding.<\/p>\n
Adding the ability to create and update users and layouts only takes a couple of commands in Redwood. Let\u2019s start by making the users functionality with this:<\/p>\n
yarn rw g scaffold user\n<\/code><\/span><\/pre>\n
This will generate the back-end GraphQL types and resolvers as well as adding new components to the front-end. We\u2019ll run this command one more time for the layouts functionality:<\/p>\n
yarn rw g scaffold layout\n<\/code><\/span><\/pre>\n
You can take a look at the code Redwood generated to make all of this work on the front-end by going through the web > src<\/code> directory. There are new files under components<\/code>, layouts<\/code>, and pages<\/code>, plus Routes.js<\/code> has been updated. All of the new files you see were created by that scaffold<\/code> command for those two models.<\/p>\n
The back-end code that supports new user and layout creation and the edit and delete functionality can be found in the api > src<\/code> directory. You\u2019ll see new files under graphql<\/code> and services<\/code> that hold the GraphQL types and resolvers that make all of the CRUD work and persists the data.<\/p>\n
Now we have the CRUD for the front-end and back-end for these two models. You can run the scaffold<\/code> command to create the CRUD for the other models, but we don\u2019t actually need it. What we do<\/em> need are the types for those models. We can generate those with a couple of Redwood commands:<\/p>\n
yarn rw g sdl info\nyarn rw g sdl image\n<\/code><\/span><\/pre>\n
The sdl<\/code> generator makes all of the GraphQL types and a resolver for the specified model. If you check out api > src > graphql<\/code>, you\u2019ll see the new types that were generated for info and images. Then if you look in api > src > service<\/code>, you\u2019ll see that a resolver has been made to handle a query for us for both info and images.<\/p>\n
The reason we\u2019re adding these types is so the user types reference these so we need them to be available, even if we aren\u2019t adding the front-end piece.<\/p>\n
Running the updated app<\/h3>\n
If you run your app with yarn rw dev<\/code> and navigate to localhost:8910\/users<\/code>, you\u2019ll see a table and buttons for different ways to interact with the data. You should see something similar to this:<\/p>\n
\"users<\/p>\n
Go ahead and add a new user by clicking the \u201cNew User\u201d button. This will open the form like this:<\/p>\n
\"new<\/p>\n
Now you can add a new layout for this new user by going to localhost:8910\/layouts<\/code> and clicking the \u201cNew Layout\u201d button. It\u2019ll bring up this form:<\/p>\n
\"new<\/p>\n
Show the user their custom view<\/h2>\n
Now that we\u2019ve got the core functionality together to create users and associate layouts with them, we can create the custom view that they will see. To do that, we\u2019ll use Redwood to generate a page that will load a specific user\u2019s layout. Make a new page with this command:<\/p>\n
yarn rw g page option\n<\/code><\/span><\/pre>\n
This will add a new page to the web > src > pages<\/code> directory and it will update the Routes.js<\/code> file with a new \/option<\/code> route. If you navigate to localhost:8910\/option<\/code>, you\u2019ll see this:<\/p>\n
\"option<\/p>\n
We need to update this page to show the user\u2019s layout by pulling some data from the back-end.<\/p>\n
Querying for the user layout<\/h3>\n
In the web > src > pages > OptionPage<\/code> directory, open the OptionPage.js<\/code> file and add the following import to get your GraphQL query ready.<\/p>\n
import<\/span> { useQuery } from<\/span> '@redwoodjs\/web'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then at the bottom of the file, right above the export statement, add this code for the query.<\/p>\n
const<\/span> LAYOUT = gql`\n  query layout($id: Int!) {\n    layout(id: $id) {\n      id\n      name\n      dataLocation\n      imageUrl\n      userId\n    }\n  }\n`\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
This will give us a specific layout based on the id we pass to the query. We\u2019ll be manually setting this id to mimic what we might get from a prop from a different component. We\u2019ll add the variable for the id in our query hook. This will be added inside of the OptionPage<\/code> component:<\/p>\n
const<\/span> { loading, data } = useQuery(LAYOUT, {\n  variables<\/span>: { id<\/span>: 1<\/span> },\n})\n\nif<\/span> (loading) {\n  return<\/span> <div<\/span>><\/span>Loading...<\/div<\/span>><\/span><\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019re using the useQuery<\/code> hook to execute the query we made earlier and we\u2019re manually setting the id of the layout we want to use. Then we\u2019re checking the load status for the data and rendering an indicator that the page is loading the content so that the user doesn\u2019t see an error before the fetch finishes.<\/p>\n
The last thing we\u2019ll do is update the elements to show in the layout format we currently have loaded.<\/p>\n
Updating the page<\/h3>\n
To show the right layout, we\u2019re going to install the styled-components<\/code> package. That way we\u2019ll be able to pass props to update the layout based on the user viewing the page. So in the web<\/code> directory in your terminal, run:<\/p>\n
yarn add styled-components\n<\/code><\/span><\/pre>\n
Now we\u2019re going to import that package in the OptionPage.js<\/code> file.<\/p>\n
import<\/span> styled from<\/span> 'styled-components'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then we need to add a new styled component to handle the location of the image based on that user layout. We\u2019ll add this right above the OptionPage<\/code> component.<\/p>\n
const<\/span> Img = styled.img`\n  display: block;\n  position: absolute;\n  top: ${(props) => (props.dataLocation === 'mid-left'<\/span> ? '35%'<\/span> : 'unset'<\/span>)}<\/span>;\n  right: ${(props) => (props.dataLocation === 'mid-left'<\/span> ? 'unset'<\/span> : '0'<\/span>)}<\/span>;\n  width: 360px;\n`<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
We\u2019re doing a simple update of the image location with an absolute position setup. This will let the image move independently of the other elements on the page so that the user sees it in the place they\u2019ve selected. We\u2019re passing in the dataLocation<\/code> value as a prop.<\/p>\n
Cleaning things up<\/h3>\n
Just a few finishing touches and we\u2019ll have this layout working. First, we need to add the Img<\/code> to OptionPage<\/code>. We\u2019ll delete the existing Link<\/code> from the return statement and add this image instead.<\/p>\n
<Img<\/span> src<\/span>={data.layout.imageUrl}<\/span> dataLocation<\/span>={data.layout.dataLocation}<\/span> \/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We\u2019ll also add a little line to show the name of the current layout. This will go below the description of the file location.<\/p>\n
<p<\/span>><\/span>{data.layout.name}<\/p<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
That\u2019s it! We\u2019ve finished up this app. Now if you run the app with yarn rw dev<\/code>, you should see something similar to this.<\/p>\n
\"user<\/p>\n
If you update the id<\/code> in the query variable to 2<\/code> and reload the browser, you\u2019ll see something like this.<\/p>\n
\"user<\/p>\n
Finished code<\/h2>\n
If you want to check out the complete code, you can check it out in the custom-app-branding<\/code> folder of this repo<\/a>. You can also check out the front-end in this Code Sandbox<\/a>.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Conclusion<\/h2>\n
If you\u2019re interested in a deeper dive on how Redwood handles scaffolding or the general way it creates files for you, make sure to go through their docs<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27794,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,177,246,371],"class_list":["post-27793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-javascript","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nAdding Custom Branding to a Redwood App<\/title>\n<meta name=\"description\" content=\"You might end up working on a project with multiple users who want different layouts for their dashboards. Users typically like to have some level of customization over the applications they use and we're going to cover how to do that with Redwood.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Custom Branding to a Redwood App\" \/>\n<meta property=\"og:description\" content=\"You might end up working on a project with multiple users who want different layouts for their dashboards. Users typically like to have some level of customization over the applications they use and we're going to cover how to do that with Redwood.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-21T19:09:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926258\/Web_Assets\/blog\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"5460\" \/>\n\t<meta property=\"og:image:height\" content=\"3642\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Adding Custom Branding to a Redwood App\",\"datePublished\":\"2022-03-21T19:09:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926258\/Web_Assets\/blog\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Javascript\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/\",\"name\":\"Adding Custom Branding to a Redwood App\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926258\/Web_Assets\/blog\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac.jpg?_i=AA\",\"datePublished\":\"2022-03-21T19:09:30+00:00\",\"description\":\"You might end up working on a project with multiple users who want different layouts for their dashboards. Users typically like to have some level of customization over the applications they use and we're going to cover how to do that with Redwood.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926258\/Web_Assets\/blog\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926258\/Web_Assets\/blog\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac.jpg?_i=AA\",\"width\":5460,\"height\":3642},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Custom Branding to a Redwood App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Adding Custom Branding to a Redwood App","description":"You might end up working on a project with multiple users who want different layouts for their dashboards. Users typically like to have some level of customization over the applications they use and we're going to cover how to do that with Redwood.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/","og_locale":"en_US","og_type":"article","og_title":"Adding Custom Branding to a Redwood App","og_description":"You might end up working on a project with multiple users who want different layouts for their dashboards. Users typically like to have some level of customization over the applications they use and we're going to cover how to do that with Redwood.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-21T19:09:30+00:00","og_image":[{"width":5460,"height":3642,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926258\/Web_Assets\/blog\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/"},"author":{"name":"","@id":""},"headline":"Adding Custom Branding to a Redwood App","datePublished":"2022-03-21T19:09:30+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926258\/Web_Assets\/blog\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac.jpg?_i=AA","keywords":["Guest Post","Image","Javascript","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/","name":"Adding Custom Branding to a Redwood App","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926258\/Web_Assets\/blog\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac.jpg?_i=AA","datePublished":"2022-03-21T19:09:30+00:00","description":"You might end up working on a project with multiple users who want different layouts for their dashboards. Users typically like to have some level of customization over the applications they use and we're going to cover how to do that with Redwood.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926258\/Web_Assets\/blog\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926258\/Web_Assets\/blog\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac.jpg?_i=AA","width":5460,"height":3642},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/adding-custom-branding-to-a-redwood-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adding Custom Branding to a Redwood App"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926258\/Web_Assets\/blog\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac\/194c0c513d6a0dd48c62c7a349777056fdec389b-5460x3642-1_27794aacac.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27793"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27793\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27794"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}