Skip to content

Commit c6bcf88

Browse files
committed
Migrated to Vite from CRA.
1 parent 734a397 commit c6bcf88

34 files changed

+1369
-8533
lines changed

.github/ISSUE_TEMPLATE/config.yml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
blank_issues_enabled: false
22
contact_links:
33
- name: Request a feature
4-
url: https://github.com/Nilanth/laravel-breeze-cra/discussions/new?category=ideas
4+
url: https://github.com/Nilanth/laravel-breeze-react/discussions/new?category=ideas
55
about: Share ideas for new features
66
- name: Report a bug
7-
url: https://github.com/Nilanth/laravel-breeze-cra/issues/new
8-
about: Report a reproducable bug
7+
url: https://github.com/Nilanth/laravel-breeze-react/issues/new
8+
about: Report a reproducible bug

README.md

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Laravel Breeze - React Edition
1+
# Laravel Breeze - React Edition build with Vite
22

33
<p align="left">
44
<a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square" alt="License"></a>
@@ -9,7 +9,11 @@
99

1010
> Laravel Breeze React is the implementation for react from [breeze-next](https://github.com/laravel/breeze-next).
1111
12-
Laravel Breeze React is an implementing of the [Laravel Breeze](https://laravel.com/docs/starter-kits) authentication template for [Create React App](https://create-react-app.dev). All of the authentication boilerplate is already written for you - powered by [Laravel Sanctum](https://laravel.com/docs/sanctum), allowing you to quickly begin pairing your beautiful React frontend with a powerful Laravel backend.
12+
Laravel Breeze React is an implementing of the [Laravel Breeze](https://laravel.com/docs/starter-kits) authentication template for [React App](https://react.dev). All of the authentication boilerplate is already written for you - powered by [Laravel Sanctum](https://laravel.com/docs/sanctum), allowing you to quickly begin pairing your beautiful React frontend with a powerful Laravel backend.
13+
14+
## Vite
15+
16+
Laravel Breeze React is now turbocharged with [Vite](https://vitejs.dev/) for rapid compilation and efficient production builds. To know more about Vite check out [this article](https://dev.to/nilanth/use-vite-for-react-apps-instead-of-cra-3pkg).
1317

1418
## Quick Start
1519

@@ -47,7 +51,7 @@ REACT_APP_BACKEND_URL=http://localhost:8000
4751
Finally, run the application via `yarn start`. The application will be available at `http://localhost:3000`:
4852

4953
```
50-
yarn start
54+
yarn start --host localhost --port 3000
5155
```
5256

5357
> Note: Currently, we recommend using `localhost` during local development of your backend and frontend to avoid CORS "Same-Origin" issues.
@@ -74,8 +78,8 @@ export default Dashboard
7478
7579
## Built with
7680
77-
- [React](https://reactjs.org)
78-
- [Create React App v5](https://create-react-app.dev)
81+
- [React 18](https://reactjs.org)
82+
- [Vite](https://vitejs.dev/)
7983
- [React Router v6](https://reactrouter.com): Routing for React
8084
- [Tailwind](https://tailwindcss.com): for UI
8185
- [SWR](https://swr.vercel.app/): React Hooks for Data Fetching

public/index.html renamed to index.html

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,35 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="icon" href="/favicon.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
10-
content="Web site created using create-react-app"
10+
content="Web site created using react and vite"
1111
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
12+
<link rel="apple-touch-icon" href="/logo192.png" />
1313
<!--
1414
manifest.json provides metadata used when your web app is installed on a
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1616
-->
1717
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap" rel="stylesheet">
18-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<link rel="manifest" href="/manifest.json" />
1919
<!--
20-
Notice the use of %PUBLIC_URL% in the tags above.
20+
Notice the use of in the tags above.
2121
It will be replaced with the URL of the `public` folder during the build.
2222
Only files inside the `public` folder can be referenced from the HTML.
2323
24-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24+
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
2525
work correctly both with client-side routing and a non-root public URL.
2626
Learn how to configure a non-root public URL by running `npm run build`.
2727
-->
28-
<title>Laravel Breeze CRA App</title>
28+
<title>Laravel Breeze Vite React App</title>
2929
</head>
3030
<body>
3131
<noscript>You need to enable JavaScript to run this app.</noscript>
3232
<div id="root"></div>
33+
<script type="module" src="/src/index.jsx"></script>
3334
<!--
3435
This HTML file is a template.
3536
If you open it directly in the browser, you will see an empty page.

package.json

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "laravel-breeze-cra",
2+
"name": "laravel-breeze-react",
33
"version": "0.1.0",
44
"private": true,
55
"author": "Nilanth",
@@ -12,37 +12,38 @@
1212
"axios",
1313
"react-hooks",
1414
"laravel",
15-
"sanctum"
15+
"sanctum",
16+
"vite"
1617
],
17-
"description": "Laravel Breeze CRA is a Create React App template for laravel sanctum based authentication",
18+
"description": "Laravel Breeze is a cutting-edge React App template designed for Laravel Sanctum-based authentication, meticulously crafted using Vite.",
1819
"repository": {
1920
"type": "git",
20-
"url": "https://github.com/Nilanth/larave-breeze-cra",
21+
"url": "https://github.com/Nilanth/larave-breeze-react",
2122
"directory": "/"
2223
},
2324
"license": "MIT",
2425
"dependencies": {
25-
"@headlessui/react": "^1.5.0",
26-
"@tailwindcss/forms": "^0.5.0",
26+
"@headlessui/react": "^1.7.17",
27+
"@tailwindcss/forms": "^0.5.6",
2728
"@testing-library/jest-dom": "^5.16.2",
2829
"@testing-library/react": "^12.1.4",
2930
"@testing-library/user-event": "^13.5.0",
30-
"autoprefixer": "^10.4.2",
31+
"@vitejs/plugin-react": "4.1.1",
32+
"autoprefixer": "^10.4.16",
3133
"axios": "^0.26.1",
32-
"postcss": "^8.4.8",
33-
"react": "^17.0.2",
34-
"react-dom": "^17.0.2",
35-
"react-router-dom": "6",
36-
"react-scripts": "5.0.0",
37-
"swr": "^1.2.2",
38-
"tailwindcss": "^3.0.23",
34+
"postcss": "^8.4.31",
35+
"react": "^18.2.0",
36+
"react-dom": "^18.2.0",
37+
"react-router-dom": "^6.18.0",
38+
"sass": "^1.69.5",
39+
"swr": "^2.2.4",
40+
"tailwindcss": "^3.3.5",
41+
"vite": "4.5.0",
3942
"web-vitals": "^2.1.4"
4043
},
4144
"scripts": {
42-
"start": "react-scripts start",
43-
"build": "react-scripts build",
44-
"test": "react-scripts test",
45-
"eject": "react-scripts eject"
45+
"start": "vite",
46+
"build": "vite build"
4647
},
4748
"eslintConfig": {
4849
"extends": [

public/logo-with-shadow.png

65.6 KB
Loading
File renamed without changes.

src/components/ApplicationLogo.js

Lines changed: 0 additions & 10 deletions
This file was deleted.

src/components/ApplicationLogo.jsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import viteLogo from 'images/logo-with-shadow.png';
2+
3+
const ApplicationLogo = props => (
4+
<img
5+
alt='vite - logo'
6+
src={viteLogo}
7+
{...props}
8+
/>
9+
)
10+
11+
export default ApplicationLogo

0 commit comments

Comments
 (0)