Skip to content

Commit f5140e0

Browse files
atlcatlc
committed
Initialized project
0 parents  commit f5140e0

19 files changed

+5247
-0
lines changed

‎.gitignore

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Node modules
2+
node_modules/
3+
4+
# Build output
5+
dist/
6+
public/static/
7+
8+
# Environment files
9+
*.env
10+
11+
# Editor settings
12+
.vscode/
13+
.idea/
14+
15+
# OS generated files
16+
.DS_Store
17+
Thumbs.db
18+
19+
# Logs
20+
*.log
21+
npm-debug.log*
22+
23+
# Runtime data
24+
pids
25+
*.pid
26+
*.seed
27+
*.log
28+
29+
# Directory used by npm for cache
30+
.npm

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023 Covalence
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

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
# TypeScript React Express ESBuild Boilerplate
2+
3+
Welcome to the TypeScript React Express ESBuild boilerplate, tailored for budding developers learning to craft MERN CRUD applications. However, this boilerplate is also ideal for anyone aiming to switch gears and utilize ESBuild over the conventional webpack.
4+
5+
# TypeScript React Express ESBuild Boilerplate
6+
7+
- [Overview](#overview)
8+
- [Features](#features)
9+
- [Getting Started](#getting-started)
10+
- [1. Clone the Repository](#1-clone-the-repository)
11+
- [2. Install Dependencies](#2-install-dependencies)
12+
- [3. Running in Development](#3-running-in-development)
13+
- [Directory Structure](#directory-structure)
14+
- [Top-Level Overview](#top-level-overview)
15+
- [YouTube Companion Videos](#youtube-companion-videos)
16+
- [Why ESBuild over Webpack?](#why-esbuild-over-webpack)
17+
- [Contributions](#contributions)
18+
19+
## Overview
20+
21+
This boilerplate is designed with simplicity and efficiency in mind. It leverages ESBuild, known for its speed and ease of configuration, to bundle your JavaScript and styles. It provides a structured starting point for both client and server development using popular technologies like React, Express, and TypeScript.
22+
23+
## Features
24+
25+
- **React**: For crafting intuitive UIs.
26+
- **Express**: A minimalist web framework for building the server-side.
27+
- **TypeScript**: Bringing strong typing to JavaScript, enhancing maintainability and developer experience.
28+
- **ESBuild**: A revolutionary fast JavaScript bundler and minifier.
29+
- **Bootstrap SASS**: Empower your projects with the world's most popular CSS framework, now in its SASS variant. Tailor designs seamlessly with variables and mixins.
30+
31+
_Note_: While this boilerplate uses Bootstrap SASS, the flexibility of ESBuild means it's straightforward to switch plugins. For instance, you can easily incorporate PostCSS with TailwindCSS or any other preferred styling solution.
32+
33+
## Getting Started
34+
35+
1. **Clone the Repository**
36+
37+
```sh
38+
git clone https://github.com/covalence-io/ts-react-express-esbuild.git
39+
cd ts-react-express-esbuild
40+
```
41+
42+
2. **Install Dependencies**
43+
44+
```sh
45+
npm install
46+
```
47+
48+
3. **Running in Development**
49+
Start both client and server in development mode:
50+
```sh
51+
npm run dev
52+
```
53+
54+
## Directory Structure
55+
56+
Understanding the project's structure is crucial for efficiently navigating and utilizing this boilerplate. Here's a detailed breakdown of the directory tree:
57+
58+
```
59+
dist/
60+
├─ server.js
61+
esbuild/
62+
├─ client.dev.mjs
63+
├─ server.dev.mjs
64+
node_modules/
65+
public/
66+
├─ static/
67+
│ ├─ bundle.js
68+
├─ index.html
69+
src/
70+
├─ client/
71+
│ ├─ styles/
72+
│ │ ├─ app.scss
73+
│ ├─ App.tsx
74+
│ ├─ index.tsx
75+
│ ├─ tsconfig.json
76+
├─ server/
77+
│ ├─ server.ts
78+
│ ├─ tsconfig.json
79+
.gitignore
80+
nodemon.json
81+
package-lock.json
82+
package.json
83+
README.md
84+
tsconfig.json
85+
```
86+
87+
### Top-Level Overview
88+
89+
- **`dist/`**: The output directory where your server-side TypeScript files get compiled to JavaScript.
90+
91+
- `server.js`: The compiled server-side entry point. **Note**: This file and the entire `dist/` directory are not tracked on GitHub as they represent compiled production code.
92+
93+
- **`esbuild/`**: Houses configuration files for the ESBuild bundler.
94+
95+
- `client.dev.mjs`: ESBuild configuration for client-side development.
96+
- `server.dev.mjs`: ESBuild configuration for server-side development.
97+
98+
- **`node_modules/`**: Standard directory for all installed npm packages.
99+
100+
- **`public/`**: Serves static files and the main `index.html` for your React application.
101+
102+
- `static/`: Contains bundled output files for the client side.
103+
- `app.js`: Bundled JavaScript for the client. **Note**: The bundled `app.js` is not tracked on GitHub as it is a dynamically generated file based on the source code.
104+
- `index.html`: The main HTML file that serves as a shell for your React app.
105+
106+
- **`src/`**: The core of your application's source code, both client-side and server-side.
107+
108+
- `client/`: Contains all client-side React components and styles.
109+
- `styles/`: Directory for all your SCSS files.
110+
- `app.scss`: Main style file for your application.
111+
- `App.tsx`: The main React component for your application.
112+
- `index.tsx`: Client-side entry point.
113+
- `tsconfig.json`: TypeScript configuration specific to the client side.
114+
- `server/`: Houses server-side logic using Express.
115+
- `server.ts`: Entry point for the server.
116+
- `tsconfig.json`: TypeScript configuration specific to the server side.
117+
118+
- **`.gitignore`**: Lists files and directories that should not be tracked by Git. This includes the compiled outputs like those in the `dist/` directory and dynamically generated bundles like `app.js`.
119+
120+
- **`nodemon.json`**: Configuration for Nodemon, a utility that monitors changes in your server code and automatically restarts the server.
121+
122+
- **`package-lock.json`**: Automatically generated file that describes the exact tree that was generated in `node_modules` as a result of running `npm install`.
123+
124+
- **`package.json`**: Lists package dependencies and contains various metadata about the project, like scripts.
125+
126+
- **`README.md`**: This very file, offering a guide to the project.
127+
128+
- **`tsconfig.json`**: The root TypeScript configuration file.
129+
130+
## YouTube Companion Videos
131+
132+
I coded this boilerplate out across a few YouTube videos if you want the from-scratch-to-end-product building of this repo. Watch and subscribe!
133+
[https://youtu.be/3tEUVpyRYTg](https://youtu.be/3tEUVpyRYTg)
134+
135+
## Why ESBuild over Webpack?
136+
137+
Webpack has been the go-to bundler for many projects over the years. However, ESBuild brings in significant speed improvements due to its Go-based architecture. This makes the build and development processes much faster, enhancing developer experience, especially in larger projects. This boilerplate is meant to introduce developers to this efficient tool and encourage exploration beyond traditional tools.
138+
139+
## Contributions
140+
141+
Feel free to raise issues, send pull requests, or provide feedback to improve this boilerplate. We welcome collaboration and suggestions to make this a more effective learning tool for our students and the community.

‎esbuild-config/client.dev.mjs

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import * as esbuild from 'esbuild';
2+
import * as sass from 'sass';
3+
import { sassPlugin } from 'esbuild-sass-plugin';
4+
5+
let ctx;
6+
7+
try {
8+
ctx = await esbuild.context({
9+
entryPoints: ['src/client/index.tsx'],
10+
bundle: true,
11+
minify: false,
12+
sourcemap: true,
13+
outfile: 'public/static/bundle.js',
14+
plugins: [sassPlugin({ type: 'style', logger: sass.Logger.silent, quietDeps: true })],
15+
define: {
16+
'process.env.NODE_ENV': "'development'"
17+
}
18+
});
19+
20+
await ctx.watch();
21+
console.log('Watching client...');
22+
23+
const { host, port } = await ctx.serve({
24+
servedir: 'public',
25+
fallback: 'public/index.html'
26+
});
27+
28+
console.info(`Hot refresh at http://${host}:${port}`);
29+
} catch (error) {
30+
console.error('An error occurred:', error);
31+
process.exit(1);
32+
}

‎esbuild-config/client.prod.mjs

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as esbuild from 'esbuild';
2+
import * as sass from 'sass';
3+
import { sassPlugin } from 'esbuild-sass-plugin';
4+
5+
try {
6+
await esbuild.build({
7+
entryPoints: ['src/client/index.tsx'],
8+
bundle: true,
9+
sourcemap: false,
10+
minify: true,
11+
outfile: 'public/static/bundle.js',
12+
define: {
13+
'process.env.NODE_ENV': "'production'"
14+
},
15+
plugins: [
16+
sassPlugin({
17+
type: 'style',
18+
quietDeps: true,
19+
logger: sass.Logger.silent
20+
})
21+
]
22+
});
23+
24+
console.log('Client bundled successfully for production!');
25+
} catch (error) {
26+
console.error('An error occurred during bundling:', error);
27+
process.exit(1);
28+
}

‎esbuild-config/server.dev.mjs

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import * as esbuild from 'esbuild';
2+
3+
let ctx;
4+
5+
try {
6+
ctx = await esbuild.context({
7+
entryPoints: ['src/server/server.ts'],
8+
bundle: true,
9+
sourcemap: true,
10+
minify: false,
11+
platform: 'node',
12+
target: ['node18.6'],
13+
packages: 'external',
14+
define: {
15+
'process.env.NODE_ENV': "'development'"
16+
},
17+
outfile: 'dist/server.js'
18+
});
19+
20+
await ctx.watch();
21+
console.log('Watching server...');
22+
} catch (error) {
23+
console.error('An error occurred:', error);
24+
process.exit(1);
25+
}

‎esbuild-config/server.prod.mjs

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import * as esbuild from 'esbuild';
2+
3+
try {
4+
await esbuild.build({
5+
entryPoints: ['src/server/server.ts'],
6+
bundle: true,
7+
sourcemap: false,
8+
minify: true,
9+
platform: 'node',
10+
target: ['node18.6'],
11+
packages: 'external',
12+
define: {
13+
'process.env.NODE_ENV': "'production'"
14+
},
15+
outfile: 'dist/server.js'
16+
});
17+
18+
console.log('Server bundled successfully for production!');
19+
} catch (error) {
20+
console.error('An error occurred during bundling:', error);
21+
process.exit(1);
22+
}

‎nodemon.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"watch": ["src/server", ".env"],
3+
"ignore": ["src/**/*.test.ts", "src/client/", "public/"],
4+
"ext": "ts,mjs,js,json",
5+
"exec": "node ./dist/server.js",
6+
"legacyWatch": true
7+
}

0 commit comments

Comments
 (0)