Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
carlosquijano committed Jan 19, 2021
0 parents commit 439e85b
Show file tree
Hide file tree
Showing 13 changed files with 264 additions and 0 deletions.
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
webpack.config.ts
50 changes: 50 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
{
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint",
"react",
"react-hooks",
"eslint-plugin-import",
"prettier"
],
"env": {
"browser": true
},
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:prettier/recommended"
],
"parserOptions": {
"project": [
"tsconfig.json"
],
"ecmaVersion": 2020,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/no-unused-vars": ["warn", {"ignoreRestSiblings": true}],
"react/jsx-filename-extension": [
"warn",
{
"extensions": [
".jsx",
".tsx"
]
}
],
"react/prop-types": "off",
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"no-shadow": ["error", {"builtinGlobals": false, "hoist": "functions", "allow": []}]
},
"settings": {
"react": {
"version": "detect"
}
}
}
6 changes: 6 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
node_modules/
dist/
.cache/
.idea/
package-lock.json
yarn.lock
16 changes: 16 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"printWidth": 100,
"trailingComma": "none",
"tabWidth": 4,
"semi": true,
"singleQuote": false,
"bracketSpacing": false,
"jsxBracketSameLine": false,
"arrowParens": "always",
"endOfLine": "auto",
"jsxSingleQuote": false,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"useTabs": false,
"htmlWhitespaceSensitivity": "css"
}
10 changes: 10 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# react-typescript-starter
###### Clean React + TypeScript starter, without usage of create-react-app ⚛

Configured with:
- Webpack
- ESLint
- Prettier

## Read post on medium:
https://medium.com/@adriancelczynski/react-with-typescript-starter-kit-without-create-react-app-including-webpack-eslint-bef225c35ffa
44 changes: 44 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
{
"name": "react-typescript-starter",
"description": "Clean React + TypeScript starter, without usage of create-react-app ⚛",
"version": "1.0.0",
"main": "src/index.tsx",
"repository": "https://github.com/GR34SE/react-typescript-starter.git",
"license": "MIT",
"private": false,
"scripts": {
"start:dev": "webpack-cli serve --mode=development --env development --open --hot",
"build": "webpack --mode=production --env production --progress",
"lint": "eslint './src/**/*.{ts,tsx}'",
"lint:fix": "eslint './src/**/*.{ts,tsx}' --fix"
},
"devDependencies": {
"@types/node": "13.13.40",
"@types/react": "17.0.0",
"@types/react-dom": "17.0.0",
"@types/webpack": "4.41.26",
"@types/webpack-dev-server": "3.11.1",
"@typescript-eslint/eslint-plugin": "4.14.0",
"@typescript-eslint/parser": "4.14.0",
"eslint": "7.18.0",
"eslint-config-prettier": "7.2.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-prettier": "3.3.1",
"eslint-plugin-react": "7.22.0",
"eslint-plugin-react-hooks": "4.2.0",
"fork-ts-checker-webpack-plugin": "6.1.0",
"html-webpack-plugin": "4.5.1",
"prettier": "2.2.1",
"ts-loader": "8.0.14",
"ts-node": "9.1.1",
"tsconfig-paths-webpack-plugin": "3.3.0",
"typescript": "4.1.3",
"webpack": "5.15.0",
"webpack-cli": "4.4.0",
"webpack-dev-server": "3.11.2"
},
"dependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
}
}
12 changes: 12 additions & 0 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React TypeScript App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
11 changes: 11 additions & 0 deletions renovate.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"semanticCommits": true,
"requiredStatusChecks": null,
"packageRules": [{
"updateTypes": ["minor", "patch", "pin", "digest"],
"automerge": true
}],
"extends": [
"config:base"
]
}
6 changes: 6 additions & 0 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import React from "react";
import HelloWorld from "components/HelloWorld";

const App: React.FC = () => <HelloWorld />;

export default App;
22 changes: 22 additions & 0 deletions src/components/HelloWorld/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from "react";

const HelloWorld: React.FC = () => (
<>
<h1>Hello World</h1>

<hr />

<h3>Environmental variables:</h3>
<p>
process.env.PRODUCTION: <b>{process.env.PRODUCTION.toString()}</b>
</p>
<p>
process.env.NAME: <b>{process.env.NAME}</b>
</p>
<p>
process.env.VERSION: <b>{process.env.VERSION}</b>
</p>
</>
);

export default HelloWorld;
6 changes: 6 additions & 0 deletions src/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));
31 changes: 31 additions & 0 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{
"compilerOptions": {
"sourceMap": true,
"noImplicitAny": false,
"module": "commonjs",
"target": "es5",
"lib": [
"esnext",
"dom",
"dom.iterable"
],
"removeComments": true,
"allowSyntheticDefaultImports": true,
"jsx": "react",
"allowJs": true,
"baseUrl": "./",
"esModuleInterop": true,
"resolveJsonModule": true,
"moduleResolution": "node",
"downlevelIteration": true,
"paths": {
"components/*": [
"src/components/*"
]
}
},
"include": [
"./src",
"./webpack.config.ts"
]
}
49 changes: 49 additions & 0 deletions webpack.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import path from "path";
import webpack, {Configuration} from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
import {TsconfigPathsPlugin} from "tsconfig-paths-webpack-plugin";

const webpackConfig = (env): Configuration => ({
entry: "./src/index.tsx",
...(env.production || !env.development ? {} : {devtool: "eval-source-map"}),
resolve: {
extensions: [".ts", ".tsx", ".js"],
//TODO waiting on https://github.com/dividab/tsconfig-paths-webpack-plugin/issues/61
//@ts-ignore
plugins: [new TsconfigPathsPlugin()]
},
output: {
path: path.join(__dirname, "/dist"),
filename: "build.js"
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
options: {
transpileOnly: true
},
exclude: /dist/
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html"
}),
new webpack.DefinePlugin({
"process.env.PRODUCTION": env.production || !env.development,
"process.env.NAME": JSON.stringify(require("./package.json").name),
"process.env.VERSION": JSON.stringify(require("./package.json").version)
}),
new ForkTsCheckerWebpackPlugin({
eslint: {
files: "./src/**/*.{ts,tsx,js,jsx}" // required - same as command `eslint ./src/**/*.{ts,tsx,js,jsx} --ext .ts,.tsx,.js,.jsx`
}
})
]
});

export default webpackConfig;

0 comments on commit 439e85b

Please sign in to comment.