Skip to content

Instantly share code, notes, and snippets.

@andresgcarmona

andresgcarmona/index.blade.php

Last active February 17, 2023 00:39
Show Gist options
  • Save andresgcarmona/94ab83c823dbd89d2a875f0776680c8b to your computer and use it in GitHub Desktop.
Save andresgcarmona/94ab83c823dbd89d2a875f0776680c8b to your computer and use it in GitHub Desktop.
Download ZIP
App view blade template
Raw
index.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Page description" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#242424">
<!-- Allow installing the app to the homescreen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Example" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Example">
<!-- App title -->
<title inertia>{{ config('app.name', 'Example') }}</title>
<!-- Icons -->
<link href="/assets/images/icons/icon-60x60.png" rel="apple-touch-icon" sizes="60x60">
<link href="/assets/images/icons/icon-76x76.png" rel="apple-touch-icon" sizes="76x76">
<link href="/assets/images/icons/icon-120x120.png" rel="apple-touch-icon" sizes="120x120">
<link href="/assets/images/icons/icon-152x152.png" rel="apple-touch-icon" sizes="152x152">
<link href="/assets/images/icons/icon-180x180.png" rel="apple-touch-icon" sizes="180x180">
<link href="/assets/images/icons/favicon-16x16.png" rel="alternate icon" sizes="16x16" type="image/png">
<link href="/assets/images/icons/favicon-32x32.png" rel="alternate icon" sizes="32x32" type="image/png">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" href="{{ asset('assets/css/reset.css') }}">
<!-- Web app manifest -->
<link rel="manifest" href="{{ asset('manifest.webmanifest') }}">
<!-- Scripts -->
@routes
@viteReactRefresh
@vite(['resources/scss/app.scss', 'resources/ts/app.jsx', "resources/ts/Pages/{$page['component']}.tsx"], 'js')
@inertiaHead
<!-- Open graph [Last updated 2022-12-23] -->
<meta property="og:title" content="Example template" />
<meta property="og:description" content="Description"/>
<meta property="og:image" content="/image/example.png" />
<meta property="og:image:alt" content="Alt text for image" />
<!-- Twitter card [Last updated 2022-12-23] -->
<meta name="twitter:title" content="Example template">
<meta name="twitter:description" content="Description"/>
<meta name="twitter:url" content="https://www.example.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.example.com/all.png"/>
<meta name="twitter:image:alt" content="Alt text for image" />
<meta name="twitter:creator" content="@andres_gcarmona">
<meta name="twitter:site" content="@example">
<!-- Splash screens for iOS -->
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait">
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape">
<link rel="canonical" href="https://www.example.com"/>
<script src="{{ asset('js/registerSW.js') }}"></script>
</head>
<body class="font-sans antialiased">
@inertia
@stack('scripts')
</body>
</html>
Raw
vite.config.js
import react from '@vitejs/plugin-react-swc'
import laravel from 'laravel-vite-plugin'
import { defineConfig } from 'vite'
import { VitePluginFonts } from 'vite-plugin-fonts'
import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
build: {
emptyOutDir: true,
assetsDir: 'assets',
},
resolve: {
alias: {
'@': '/resources/ts',
},
},
plugins: [
laravel({
input: ['resources/scss/app.scss', 'resources/ts/app.tsx'],
ssr: 'resources/ts/ssr.jsx',
refresh: true,
buildDirectory: 'js',
}),
VitePluginFonts({
google: {
families: [
{
name: 'Inter',
styles: 'wght@400;500;600',
defer: true,
},
],
preconnect: false,
display: 'swap',
},
}),
react(),
VitePWA({
devOptions: {
enabled: false,
},
strategies: 'injectManifest',
srcDir: 'resources/ts',
filename: 'sw.ts',
outDir: 'public',
scope: '/',
registerType: 'autoUpdate',
workbox: {},
base: '/',
manifestFilename: 'manifest.webmanifest',
manifest: {
id: 'example.v0.1.0',
name: 'Example',
short_name: 'Example',
description: 'Description',
theme_color: '#242424',
background_color: '#242424',
icons: [
{
src: '/assets/images/icons/android-chrome-36x36.png',
sizes: '36x36',
type: 'image/png',
},
{
src: '/assets/images/icons/android-chrome-48x48.png',
sizes: '48x48',
type: 'image/png',
},
{
src: '/assets/images/icons/android-chrome-72x72.png',
sizes: '72x72',
type: 'image/png',
},
{
src: '/assets/images/icons/android-chrome-96x96.png',
sizes: '96x96',
type: 'image/png',
},
{
src: '/assets/images/icons/android-chrome-144x144.png',
sizes: '144x144',
type: 'image/png',
},
{
src: '/assets/images/icons/android-chrome-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: '/assets/images/icons/android-chrome-256x256.png',
sizes: '256x256',
type: 'image/png',
},
{
src: '/assets/images/icons/android-chrome-384x384.png',
sizes: '384x384',
type: 'image/png',
},
{
src: '/assets/images/icons/android-chrome-512x512.png',
sizes: '512x512',
type: 'image/png',
},
{
src: '/assets/images/icons/maskable-icon-512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'maskable',
},
{
src: '/assets/images/icons/maskable-icon-192.png',
sizes: '192x192',
type: 'image/png',
purpose: 'maskable',
},
],
},
}),
],
ssr: {
noExternal: ['@inertiajs/server'],
},
server: {
host: true,
},
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment