Remix: Create a Web App with Remix to Upload to Decentralized Storage

Learn how to create a web app with Remix to upload to decentralized storage,

What is Remix?

Remix is a web application framework that provides APIs and conventions for data loading, server rendering and routing, and other features. This guide uses an existing GitHub repository, originally created by the user @imrea, but has been edited for use with Filebase.

Read below to learn how to use Remix with Filebase.

Prerequisites:

• Download and install NodeJS and NPM.

• Download and install an IDE of your choice, such as VSCode.

• Sign up for a free Filebase account.

• Have your Filebase Access and Secret Keys. Learn how to view your access keys here.

• Create a Filebase Bucket. Learn how to create a bucket here.

1. Install React and Remix-Run npm packages:

npm install react react-dom

npm install --save-dev @remix-run/react

2. Git clone the following repository:

git clone https://github.com/jamongeon1/filebase-remix-upload

3. Open the file .env.example in your text editor of choice.

Make a copy of this file called .env. Edit the following variable values:

FILEBASE_ACCESS_KEY='FILEBASE ACCESS KEY'

FILEBASE_SECRET_KEY='FILEBASE SECRET KEY'

FILEBASE_ENDPOINT='s3.filebase.com'

FILEBASE_REGION='us-east-1'

FILEBASE_BUCKET='filebase-bucket'

FILEBASE_PREFIX=''

4. Run the following npm commands to run your Remix app:

npm install

npm run build

npm run dev

5. Once your app is running, it will be available at a local address on port :3000.

Our example uses http://192.168.37.1:3000. Navigate to this address in your browser. Your app will look like this:

6. Select a file to be uploaded using either method.

7. Select ‘Submit’ to initiate the upload.

8. View the contents of your Filebase bucket on the Web Console dashboard to confirm the upload’s success.