Deploy Flutter and Laravel php mobile app on the host server

Question

currently I doing a mobile app using flutter as frontend and laravel php as backend, usually i need to serve and open xampp to use the local api and database, so what if I dont want locally anymore, buy a server right? any server suggestion for this kind of situation and how to configure that, this is my first time make the app online.

I try the linode host server and the url could access through browser and shows apache web page but I try to replace my local ipv4 address with server ip to call api online but it always say url not working

Answer 1

Using ngrok can be a convenient solution for exposing your local server to the internet temporarily during development or testing phases. Here's a step-by-step guide on how to set up ngrok for your Flutter mobile app with Laravel backend:

1. Install ngrok:

   • Go to the ngrok website (https://ngrok.com/) and sign up for an account if you haven't already.
   • Download ngrok for your operating system.
   • Extract the downloaded ngrok file to a directory on your computer.

2. Run your Laravel server:

   • Make sure your Laravel backend is running locally using php artisan serve or another method you prefer.

3. Expose your local server with ngrok:

   • Open a terminal or command prompt.
   • Navigate to the directory where you extracted ngrok.
   • Run the following command to start ngrok and expose your local server:

     ./ngrok http <port_number>
     

     Replace <port_number> with the port your Laravel server is running on (usually 8000 or 8000).

4. Get your ngrok URL:

   • After running the command, ngrok will provide you with a forwarding URL. It will look something like http://randomstring.ngrok.io.
   • This URL is accessible from the internet and forwards requests to your local server.

5. Update your Flutter app:

   • Replace the base URL in your Flutter app's API calls with the ngrok URL.
   • For example, if your Laravel backend's base URL was http://localhost:8000/api, replace it with the ngrok URL (e.g., http://randomstring.ngrok.io/api).

6. Test your app:

   • Run your Flutter app.
   • Now your app should be able to communicate with your Laravel backend via the ngrok URL.

Remember, ngrok provides a temporary solution for testing and development purposes. For production, you'll want to deploy your Laravel backend to a proper server. Services like AWS, DigitalOcean, or Linode can be suitable options for hosting your backend. Make sure to secure your server properly before deploying your app in a production environment.