A lightweight Server-Side Rendering (SSR) framework for React applications, designed for fast Google and Bing indexing.
FSX is a development project by Famous-Tech, a 14-year-old Haitian developer, created to practice web development and reduce dependence on AI coding assistants. It's like Next.js but lighter, with a focus on SEO optimization.
Feel free to use FSX in these cases :
- You need High level SEO optimizations for your React App.
- You want SSR functionalities on your React Web App without using Next.js
- You want a plug & play framework to quickly access SSR benefits.
- You want total Freedom and control over the code that will be used in your Website
- You want total freedom on where you can easily host your App
- You want to experiment FULL STACK development without limitations, as you can have a Node.js Backend & And a React App in the same App while enjoying functionalities of both.
Important : This is a development repo for React-FSX, the Framework. This Guide is just providing enough infos to help you test it
-
Clone the repo into a new folder
git clone https://github.com/Famous-Tech/FSX my-fsx-app # Call it as you want, that doesn't matter -
Enter in the Directory
cd my-fsx-app # Make sure to use the same name you entered in the first step
-
Install the dependencies (I recommend using pnpm as package manager for this step)
pnpm install npm i pnpm -g- Head to TheSetupDoc for further informations
- Server-Side Rendering with React 19
- SEO Optimization with dynamic meta tags and Schema.org structured data
- Redis Caching for pages and images
- Image Optimization with WebP conversion (Python scripts)
- Security with Helmet.js and Content Security Policy
- TypeScript Support with Vite build system, as long FSX Compiler isn't ready
- Docker Ready for easy deployment
- Frontend: React 19, TypeScript (JavaScript is natively supported), Tailwind CSS, Vite
- Backend: Express.js, Node.js
- Caching: Redis
- Build: Vite
- Containerization: Docker
- Scripts: Python 3.8+ (For features FSX doesn't have yet like IMAGE OPTIMIZATION)
- Node.js 18+
- pnpm (recommended)
- Redis server
- Python 3.8+ (for image optimization scripts, that will be available as plugin soon as possible)
- Clone the repository:
git clone https://github.com/Famous-Tech/FSX.git
cd FSX- Install dependencies:
pnpm install- Start Redis server:
# Using Docker
docker run -d -p 6379:6379 redis:alpine- Start development server:
pnpm run devYour application will be available at http://localhost:3000 (7000 if it's via docker-compose)
pnpm run dev- Start development server, with a new build process, Useful if u updated the Front Endpnpm run dev:server- Start server onlypnpm run build:client- Build client assetspnpm run deploy- Build and start production serverpnpm run start- Start with PM2
# Build and start with Docker Compose
docker-compose up -d
# Or build manually
docker build -t fsx-app .
docker run -p 3000:7000 fsx-appThe project doesn't need many environment variables. You can easily create a .env file as you make sure to include:
PORT- Server port (default: 3000)REDIS_URL- Redis connection string
This is a development version of FSX, not a production NPM package. It's designed for:
- Learning and practicing web development
- Understanding SSR, SSG, CSR and Hydration concepts
- Building SEO-optimized React applications for my clients as i am a web development freelancer
- Reducing MY dependence on AI coding tools
FSX is not completed yet, due to a lack of time as the main developer is still a school boy. So if u want to contribute, check out TODO.MD and the development guide : development.md
Famous-Tech - 14-year-old Haitian Developer
- GitHub: @Famous-Tech
- Website: famoustech.xyz
- Email: [email protected]
"Designed to practice and depend less on AI coding assistants"
Made with ❤️ in Haiti 🇭🇹
Empowering developers to build fast, SEO-friendly React applications