How add a React Component in html file with Koa-static?

Question

I would like to create an app in koa that would render react components and serve html file. Most exactily, i want to add React in simple HTML but when i use my app i can read my html file but not my react component.

I have a Koa.js server

require('isomorphic-fetch');
const Koa = require('koa');
const dotenv = require('dotenv');
const serve = require('koa-static');
const logger = require('koa-logger');
dotenv.config();
const server = new Koa();
const port = parseInt(process.env.PORT, 10) || 8000;
router = require(./router);
server.use(serve('./public'))
    .use(logger());
    .use(router.routes())
    .use(router.allowedMethods());
server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);

In my public folder, i have a html and css file. For example :

<head>
      <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
      <script src="/react-component/date-picker.js"></script>
</head>

<body>
  <p>You can look a React components :) :</p>
<div id = 'Date'></p>
 </body>

And finally I have a folder which all React components are present ( react-component ) and one of my React Component :

import React from "react";
import ReactDOM from "react-dom";
import {AppProvider} from "@shopify/polaris";
import en from '@shopify/polaris/locales/en.json';

import "@shopify/polaris/dist/styles.css";
import {useCallback, useState} from 'react';
import {DatePicker} from '@shopify/polaris';

function DatePickerExample(props) {
  const [{month, year}, setDate] = useState({month: 1, year: 2018});
  const [selectedDates, setSelectedDates] = useState({
    start: new Date('Wed Feb 07 2018 00:00:00 GMT-0500 (EST)'),
    end: new Date('Mon Mar 12 2018 00:00:00 GMT-0500 (EST)'),
  });

  const handleMonthChange = useCallback(
    (month, year) => setDate({month, year}),
    [],
  );

  return (
    <DatePicker
      month={month}
      year={year}
      onChange={setSelectedDates}
      onMonthChange={handleMonthChange}
      selected={selectedDates}
      multiMonth
      allowRange
    />
  );
}

const domContainer = document.getElementById('date');
ReactDOM.render(e(DatePickerExample), domContainer);

I think a problem with koa-static because with koa-logger, i see :

 <-- GET /react-component/date-picker.js
  --> GET /react-component/date-picker.js 404 0ms

But I don't know how to fix this problem. Thank you everyone :)

score 0 · Answer 1 · answered Jan 15 '21 at 16:53

0

You will want to build a webpack config to build your bundle.js file and use the HTMLPlugin to inject the bundle into the html file.

    public: [
      new HtmlWebpackPlugin({
        inject: true,
        template: "path/to/template.html",
        filename: "index.html",
      }),
    ],

You will want these files to be built to your output directory like so in your webpack config file.

  output: {
      filename: '[name].[hash].js',
      path: __dirname + 'path/to/dist/dir',
  },

You already have the catch-all route to serve from the public directory, so by building these files out the way you want you will achieve this. Just make sure that your web server is serving the dist folder and not the public folder.

answered Jan 15 '21 at 16:53

Joshua Blevins

71
3

Sorry I didn't understand what you mean at all. – Kevin SUON Jan 18 '21 at 19:23
You should be bundling your react app with Webpack to build a `bundle.js` file. When you do so, you need to use the `HtmlWebpackPlugin` to build a production version of your index.html file. These files should be served by your web server. Did you use `create-react-app` to build your react application? – Joshua Blevins Jan 19 '21 at 20:04
Oh thank you ! I don't want to use `creact-react-app` because i want to use React likely a js script. If i want to use `creact-react-app`, we have a tutorial in https://blog.usejournal.com/serving-react-and-koa-together-720ba6668298. Finally I switched to bootstrap. – Kevin SUON Jan 27 '21 at 16:23

How add a React Component in html file with Koa-static?

1 Answers1