Search code examples
reactjstypescriptazure-storagebundlecdn

How can I render a react application compiled in a bundle.js?

So I have a React application that was compiled into a bundle.js file. The index.tsx file of the React application shows that the App component will be rendered in a DOM element with ID "scheduleSitesGrid2" as showed on this picture:

index.tsx

I have been able to bundle this react app and host the bundle on Azure Storage. In fact, if I create a simple HTML file that only contains a div and a script with a src pointing to the azure url, I am able to see the bundle.js in Chrome DevTools:

dummy index.html chrome devtools

When I open the dummy index.html, I cannot see the React App component. There are no errors on the console as well.

page

I also tried to add breakpoints in the App component and they are triggered when the page loads. I am just wondering where the index.html page is blank even if I inserted a div with the valid ID.

Here is my App.tsx file:

import React, {Component} from 'react';
import '@progress/kendo-theme-default/dist/all.css';
import './App.css';
import jobs from './jobs.json';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { DropDownListChangeEvent } from '@progress/kendo-react-dropdowns';
import EditIconComponent from "./components/editicon.component";
import UploadIconComponent from "./components/uploadicon.component";

export default class App extends Component {

  handleDropDownChange = (e: DropDownListChangeEvent) => {
    this.setState({
      dropdownlistCategory: e.target.value.CategoryID
    });
  }

  state = { skip: 0, take: 5 }

    pageChange = (event: any) => {
        this.setState({
            skip: event.page.skip,
            take: event.page.take
        });
  }

  render() {
    return (
      <div className="App">
          <Grid
            resizable={true}
            pageable={true}
            skip={this.state.skip}
            take={this.state.take}
            total={jobs.length}
            onPageChange={this.pageChange}
            data={jobs.slice(this.state.skip, this.state.take + this.state.skip)}>
            <GridColumn field="null" title=" " cell={EditIconComponent} resizable={false} width="50px"/>
            <GridColumn field="null" title=" " cell={UploadIconComponent} resizable={false} width="50px"/>
            <GridColumn field="technology" title="Technology" />
            <GridColumn field="marketcost" title="Market/Cost"/>
            <GridColumn field="num" title="Job #" />
            <GridColumn field="locationCode" title="Location Code" />
            <GridColumn field="siteName" title="Site Name" />
            <GridColumn field="pin" title="PIN" />
            <GridColumn field="status" title="Job Status" />
          </Grid>
      </div>
    );
  }
}

Here is the entire index.tsx file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('scheduleSitesGrid2'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: .....
serviceWorker.unregister();

And here is my package.json

{
  "name": "kendo-grid-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@progress/kendo-data-query": "^1.5.2",
    "@progress/kendo-drawing": "^1.6.0",
    "@progress/kendo-react-dateinputs": "^3.6.0",
    "@progress/kendo-react-dialogs": "^3.6.0",
    "@progress/kendo-react-dropdowns": "^3.6.0",
    "@progress/kendo-react-grid": "^3.6.0",
    "@progress/kendo-react-inputs": "^3.6.0",
    "@progress/kendo-react-intl": "^3.6.0",
    "@progress/kendo-theme-default": "^4.5.2",
    "@types/jest": "24.0.19",
    "@types/node": "12.11.6",
    "@types/react-dom": "16.9.2",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "./node_modules/.bin/webpack",
    "pack": "webpack --config webpack.config.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "@types/react": "^16.9.9",
    "babel-loader": "^8.0.6",
    "glob": "^7.1.5",
    "source-map-loader": "^0.2.4",
    "ts-loader": "^6.2.1",
    "typescript": "^3.6.4",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack-cli": "^3.3.10"
  }
}

UPDATE

When I created the bundle, public/index.html was an empty file. If I add some basic html code and include the div with id scheduleSitesGrid2, I see that App component is working fine: grid

Thank you!

Solution

  • I found the issue. I had an issue in my Webpack.config.js file. I set the entry to src/App.tsx, but I changed it to src/index.tsx.

    Thank you so much everyone for your help!

    Have a good day

    Here is my Webpack.config if someone needs it:

    "use strict"

const path = require('path');

module.exports = {
    entry: './src/index.tsx',
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        publicPath: "/",
        contentBase: "./public",
        hot: true
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    devtool: "inline-source-map",
    module: {
        rules: [{
            test: /\.(ts|tsx)$/,
            use: 'ts-loader',
            exclude: /node_modules/
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        }]
    }
};