1

I'm so confuse how to setting up my project to deploy my project to my development server. I got a problem after I upload my files to the server.

this is what my browser shows if i open my website url. I read some post in stackoverflow How to deploy a React App on Apache web server and tells that I need to npm run build. Yes I tried it but my terminal says

missing build script

I have question do i need to configure the htaccess? I don't know where to configure in laravel or in react?

Here's my package.json file

    {
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "build": "webpack --mode production"
    },
    "devDependencies": {
        "@babel/plugin-proposal-class-properties": "^7.1.0",
        "axios": "^0.18.0",
        "babel-eslint": "^8.2.6",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-react": "^6.23.0",
        "babel-preset-stage-0": "^6.24.1",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "eslint": "^4.19.1",
        "file-loader": "^2.0.0",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "url-loader": "^1.1.1"
    },
    "dependencies": {
        "@types/recompose": "^0.27.0",
        "antd": "^3.8.2",
        "concurrently": "^4.0.1",
        "cors": "^2.8.4",
        "datatables.net": "^1.10.19",
        "es6-promise": "^4.2.5",
        "font-awesome": "^4.7.0",
        "google-map-react": "^1.1.0",
        "google-maps-react": "^2.0.2",
        "isomorphic-fetch": "^2.2.1",
        "jwt-auth": "^2.0.1",
        "jwt-decode": "^2.2.0",
        "react-bootstrap": "^0.32.4",
        "react-bootstrap-sweetalert": "^4.4.1",
        "react-bootstrap-table": "^4.3.1",
        "react-bootstrap-table-next": "^1.2.1",
        "react-bootstrap-table2-paginator": "^1.0.3",
        "react-bootstrap-table2-toolkit": "^1.1.1",
        "react-bs-notifier": "^5.0.0",
        "react-filter-search": "^1.0.8",
        "react-geolocated": "^2.4.0",
        "react-geolocation": "^1.0.4",
        "react-google-maps": "^9.4.5",
        "react-js-pagination": "^3.0.2",
        "react-quill": "^1.3.1",
        "react-recaptcha": "^2.3.10",
        "react-redux": "^5.0.7",
        "react-responsive-data-table": "^1.0.4",
        "react-router": "^4.3.1",
        "react-router-dom": "^4.3.1",
        "react-s-alert": "^1.4.1",
        "react-search-input": "^0.11.3",
        "routes": "^2.1.0",
        "sweetalert": "^2.1.0",
        "sweetalert-react": "^0.4.11",
        "sweetalert2": "^7.28.4"
    }
}

Here's my webpack.config.js

const webpack = require('webpack')
const path = require('path')
const fs = require('fs')
const package = require('./package.json')

const LIBRARY_NAME = 'fuse'
const VERSION = package.version
const AUTHOR = package.author
const HOMEPAGE = package.homepage

const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin
const env = process.env.WEBPACK_ENV

let copyright = fs.readFileSync('COPYRIGHT.txt', 'UTF8')
let outputFile
let plugins = [
  new webpack.BannerPlugin({
    banner: copyright
      .replace('{VERSION}', `v${VERSION}`)
      .replace('{AUTHOR_URL}', `${AUTHOR.url}`)
      .replace('{HOMEPAGE}', `${HOMEPAGE}`),
    entryOnly: true
  })
]

if (env === 'build') {
  plugins.push(new UglifyJsPlugin({ minimize: true }))
  outputFile = `${LIBRARY_NAME}.min.js`
} else {
  outputFile = `${LIBRARY_NAME}.js`
}

const config = {
  entry: __dirname + './src/index.js',
  devtool: 'source-map',
  entry: './src',
  output: {
    path: __dirname + '/dist',
    filename: outputFile,
    library: 'Fuse',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  module: {
    loaders: [{
      test: /(\.js)$/,
      loader: 'babel-loader',
      exclude: /(node_modules)/
    }]
  },
  plugins: plugins
}

module.exports = config

When I browse the page look this

Browser shows

after i npm run build it look like this..

after npm run build

8
  • the error message you are getting missing build script is because you haven't added "scripts": { ... "build": "webpack --mode production" }, try adding this line and then retry Commented Dec 11, 2018 at 4:11
  • got still error. i will post the image.. Commented Dec 11, 2018 at 4:20
  • try running rm -rf node_modules and then npm install Commented Dec 11, 2018 at 4:49
  • so i need to remove the node_module folder to my project? then run the npm install? Commented Dec 11, 2018 at 4:50
  • yes try it and let me know Commented Dec 11, 2018 at 4:52

1 Answer 1

1

npm run build is missed in the script in package.json. If you want you deploy npm run prod. Or you can run npm run watch to see for code changes in real time, but it's good to use on local developement. If you are working on laravel mix project, you need to set your apache config.

open file/etc/apache2/sites-available/000-default.conf and then write your own root directory path

DocumentRoot /var/www/<your directory>/public

Next, change you .htacces file : open up /var/www/mmc1/public/.htaccess write the following at the top

DirectoryIndex index.php

Now, we need to make your server recognize the .htaccess configuration Go to /etc/apache2/apache2.conf and change AllowOverride None into AllowOverride All

<Directory /var/www/<your dir>/public>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

On your terminal,

sudo a2enmod rewrite //rewrite module enable

sudo service restart apache2 //restart your server

And it would be work well...

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.