Cara mendeploy aplikasi React yang dibuat ke webserver
Pertama, dalam proyek reaksi Anda, buka package.json Anda dan sesuaikan baris kode ini agar sesuai dengan alamat domain + folder tujuan Anda:
"homepage": "https://situswebanda.com/nama_folder_anda/",
Kedua, buka terminal di proyek reaksi Anda dan ketik:
npm menjalankan build
Sekarang, ambil semua file dari folder build yang baru dibuat dan unggah ke your_folder_name, dengan filezilla di subfolder seperti ini:
public_html/nama_folder_anda
Cek di browser!
Ultimately was able to figure it out , i just hope it will help someone like me.
Following is how the web pack config file should look like check the dist dir and output file specified. I was missing the way to specify the path of dist directory
const webpack = require('webpack');
const path = require('path');
var config = {
entry: './main.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
resolveLoader: {
modules: [path.join(__dirname, 'node_modules')]
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
}
module.exports = config;
Then the package json file
{
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack --progress",
"production": "webpack -p --progress"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"webpack": "^2.2.1"
},
"devDependencies": {
"babel-core": "^6.0.20",
"babel-loader": "^6.0.1",
"babel-preset-es2015": "^6.0.15",
"babel-preset-react": "^6.0.15",
"babel-preset-stage-0": "^6.0.15",
"express": "^4.13.3",
"webpack": "^1.9.6",
"webpack-devserver": "0.0.6"
}
}
Notice the script section and production section, production section is what gives you the final deployable index.js file ( name can be anything )
Rest fot the things will depend upon your code and components
Execute following sequence of commands
npm install
this should get you all the dependency (node modules)
then
npm run production
this should get you the final index.js
file which will contain all the code bundled
Once done place index.html
and index.js
files under www/html or the web app root directory and that's all.
Comments
Post a Comment