Getting started with Remix || Create a project with Remix 

This Blog post help you to setup your remix project and with scratch.

Topics that discuss here: 

• Setup with vite bundler and  create-remix CLI:
• File Structure and best practices.
• Run and Build Command.

 

Setup with vite bundler and  create-remix CLI:

npx create-remix@latest

This command create a project folder with desired name.

Try to run the frontend dev server:

npm run dev

Try to run the backend dev server:

node server.js

 

File Structure and best practices:

 

The structure includes various file like

• App
• node modules
• public 
• and rest configuration file

The remix has only the app and its correspondence of routes folder where all woking done.

App
│   entry.client.tsx
│   entry.server.tsx
│   root.tsx
│   tailwind.css
│
└───routes
        _index.tsx

Routes folder

This folder responsible all routes in remix project and recently its upgraded to v2. We see the structure soon in another post.

_index.tsx is responsible home page index file refer to homepage and its visible in /route .

Try to  create more routes and see the file based routing

routes/
├── AboutUs.tsx  //    available on /aboutus
├── Dashboard.tsx  //    available on /dashboard
├── Profile.tsx  //    available on /profile
└── _index.tsx  //    available on /

Best file structure Practices:

firstProject/
├── app/
│   ├── components/         # Reusable components
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   └── Button.tsx
│   ├── routes/             # Routes and pages
│   │   ├── index.tsx       # Homepage
│   │   ├── about.tsx       # About page
│   │   ├── dashboard/      # Nested routes
│   │   │   ├── index.tsx   # Dashboard home
│   │   │   └── profile.tsx # Dashboard profile
│   │   └── auth/           # Authentication-related routes
│   │       ├── login.tsx
│   │       └── register.tsx
│   ├── styles/             # Global styles
│   │   ├── globals.css
│   │   └── theme.css
│   ├── utils/              # Utility functions and helpers
│   │   └── helpers.ts
│   ├── services/           # API services and integrations
│   │   └── api.ts
│   ├── context/            # Context API for state management
│   │   └── AuthContext.tsx
│   ├── root.tsx            # Entry point for the app
│   ├── entry.client.tsx    # Client-side entry point
│   ├── entry.server.tsx    # Server-side entry point
│   └── remix.env.d.ts      # Remix environment types
├── public/                 # Static assets (served as is)
│   ├── images/
│   │   └── logo.png
│   ├── favicon.ico
│   └── robots.txt
├── .env                    # Environment variables
├── package.json            # Dependencies and scripts
├── remix.config.js         # Remix configuration
├── tailwind.config.js      # Tailwind CSS configuration (if used)
└── tsconfig.json           # TypeScript configuration

 

Run and Build Command:

Run command:

npm run dev //for running frontend server 

node server.js //for running server

Build command:

npm run build

You should now see a build folder containing a server folder (the server version of your app) and a client folder (the browser version) with some build artifacts in them. (This is all configurable.)