Breaking News: Grepper is joining You.com. Read the official announcement!

react script for deploy heroku

Add Answer

JCC answered on February 14, 2020 Popularity 1/10 Helpfulness 1/10

answer react script for deploy heroku

related create react app deployment heroku

related Deploy React and Express to Heroku

react script for deploy heroku

Comment

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

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: heroku javascript script

Link to this answer
Share Copy Link

Contributed on May 18 2022

JCC

0 Answers Avg Quality 2/10

Closely Related Answers

create react app deployment heroku

Comment

npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku open

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: blog.heroku.com

Tags: create-react-app crea

Link to this answer
Share Copy Link

Contributed on Feb 14 2020

Dangerous Duck

0 Answers Avg Quality 2/10

Deploy React and Express to Heroku

Comment

const express = require('express');
const path = require('path');
const generatePassword = require('password-generator');

const app = express();

// Serve static files from the React app
app.use(express.static(path.join(__dirname, 'client/build')));

// Put all API endpoints under '/api'
app.get('/api/passwords', (req, res) => {
  const count = 5;

  // Generate some passwords
  const passwords = Array.from(Array(count).keys()).map(i =>
    generatePassword(12, false)
  )

  // Return them as json
  res.json(passwords);

  console.log(`Sent ${count} passwords`);
});

// The "catchall" handler: for any request that doesn't
// match one above, send back React's index.html file.
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname+'/client/build/index.html'));
});

const port = process.env.PORT || 5000;
app.listen(port);

console.log(`Password generator listening on ${port}`);

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: www.codeproject.com

Tags: express

Link to this answer
Share Copy Link

Contributed on Jun 29 2022

Code+Composer

0 Answers Avg Quality 2/10

react script for deploy heroku

Contents

More Related Answers

react script for deploy heroku

Closely Related Answers

create react app deployment heroku

Deploy React and Express to Heroku

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.