Error loading CSS file on Google App Engine

I attempted to add a CSS file as a static file in my project just to experiment with how it functions, but encountered difficulties right from the start.

The content of the CSS file is:

body {
    background:#00FF00;
}

In addition, here is my configuration in the app.yaml file:

application: s~my_app_id
version: 1
runtime: python27
api_version: 1
threadsafe: yes

handlers:
- url: /stylesheets
  static_dir: stylesheets

- url: /favicon\.ico
  static_files: favicon.ico
  upload: favicon\.ico

- url: /.*
  script: main.app

- url: /remote_api
  script: google.appengine.ext.remote_api.handler.application
  login: admin

libraries:
- name: webapp2
  version: 2.5.1

- name: jinja2
  version: latest

builtins:
- remote_api: on

The CSS file does not seem to be applied either locally or after deployment. Here is the content of my page in main.py:

<!DOCTYPE html>
    <html>
       <head>
          <link type="text/css" rel="stylesheet" href="stylesheets/main.css"/>
       </head>
       <body>
          some stuff
       </body>
   </html>

This is what the page looks like in the browser:

<html>
    <head>
       <style type="text/css"></style>
    </head>
    <body>
        some stuff
    </body>
</html>

Despite not seeing any errors or logs, everything seems to be functioning properly. I have tested this in both Chrome and IE10 browsers.

Answer №1

I suggest declaring it in your app.yaml file like this:

application: my-gae-app
version: 2013
runtime: python27
api_version: 1
threadsafe: true

default_expiration: "14d 5h"

handlers:
- url: /css
  static_dir: css

If you follow the above declaration, the CSS will load properly. Make sure to also reference it correctly in your HTML:

<link href="/css/index.css" rel="stylesheet" type="text/css">

For more information, check out the documentation.

Answer №2

After removing and readding the project to the App Engine SDK, it miraculously started functioning properly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing the SVG font size through custom CSS styling

Working with an SVG element and utilizing CSS to adjust the font-size of the text within the SVG. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720"> <rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"& ...

Is has-danger feature no longer supported in the latest version of Bootstrap v4 beta?

The Bootstrap migration guide mentions: The .has-error class has been renamed to .has-danger. However, I have found that this change does not seem to take effect. The border and text are not colored as expected. For instance: <div class="form-grou ...

What is the frequency of page rendering in Angular 2 before displaying it?

I've been working with Angular 2 on a project lately. In my template, I have a simple div that triggers a function in my .ts file to display basic text like so: <div>{{ test() }}</div> test(): void { console.log("Test text") ...

I am interested in extracting information from a website by utilizing PHP

Can data be scrapped from a website using PHP without the use of any external tools? I attempted with the following code, but it proved to be insufficient: <?php $url = 'http://www.example.com'; $output = file_get_contents($url); echo $output ...

Angular background image not displayed

After searching extensively, I came across many examples that didn't work for me. I'm not sure what I'm doing wrong and I need assistance! I noticed that I can see the image if I use the <img> tag, but not when I try to set it as a ba ...

Organize objects and reconstruct the inventory

I am working with a nested list that contains some string data. My goal is to iterate through the top-level items and group together those that are the same. Then, I want to split the strings inside by comma, creating separate items for each, and nest all ...

What could be causing this image to disregard the designated width value?

https://i.stack.imgur.com/bPH4t.png While working on my project with Next.js, I encountered an issue with the IconText component provided by Next.js. Even though I specified a width value for the image, it seems to be ignoring it. Below is the structure o ...

What are some strategies for increasing my website's mobile responsiveness?

I've recently completed my online portfolio, and it appears to be functioning properly on desktop computers. However, I'm encountering responsiveness issues when viewing it on other devices or smartphones. Even though I have included the necessar ...

Adding rows to a database can be done by utilizing a dynamic form that consists of both repeatable and unique fields

Here is my follow-up post addressing the issue I previously encountered. Initially, I erroneously used mysql instead of mysqli, but I have now made the necessary updates based on recommendations. I have a form that contains variable sets of fields (rangin ...

React - using dangerouslySetInnerHTML does not display the expected output

When I enter the following text in the textbox labeled "Type Here" AAA: <HEllo> BBB: <HE llo> The desired result should be identical to what is entered in the "Type Here" box. However, the actual result box does not display the same output ...

Steps to retrieve the final page number from ngx-pagination with Angular

Is there a way to utilize Custom templates within ngx-pagination in order to ensure that the first and last buttons function properly when clicked? Currently, I have utilized pagination-template to accomplish this... How can I dynamically determine the la ...

Creating client side scripts for an ajax call to generate a Json object is simple once you understand the basics

Typically, when I make ajax calls, I request pure HTML. However, for various reasons, I require guidance on constructing a table (let's say of individuals and their information) when receiving a Json object. While I am capable of creating a table in J ...

Executing Javascript without invoking the default behavior

Recently, I've been delving into the world of JavaScript and experimenting with the prevent default command for ajax pagination. Here's the code I've come up with: http://jsfiddle.net/6pqfH/2/ $('.pagination').click(function(e){ ...

What could be causing the occasional appearance of a tiny glitch, like a pixel dot, below a menu item when utilizing this hover effect?

Occasionally, a tiny dot appears almost imperceptibly, like the one below the "prices" menu item: https://i.stack.imgur.com/kyaP3.png This is the hover effect code I created: :root { box-sizing: border-box; } *, *::before, *::after { box-sizing: ...

How can I dynamically pass a background:url using JavaScript to CSS?

I have a CSS code snippet below that I would like to dynamically change the "background:url" part using Javascript. div{ background: url('pinkFlower.jpg') no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; ...

Is it possible to set spacing between the rows of an HTML table without also setting spacing for the columns?

Is there a way to add spacing between the rows of a table without affecting the columns? ...

The Tomcat HtmlUnit filter seems to be unable to detect the specified URLs

I'm facing an issue with my web.xml configuration that looks like this: <filter> <filter-name>crawlFilter</filter-name> <filter-class>path.CrawlFilter</filter-class> </filter> <filter-mapping> ...

The NPM Install process seems to be skipping certain files that were successfully installed in the past

When I first installed NPM Install in a folder, it created multiple folders and files: node_modules public src .DS_Store package.json package-lock.json webpack.config.js After that, npm start functioned perfectly. Now, as I embark on a new project for th ...

"Integrating backgrounds into divs disrupts the overall design aesthetic

One of the challenges I faced was trying to space out the three columns in my Bootstrap row while also splitting each column into two parts. After doing some research, here's the solution I came up with: <div class="container row h-100 mx-auto ...

Preventing a user with the same name as the one in the table from being added by utilizing a jQuery contains check proved

Check out my fiddle here: http://jsfiddle.net/jd5pgdz2/4/ I encountered an issue when attempting to add a user with the same name as one already in my table (the displayed users are static in the HTML). Despite using 'contains' to check if the u ...