Skip to content

Commit 31a2808

Browse files
svedovasvedova
committed
chore: initial commit
0 parents  commit 31a2808

39 files changed

+5301
-0
lines changed

‎.github/dependabot.yml‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# To get started with Dependabot version updates, you'll need to specify which
2+
# package ecosystems to update and where the package manifests are located.
3+
# Please see the documentation for all configuration options:
4+
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
5+
6+
version: 2
7+
updates:
8+
- package-ecosystem: "npm" # See documentation for possible values
9+
directory: "/" # Location of package manifests
10+
schedule:
11+
interval: "weekly"

‎.gitignore‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
.stormkit
15+
16+
# Editor directories and files
17+
.vscode/*
18+
!.vscode/extensions.json
19+
.idea
20+
.DS_Store
21+
*.suo
22+
*.ntvs*
23+
*.njsproj
24+
*.sln
25+
*.sw?

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) Savas Vedova <savas@stormkit.io>, Twitter: @savasvedova
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
# React Starter Kit
2+
3+
> A minimal, flexible React template built with Vite supporting multiple rendering modes
4+
5+
## ✨ Features
6+
7+
- 🔄 **Multiple Rendering Modes**: SSR, SSG, and SPA support with route-level control
8+
- 🚀 **File-based API Routes**: Build serverless APIs with simple file structure
9+
- 🎯 **Framework-agnostic**: Pure React with Vite - no complex abstractions
10+
- 🔍 **SEO Ready**: Built-in meta tags and server-side rendering for better SEO
11+
- 📦 **Universal Deployment**: Compatible with Stormkit, Netlify, Vercel and more
12+
- ⚡ **Hot Module Replacement**: Instant updates during development
13+
- 🏷️ **TypeScript First**: Full TypeScript support out of the box
14+
- 🎨 **Modern Tooling**: Vite for lightning-fast builds and development
15+
16+
## 🚀 Quick Start
17+
18+
### Installation
19+
20+
```bash
21+
# Clone or use as template
22+
git clone <repository-url>
23+
cd react-starter
24+
25+
# Install dependencies
26+
npm install
27+
# or
28+
yarn install
29+
# or
30+
pnpm install
31+
```
32+
33+
### Development
34+
35+
```bash
36+
npm run dev
37+
```
38+
39+
Visit `http://localhost:5173` to see your app running with HMR enabled.
40+
41+
## 📁 Project Structure
42+
43+
```
44+
src/
45+
├── api/ # API routes (serverless functions)
46+
│ └── hello.ts # Example API endpoint
47+
├── pages/ # Application pages
48+
│ ├── home.tsx # Home page (SPA)
49+
│ ├── about.tsx # About page (SPA)
50+
│ └── ssr.tsx # SSR example with fetchData
51+
├── components/ # Reusable components
52+
├── context.ts # React context for data sharing
53+
├── entry-client.tsx # Client-side entry point
54+
├── entry-server.tsx # Server-side entry point
55+
├── prerender.ts # SSG route configuration
56+
└── App.tsx # Main application component
57+
```
58+
59+
## 🔧 Build Commands
60+
61+
### Development Server
62+
63+
```bash
64+
npm run dev
65+
```
66+
67+
Starts development server with HMR at `http://localhost:5173`
68+
69+
### Single Page Application (SPA)
70+
71+
```bash
72+
npm run build:spa
73+
```
74+
75+
Builds a traditional SPA. Output: `.stormkit/public/`
76+
77+
### Server-Side Rendering (SSR)
78+
79+
```bash
80+
npm run build:ssr
81+
```
82+
83+
Builds for serverless deployment with SSR. Output: `.stormkit/server/`
84+
85+
### Static Site Generation (SSG)
86+
87+
```bash
88+
npm run build:spa # Build SPA first
89+
npm run build:ssg # Generate static pages
90+
```
91+
92+
Pre-renders specified routes at build time. Output: `.stormkit/public/`
93+
94+
### API Only
95+
96+
```bash
97+
npm run build:api
98+
```
99+
100+
Builds only the API functions. Output: `.stormkit/api/`
101+
102+
## 🎯 Rendering Modes
103+
104+
### Single Page Application (Default)
105+
106+
All routes are client-side rendered by default:
107+
108+
```tsx
109+
// src/pages/home.tsx
110+
export default function Home() {
111+
return <h1>Welcome to Home</h1>;
112+
}
113+
```
114+
115+
### Server-Side Rendering
116+
117+
Add a `fetchData` export to enable SSR:
118+
119+
```tsx
120+
import { useContext } from "react";
121+
import Context from "~/context";
122+
123+
// src/pages/ssr.tsx
124+
export async function fetchData() {
125+
const data = await fetch("https://api.example.com/data");
126+
return {
127+
head: {
128+
// meta tags
129+
},
130+
context: {
131+
myParam: data.myParam;
132+
}
133+
};
134+
}
135+
136+
export default function SSRPage({ data }: { data: any }) {
137+
const context = useContext(Context);
138+
return <h1>Server-rendered: {data.myParam}</h1>;
139+
}
140+
```
141+
142+
### Static Site Generation
143+
144+
Configure routes to pre-render in `src/prerender.ts`:
145+
146+
```tsx
147+
// src/prerender.ts
148+
149+
// Export an array of paths to be prerendered.
150+
export default ["/", "/about", "/blog/post-1"];
151+
```
152+
153+
## 🔌 API Routes
154+
155+
Create API endpoints by adding files to `src/api/`:
156+
157+
```typescript
158+
// src/api/hello.ts
159+
export default async (req: http.IncomingMessage, res: http.ServerResponse) => {
160+
res.setHeader("Content-Type", "application/json");
161+
res.writeHead(200, "Success");
162+
res.write(
163+
JSON.stringify({
164+
payload:
165+
"This is an API function - can be deployed as a serverless function!",
166+
})
167+
);
168+
res.end();
169+
};
170+
```
171+
172+
Access at: `http://localhost:5173/api/hello`
173+
174+
## 🚀 Deployment
175+
176+
### Stormkit
177+
178+
Import this application on Stormkit (either self-hosted or cloud) and simply click deploy. It works with zero-config.
179+
180+
### Static Hosting
181+
182+
```bash
183+
npm run build:spa
184+
npm run build:ssg # Optional: for pre-rendered pages
185+
```
186+
187+
Deploy the `.stormkit/public` folder.
188+
189+
## 🔧 Configuration
190+
191+
### Vite Configuration
192+
193+
- `vite.config.ts` - Development server
194+
- `vite.config.ssr.ts` - SSR build
195+
- `vite.config.spa.ts` - SPA build
196+
- `vite.config.api.ts` - API build
197+
198+
## 🛠️ Advanced Usage
199+
200+
### Custom Server
201+
202+
```typescript
203+
// server.ts
204+
import { handler } from "./.stormkit/server/server.mjs";
205+
206+
const server = express();
207+
server.use(handler);
208+
server.listen(3000);
209+
```
210+
211+
## 🤝 Contributing
212+
213+
1. Fork the repository
214+
2. Create your feature branch: `git checkout -b feature/amazing-feature`
215+
3. Commit your changes: `git commit -m 'Add amazing feature'`
216+
4. Push to the branch: `git push origin feature/amazing-feature`
217+
5. Open a Pull Request
218+
219+
## 📚 Resources
220+
221+
- [Vite Documentation](https://vitejs.dev/)
222+
- [React Documentation](https://react.dev/)
223+
- [Stormkit Documentation](https://stormkit.io/docs)
224+
225+
## 🌟 Showcase
226+
227+
Websites built with this template:
228+
229+
| Site | Description | Features Used |
230+
| -------------------------------------------------------- | --------------------------------- | --------------- |
231+
| [Stormkit.io](https://stormkit.io) | Deploy full-stack JavaScript apps | SSR, API Routes |
232+
| [Add your site](https://github.com/your-repo/issues/new) | Submit your project | - |
233+
234+
## 📄 License
235+
236+
MIT ©

‎index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link href="/src/index.css" rel="stylesheet" />
5+
</head>
6+
<body>
7+
<div id="root"></div>
8+
<script type="module" src="/src/entry-client.tsx"></script>
9+
</body>
10+
</html>

‎jest.config.cjs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
preset: "ts-jest",
3+
transform: {
4+
"^.+\\.(ts|tsx)?$": "ts-jest",
5+
"^.+\\.(js|jsx)$": "babel-jest",
6+
},
7+
};

0 commit comments

Comments
 (0)