Skip to content

Commit

Permalink
Migrated to Vite from CRA.
Browse files Browse the repository at this point in the history
  • Loading branch information
Nilanth committed Nov 4, 2023
1 parent 734a397 commit c6bcf88
Show file tree
Hide file tree
Showing 34 changed files with 1,369 additions and 8,533 deletions.
6 changes: 3 additions & 3 deletions .github/ISSUE_TEMPLATE/config.yml
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
blank_issues_enabled: false
contact_links:
- name: Request a feature
url: https://github.com/Nilanth/laravel-breeze-cra/discussions/new?category=ideas
url: https://github.com/Nilanth/laravel-breeze-react/discussions/new?category=ideas
about: Share ideas for new features
- name: Report a bug
url: https://github.com/Nilanth/laravel-breeze-cra/issues/new
about: Report a reproducable bug
url: https://github.com/Nilanth/laravel-breeze-react/issues/new
about: Report a reproducible bug
14 changes: 9 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Laravel Breeze - React Edition
# Laravel Breeze - React Edition build with Vite

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

> Laravel Breeze React is the implementation for react from [breeze-next](https://github.com/laravel/breeze-next).
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.
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.

## Vite

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).

## Quick Start

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

```
yarn start
yarn start --host localhost --port 3000
```

> Note: Currently, we recommend using `localhost` during local development of your backend and frontend to avoid CORS "Same-Origin" issues.
Expand All @@ -74,8 +78,8 @@ export default Dashboard
## Built with
- [React](https://reactjs.org)
- [Create React App v5](https://create-react-app.dev)
- [React 18](https://reactjs.org)
- [Vite](https://vitejs.dev/)
- [React Router v6](https://reactrouter.com): Routing for React
- [Tailwind](https://tailwindcss.com): for UI
- [SWR](https://swr.vercel.app/): React Hooks for Data Fetching
Expand Down
15 changes: 8 additions & 7 deletions public/index.html → index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,35 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
content="Web site created using react and vite"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="apple-touch-icon" href="/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap" rel="stylesheet">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="manifest" href="/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
Notice the use of in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Laravel Breeze CRA App</title>
<title>Laravel Breeze Vite React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expand Down
37 changes: 19 additions & 18 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "laravel-breeze-cra",
"name": "laravel-breeze-react",
"version": "0.1.0",
"private": true,
"author": "Nilanth",
Expand All @@ -12,37 +12,38 @@
"axios",
"react-hooks",
"laravel",
"sanctum"
"sanctum",
"vite"
],
"description": "Laravel Breeze CRA is a Create React App template for laravel sanctum based authentication",
"description": "Laravel Breeze is a cutting-edge React App template designed for Laravel Sanctum-based authentication, meticulously crafted using Vite.",
"repository": {
"type": "git",
"url": "https://github.com/Nilanth/larave-breeze-cra",
"url": "https://github.com/Nilanth/larave-breeze-react",
"directory": "/"
},
"license": "MIT",
"dependencies": {
"@headlessui/react": "^1.5.0",
"@tailwindcss/forms": "^0.5.0",
"@headlessui/react": "^1.7.17",
"@tailwindcss/forms": "^0.5.6",
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.4",
"@testing-library/user-event": "^13.5.0",
"autoprefixer": "^10.4.2",
"@vitejs/plugin-react": "4.1.1",
"autoprefixer": "^10.4.16",
"axios": "^0.26.1",
"postcss": "^8.4.8",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "6",
"react-scripts": "5.0.0",
"swr": "^1.2.2",
"tailwindcss": "^3.0.23",
"postcss": "^8.4.31",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.18.0",
"sass": "^1.69.5",
"swr": "^2.2.4",
"tailwindcss": "^3.3.5",
"vite": "4.5.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"start": "vite",
"build": "vite build"
},
"eslintConfig": {
"extends": [
Expand Down
Binary file added public/logo-with-shadow.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes.
10 changes: 0 additions & 10 deletions src/components/ApplicationLogo.js

This file was deleted.

11 changes: 11 additions & 0 deletions src/components/ApplicationLogo.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import viteLogo from 'images/logo-with-shadow.png';

const ApplicationLogo = props => (
<img
alt='vite - logo'
src={viteLogo}
{...props}
/>
)

export default ApplicationLogo
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Binary file added src/images/logo-with-shadow.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 8 additions & 10 deletions src/index.js → src/index.jsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
const root = createRoot(document.getElementById('root'));

root.render(<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
2 changes: 1 addition & 1 deletion src/lib/axios.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Axios from 'axios'

const axios = Axios.create({
baseURL: process.env.REACT_APP_BACKEND_URL,
baseURL: import.meta.env.VITE_BACKEND_URL,
headers: {
'X-Requested-With': 'XMLHttpRequest'
},
Expand Down
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const ForgotPassword = () => {
<AuthCard
logo={
<NavLink to="/">
<ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
<ApplicationLogo className="w-40 h-40" />
</NavLink>
}>
<div className="mb-4 text-sm text-gray-600">
Expand Down
4 changes: 3 additions & 1 deletion src/pages/home.js → src/pages/home.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { NavLink } from 'react-router-dom';
import { useAuth } from 'hooks/auth'
import reactLogo from 'images/logo512.png';
import ApplicationLogo from 'components/ApplicationLogo';

function Home() {
const { user } = useAuth({ middleware: 'guest' })
Expand Down Expand Up @@ -50,9 +51,10 @@ function Home() {
src={reactLogo}
className="h-16 w-auto text-gray-700 sm:h-20 ml-10"
/>
<ApplicationLogo className="h-16 sm:h-20 ml-10"/>
</div>
<div className="mt-8 bg-white text-5xl p-2">
Laravel Breeze Create React App Template
Laravel Breeze React Vite Template
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/login.js → src/pages/login.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const Login = () => {
<AuthCard
logo={
<Link to="/">
<ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
<ApplicationLogo className="w-40 h-40" />
</Link>
}>
{/* Session Status */}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const PasswordReset = () => {
<AuthCard
logo={
<Link to="/">
<ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
<ApplicationLogo className="w-40 h-40" />
</Link>
}>
{/* Session Status */}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/register.js → src/pages/register.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const Register = () => {
<AuthCard
logo={
<Link to="/">
<ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
<ApplicationLogo className="w-40 h-40" />
</Link>
}>
{/* Validation Errors */}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/verify-email.js → src/pages/verify-email.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const VerifyEmail = () => {
<AuthCard
logo={
<Link to="/">
<ApplicationLogo className="w-20 h-20 fill-current text-gray-500" />
<ApplicationLogo className="w-40 h-40" />
</Link>
}>
<div className="mb-4 text-sm text-gray-600">
Expand Down
21 changes: 21 additions & 0 deletions vite.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
const path = require('path');

export default ({ mode }) => {
return defineConfig({
plugins: [react()],
define: {
"process.env.NODE_ENV": `"${mode}"`,
},
resolve: {
alias: {
'components': path.resolve('src/components/'),
'pages': path.resolve('src/pages/'),
'lib': path.resolve('src/lib/'),
'hooks': path.resolve('src/hooks/'),
'images': path.resolve('src/images/'),
}
}
})
}
Loading

0 comments on commit c6bcf88

Please sign in to comment.