├── .babelrc
├── .gitignore
├── README.md
├── index.html
├── package.json
├── server.js
├── src
└── index.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env", "react"]
3 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | package-lock.json
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-for-heroku
2 | A simple deployment ready webpack-react application for heroku.
3 | Please follow the link for detailed explanation: https://codeburst.io/deploy-your-webpack-apps-to-heroku-in-3-simple-steps-4ae072af93a8
4 |
5 | ## Instructions
6 |
7 | 1. Clone this repo
8 | 2. Run `npm install`
9 | 3. Run `npm run dev`, **localhost:8080** will open up in your default browser
10 |
11 | ## Verify production code
12 | 1. Run `webpack -p`
13 | 2. Run `node server.js`, and visit **localhost:8080**, voila your code is ready for heroku now.
14 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | React and Webpack4
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "package.json",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "dev": "webpack-dev-server --mode development --open",
8 | "start": "node server.js",
9 | "heroku-postbuild": "webpack -p"
10 | },
11 | "author": "rajesh babu",
12 | "license": "MIT",
13 | "devDependencies": {
14 | "babel-core": "^6.26.3",
15 | "babel-loader": "^7.1.4",
16 | "babel-preset-env": "^1.7.0",
17 | "babel-preset-react": "^6.24.1",
18 | "css-loader": "^0.28.11",
19 | "html-webpack-plugin": "^3.2.0",
20 | "style-loader": "^0.21.0",
21 | "webpack": "^4.8.3",
22 | "webpack-cli": "^2.1.3",
23 | "webpack-dev-server": "^3.1.4"
24 | },
25 | "dependencies": {
26 | "express": "^4.16.3",
27 | "react": "^16.3.2",
28 | "react-dom": "^16.3.2"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const path = require('path');
3 | const port = process.env.PORT || 8080;
4 | const app = express();
5 |
6 | // the __dirname is the current directory from where the script is running
7 | app.use(express.static(__dirname));
8 |
9 | // send the user to index html page inspite of the url
10 | app.get('*', (req, res) => {
11 | res.sendFile(path.resolve(__dirname, 'index.html'));
12 | });
13 |
14 | app.listen(port);
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 |
2 | import React from "react";
3 | import ReactDOM from "react-dom";
4 |
5 | const Index = () => {
6 | return Hello React! You are ready for heroku
;
7 | };
8 |
9 | ReactDOM.render(, document.getElementById("index"));
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | entry: [
3 | './src/index.js'
4 | ],
5 | output: {
6 | path: __dirname,
7 | publicPath: '/',
8 | filename: 'bundle.js'
9 | },
10 | module: {
11 | rules: [
12 | {
13 | test: /\.js$/,
14 | exclude: /node_modules/,
15 | use: {
16 | loader: "babel-loader"
17 | }
18 | },
19 | {
20 | test: /\.css$/,
21 | use: [
22 | {
23 | loader: "style-loader"
24 | },
25 | {
26 | loader: "css-loader",
27 | options: {
28 | modules: true,
29 | importLoaders: 1,
30 | localIdentName: "[name]_[local]_[hash:base64]",
31 | sourceMap: true,
32 | minimize: true
33 | }
34 | }
35 | ]
36 | }
37 | ]
38 | }
39 | };
--------------------------------------------------------------------------------