How do people deploy static sites built on react and vite with wouter ?

[ymolists]

Hi All

Thank you so much for this amazing code ! I was up and running in no time. Now i need to deploy this static site.

I have a react site built on vite with wouter as my router. I am using python http server to serve the final dist directory. after npm run build i tried serving the dist directory with python -m http.server all my routes which are working fine in dev mode (and in npm run preview) are now broken because the http server thinks my links are resources it needs to fetch so i am getting 404s

[molefrog]

Hi @ymolists, thank you for your kind words!

You probably have one index.html file at the root of your static folder and it's expectable that the web server can't serve any other route except for / because it looks for actual static html files. For example, when you request /about the web server tries to locate /about/index.html (which isn't there ofc). You need to setup your web server so that it supports an "SPA wildcard routing" which will return your index.html for all routes that it doesn't know about.

I'm not familiar with Python's web server, but here is a pretty decent recipe from chat gpt:

To serve a static single-page application (SPA) with Python and support SPA routes, you can use a lightweight web framework like Flask. Flask allows you to define routes and serve static files easily. Here's an example of how you can achieve this:

1. Install Flask if you haven't already. You can use pip to install it:

   pip install flask
   

2. Create a new Python file, let's call it app.py, and import Flask:

   from flask import Flask, send_from_directory
   
   # Create the Flask application
   app = Flask(__name__)
   
   # Serve static files
   @app.route('/<path:path>')
   def serve_static(path):
       return send_from_directory('static', path)
   
   # Serve the main HTML file for all routes
   @app.route('/')
   def serve_spa():
       return send_from_directory('static', 'index.html')
   
   # Run the Flask application
   if __name__ == '__main__':
       app.run()

   In this example, we define two routes:

   • The / route serves the main HTML file (index.html) for all routes.
   • The /<path:path> route serves static files from the static directory. This route captures the path as a parameter to handle SPA routes.

3. Create a static directory in the same location as app.py and place your static files (HTML, CSS, JavaScript, etc.) inside it.

4. Start the Flask server by running the app.py file:

   python app.py
   

   The server will be available at http://localhost:5000/, and all routes will be served with the main HTML file. For example, http://localhost:5000/about will serve the SPA with the about route.

Flask is a flexible web framework that allows you to add more functionality as needed. You can use templating engines like Jinja2, handle form submissions, implement APIs, and more. Refer to the Flask documentation for more details on how to customize and extend your application based on your specific requirements.

[ymolists]

Thank you so much for your clear explanations i understand what is going on !