Using staticfiles in a Django app deployed on Railway

Davide Fiorini — Mon, 03 Jul 2023 16:06:05 +0000

Are you trying to use static files in your Django project deployed on Railway platform?

I make this guide not only for myself (yeah I have a not-so-good memory and keeping here my notes could be a good choice where I can check anytime I stuck in some problem), but for everyone else as well that are not able to deploy their Django app, so here I wrote a list of good actions to follow in order deploy the app.
This guide is valid either you have DEBUG=False or DEBUG=True.

Sooo now pay attention to these steps in order not to run into an error:

Keep watching on this template startCommand command at https://github.com/railwayapp-templates/django/blob/main/railway.json
that has the same content that has to be used in our Procfile
and https://github.com/railwayapp-templates/django/blob/main/mysite/settings.py
which may have new settings to add to our settings.py.
Keep track of the latest whitenoise docs at: https://whitenoise.readthedocs.io/en/latest/django.html
Keep watching also of the official docs for further or new explanations at:
https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Deployment
Make sure there is command collectstatic inside the Procfile or deploy command section of Railway settings app.
Make sure that on Railway settings of the app there is no Deploy -> Start Command set value since there is already inside the Procfile or viceversa.
Make sure that on Railway settings of the app there is the correct path / or subpath /... at General -> Root Directory set.
Make sure that requirements.txt, Procfile and runtime.txt are in the same folder of the Django manage.py file.
Make sure that inside Procfile there is the right myapp.wsgi command text.

Ok that's all folks, have a nice coding!

Using custom fonts in a Chakra UI - React app

Davide Fiorini — Sat, 20 May 2023 23:07:21 +0000

I was trying to add and use custom fonts files in my React app styled with Chakra UI, so I've been reading from its official documentation to get it.

Unfortunately, following the docs doesn't work, and the app seems not consider files imported with css @font-face rules in <Fonts /> component.

In the meantime, I opened an issue on the official GitHub repository in order to highlight this point to the project maintainers.

Anyway, after some testing, I was finally able to use custom font files inside my app (made with Create-React-App), using a alternative way to import them.
I uploaded my ttf files inside my project in a folder named assets, but obviously you can put it where you want.
If you are wondering how to do that, follow the steps I'm writing below.

However, after some tests, I was finally able to use my custom font inside the app. If you are wondering how to do that, follow the steps I'm going to write below, and in the end the project folder structure will be like:

├── src
│   ├── assets
│   │   ├── Quincy-CF-Regular.ttf
│   │   ├── Quincy-CF-Italic.ttf
│   ├── styles.css
│   ├── theme.js
│   ├── Foobar.js

STEPS:

1) First of all upload your files inside the project. I uploaded in a folder named 'assets' (although you can put them where you want).

2) Create a file styles.css and import it in index.js

@font-face {
  font-family: "Quincy CF Regular";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("./assets/Quincy-CF-Regular.ttf") format("truetype");
  unicode-range: U+20, U+21, U+23, U+26-29, U+2C-33, U+35-38, U+3A, U+3F,
    U+41-57, U+61-7A, U+A9, U+E9, U+2013, U+2014, U+2026, U+2AF6, U+1F44B;
}

@font-face {
  font-family: "Quincy CF Light";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("./assets/Quincy-CF-Italic.ttf") format("truetype");
  unicode-range: U+20, U+21, U+23, U+26-29, U+2C-33, U+35-38, U+3A, U+3F,
    U+41-57, U+61-7A, U+A9, U+E9, U+2013, U+2014, U+2026, U+2AF6, U+1F44B;
}

If you have woff/woff2 files, just swap the source descriptor with this one:

src: url("./assets/Quincy-CF-Regular.woff2") format("woff2");

3) Create the file theme.js

import { extendTheme, theme as base } from "@chakra-ui/react";

const fonts = {
  myHeading: `'Quincy CF Regular', ${base.fonts?.heading}, sans-serif`,
  myBody: `'Quincy CF Light', ${base.fonts?.body}, sans-serif`,
};

const theme = extendTheme({ fonts });

export default theme;

4) Create the component Foobar.js is going to use our fonts

import { Box, Heading, Text } from "@chakra-ui/react";

export const Foobar = () => {
  return (
    <Box>
      <Heading size="md" fontFamily="myHeading">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </Heading>
      <Text fontFamily="myBody">
        Sed do eiusmod tempor incididunt ut labore et dolore.
      </Text>
    </Box>
  );
};

That's it folks. 🙌
Let me know if this guide has been helpful to you!

DEV Community: Davide Fiorini

Using staticfiles in a Django app deployed on Railway

Using custom fonts in a Chakra UI - React app