#[FIXED] build's output is different to dev's

21 messages · Page 1 of 1 (latest)

tawdry maple
#

Hey, 1st timer here. I have very little experience with web-dev (but i know some of the basics), I'm trying to build a personal site for the sake of learning and have chosen this project after watching a tutorial video, because it makes quite amazing stuff 🤓

I'm trying to make a navbar with links to different social media, using Astro-Icon (please let me know if there is a better way of getting Material Design Icons, as i ran into some issues yesterday trying to do it myself). The thing is, I've made my custom component and layout and while it works as expected with npm run dev(1st image), it's completely off when i open the index.html compiled(?) by npm run build(2nd image).
Extra weirdness:

  • ~~ dev doesn't show favicon, build does~~ edit: needed trailing slash
  • build isn't doing anything on hover

My code: https://github.com/elpekenin/astro-web
Astro-Icon: https://github.com/natemoo-re/astro-icon

unknown.png unknown.png
summer minnow
#

Hello great to have you here, I think you'd to serve your site with an http-server instead of opening the file directly. For that you could use the preview npm-script

npm run preview
tawdry maple
#

Since the /dist files are static, why do I need to serve them instead of plain opening?

Also, my final goal would be to deploy on a Docker container, is dev/preview safe to be run there? Or should i only use /dist/?

summer minnow
#

I believe that it's because of restrictions over the file:/// protocol but also the paths that points to the assets are absolute, so they would point to the root of your drive I guess
The takeaway is that the site has to be accessed over http.

I don't use docker so I can't give you insight on deploying there, but I'd not use the "preview" command or any node based webserver to serve a production site, I'd use something like apache or nginx

tawdry maple
#

welp, i already have an nginx container running as a reverse proxy for a gunicorn/flask site on another container, the idea was to place the dist files on another container, but im not sure how to serve them on that container 😅

tawdry maple
#

seems like relative paths were the issue, im making tests to get it working with flask serving the files 🤓

@app.get("/")
def index():
    return send_file("static/index.html")

@app.get("/static/")
@app.get("/static/index.html")
@app.get("/index.html/")
def redirect_index():
    return redirect(f"{config.scheme}://{config.domain}/")

@app.get("/<path>/")
def static(path):
    if os.path.is_file(f"static/{path}"):
        return send_from_directory("static", path)
    
    # If path didn't exist, try prepending "static"
    return send_from_directory("static", f"static/{path}")

PS: Docker taking 5 min to build images on my raspberry isnt cool 😦

summer minnow
summer minnow
tawdry maple
tawdry maple
#

the trick is mostly:

app = Flask(
    __name__,
    static_url_path=""
)

ie: petitions that arent handled by any @app.route decorator are "sent" to the static folder

summer minnow
tawdry maple
#

and then, added a "fallback" at the end, just in case ```py
@app.get("/static/<path>/")
def static_file(path):
return send_from_directory("static", path)

summer minnow
#

Interesting, you're hand-rolling your own static file server, isn't it too heavy tho for a static site?

tawdry maple
tawdry maple
#

if nginx container is sending stuff to a second container, the second one has to be running a server in order to reply with the file (i think)

tawdry maple
summer minnow
tawdry maple
#

thx for your feedback during these hours 🤓

#

[FIXED] build's output is different to dev's