React Script untuk Deploy Heroku
Vite-React Deploy Heroku
TEMPLATE:
vanilla, vanilla-ts, vue, vue-ts,
react, react-ts, preact, preact-ts, lit,
lit-ts, svelte, svelte-ts
# npm 7+, extra double-dash (-- --template react) is needed:
npm create vite@latest my-react-app -- --template react
# yarn
yarn create vite my-react-app --template react
# pnpm
pnpm create vite my-react-app -- --template react
cd my-react-app
git init
``` package.json
"scripts": {
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview --host",
"start": "serve -s public",
"heroku-postbuild": "npm run build"
},
"dependencies": {
"daisyui": "^2.15.0",
"flowbite": "^1.4.5",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-scripts": "^5.0.1",
"serve": "^13.0.2"
},
"devDependencies": {
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.4",
"@vitejs/plugin-react": "^1.3.2",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.13",
"tailwindcss": "^3.0.24",
"vite": "^2.9.9"
}
```
```vite.config.js
import { build, defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
server: {
port: 2736
},
preview: {
port: 8080
},
build: {
outDir: './public',
},
plugins: [react()]
})
```
heroku login
heroku create my-react-app
heroku buildpacks:set heroku/nodejs
heroku git:remote -a my-react-app
heroku config:set HOST=0.0.0.0
heroku config:set NPM_CONFIG_PRODUCTION=false
heroku config:set MODE_ENV=production
///////////////////////////////////////////////////
/// Si esta en master y quiere renombrar a main
/// haga esto
/// crear branch main
git checkout -b main
/// borar master
git branch -D master
///////////////////////////////////////////////////
git add .
git commit -am "Final OK"
git push heroku main
Listo...!!!
JCC
