Setting Up a Static Server in React Native for Shared Assets

When working on a React Native app, you may have a bunch of assets that need to be served as static resources. These assets are often shared between Android and iOS apps, and are commonly placed in the root folder of your project. However, in Android, assets are typically expected to be located under src/main/assets. So, to serve these assets in both platforms, you'll need to tell the Android app to include them during the build step.

1. Organizing Your Project Structure

First, make sure your assets are placed in a shared directory. For example, you can place them in the root folder of your project.

project-root/
├── android/
├── ios/
├── assets/
│   ├── images/
│   ├── fonts/
│   └── ...
└── ...

2. Updating Android Build Configuration

In your Android app's build.gradle file, add the shared assets directory to the list of asset source directories.

android {
    sourceSets {
        main {
            assets.srcDirs += ['../../assets']
        }
    }
}

This tells the Android app to include assets from the assets directory in the root folder of your project during the build process.

3. Creating a Static Server

Now, let's set up a simple static server in your Android app to serve these assets. You can use NanoHTTPD for this purpose.

import android.content.Context;
import java.io.IOException;
import java.io.InputStream;
import fi.iki.elonen.NanoHTTPD;

public class StaticServer extends NanoHTTPD {

    private Context context;

    public StaticServer(Context context) {
        super(8080); // You can change the port number if needed
        this.context = context;
    }

    @Override
    public Response serve(IHTTPSession session) {
        String uri = session.getUri();
        try {
            InputStream inputStream = context.getAssets().open(uri.substring(1)); // remove leading '/'
            return newChunkedResponse(Response.Status.OK, getMimeType(uri), inputStream);
        } catch (IOException e) {
            return newFixedLengthResponse(Response.Status.NOT_FOUND, NanoHTTPD.MIME_PLAINTEXT, "File not found");
        }
    }

    private String getMimeType(String uri) {
        if (uri.endsWith(".html")) {
            return "text/html";
        } else if (uri.endsWith(".css")) {
            return "text/css";
        } else if (uri.endsWith(".js")) {
            return "application/javascript";
        } else if (uri.endsWith(".png")) {
            return "image/png";
        } else if (uri.endsWith(".jpg") || uri.endsWith(".jpeg")) {
            return "image/jpeg";
        } else {
            return "text/plain";
        }
    }
}

In the StaticServer class, when we retrieve assets using context.getAssets().open(), you may notice the use of uri.substring(1). This is necessary because the URI always starts with a '/', and if we don't remove it, the assets manager will try to load the static file from the root directory, resulting in a file not found error. By using substring(1), we ensure that the URI correctly points to the asset within the assets directory.

4. Integrating the Server in Your App

Now, integrate the static server into your app, start it in your activity, and remember to stop it when the activity is destroyed.

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private StaticServer server;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        server = new StaticServer(getApplicationContext());
        try {
            server.start();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (server != null) {
            server.stop();
        }
    }
}

Conclusion

You've successfully set up a static server in your Android app to serve shared assets from the root folder of your project. This approach allows you to keep your assets organized and shared between both Android and iOS platforms.

Stay tuned for our upcoming blog post on setting up a similar static server in an iOS app!