Remix Js

Overview

This repository serves as a guide to building Backend for Frontend (BFF) web applications using Remix. It aims to help create high-performance and maintainable apps by covering various topics such as project setup, routing, data fetching, authentication, and deployment. The app provides a demo user for testing authentication and utilizes Remix and built-in browser APIs to build modern web apps without relying heavily on deprecated dependencies.

Features

• Home page with app/routes/_index.jsx
• Set session with app/routes/session-set.jsx
• Delete session with app/routes/session-delete.jsx
• Set cookie with app/routes/cookie-set.jsx
• Delete cookie with app/routes/cookie-delete.jsx
• Remote API status [HTTP GET] with app/routes/status/index.jsx
• Login [HTTP POST] with app/routes/login/index.jsx
• Logout [HTTP POST] with app/routes/logout/index.jsx
• Test JWT [HTTP GET] with app/routes/protected/index.jsx
• Password handling through a secure process of sha2 (client-side), sha3 (Remix server-side), and argon2id (database)

Installation

To start your app in development mode, run the following command in your terminal:

npm start

This will rebuild assets on file changes.

For production deployment, first build your app:

npm run build

Then run the app in production mode:

npm run start:prod

After building, deploy the output of remix build located in the build/public/build/ directory.

If you’re familiar with deploying node applications, you can use the built-in Remix app server for production. Make sure to deploy the output of remix build located in the build/public/build/ directory.

Alternatively, you can use a template for hosting. You can create a new project by running the command npx create-remix@latest and selecting a hosting option. Then you can copy over relevant code and assets from your current app to the new project, which will already be pre-configured for your target server. Make sure to include everything in the app/ directory and any customized files outside of it.

If you prefer to use Docker, there is a docker-compose.yml file available along with an .env file.

Summary

This repository provides a comprehensive guide to building Backend for Frontend (BFF) web applications using Remix. It covers various topics such as project setup, routing, data fetching, authentication, and deployment. The app utilizes Remix and built-in browser APIs to create modern web apps without relying heavily on deprecated dependencies. It also provides examples for different routes and authentication scenarios. The repository offers installation instructions for both development and production modes, including options for hosting and Docker deployment.