Blog Detail

• Mar 14, 2024

Shopify Remix App: Hosting with Fly.io server

What will you learn in this blog?

1. How to set up the hosting of the Remix app on the fly.io server?

2. How to get and set the environment variables to the Shopify app?

3. How to deploy your app to the fly.io server?

4. Update the App URLs in the Shopify configuration from the partner account.

How to set up the hosting of the Remix app on the fly.io server?

Shopify app hosting is required to make your app available to the app users and Shopify. You can host your app using any platform you want. We will use the fly.io platform to host our Shopify remix app.

For hosting your app on the fly.io server you need to install `flyctl´.

To install `flyctl´ in your system, open the terminal and run the below command: 

OR

After completing the installation process you need to sign up in fly.io. To sign up run the below command:

Use the below command to log in if you have already an account in fly.io.

After running this command you will be redirected to the auth page of fly.io.

Click continue if you want to create an account or you want to log in with the same email otherwise click on the option `sign in as a different user´ and fill in the details to create an account.

After logging in successfully, you will get the same screen as the below image.

Now, `flyctl´ has been installed successfully in your system.

Now, we can start the hosting process of our app. For that, go to your app directory and run the below command:

By using this command, a new app will be created in fly.io and a new file named `fly.toml´ will be created in your app.

You will be asked to change the settings before proceeding. Select `Yes or No´ as per your requirements.

If you select `Yes´, You will be redirected to the configuration page of fly.io. Change the settings as you want and confirm the settings.

By confirming this setting, one app will be created on the fly.io server and fly.toml file will be created in your remix app. You also get your app host URL in the terminal.

You can also check your app on the dashboard page of fly.io.

You will also get the host URL from here.

How to get and set the environment variables to the Shopify app?

Now, we need to set the variables in the `fly.toml´ file to connect the remix app with fly.io.

To get these variables, run the below command:

Using this command you will get the variables of your app.

Now go to your remix app code, open the `fly.toml´ file and add the following variables just before the [http_service].

Your fly.toml file should look like this.

Set the values we just got in our terminal. Make sure the value of `PORT´ and `internal_port´ must be the same.

Now, open the terminal and run the below command to set the API secret for your app:

Replace the <API_SECRET> with your SHOPIFY_API_SECRET which you have got in your terminal before.

How to deploy your app to the fly.io server?

Now, we are ready to deploy our app to the fly.io server.

Open your terminal and run the below command: 

And your deployment process will start. It will take some time.

After completion of this process, your app will be deployed to the host URL.

Before we use this URL, we need to update the URLs in our shopify app configuration from the partner account.

Update the App URLs in the app configuration from the partner account.

Login to your partner account > Apps > Select your app > Configuration. Now update the App URL and Allowed redirection URL(s) in the URLs section and click on Save and release button.

Also, change the URLs in your shopify.app.toml file and don’t forget to update the value of automatically_update_urls_on_dev to false under the [build].

Finally, your app hosting on the fly.io server was completed. You can test it with any of your development stores.

Next step:

Now we need to deploy our app to the shopify app store for review.

Click here to check out our blog on How to deploy a shopify remix app to the shopify app store?