Custom sitemap.xml

Help
1

Enonic version: Latest
OS: Ubuntu

What is the best prac·tice to create sitemap.xml for your website?

I installed sitemap.xml app but that is no good to me as I have to manually edit the file which is not possible.

The issue is that the sitemap.xml app does not find the sub-pages created by react app.

Thanks!

2

Is the problem that the sub-pages created by the React app are not actual pages in Enonic, for instance that they are just a string behind a hash like what you get from using react-router?
Example: /my-app-page/#/react-subpage

3

@bhj

That’s exactly that. I managed to create a service and then I manually added the routes to it.

sitemap app helped me to accomplish this.

Thanks!

4

FYI, you should not create both a service and define mappings/filters - you only need a javascript controller. Assuming I have understood your approach?

5

You are correct. I only needed a js controller.

6

One of the issues was that I was using <HashRouter> instead of <BrowserRouter> component.

Changing it to <BrowserRouter> worked fine but when I try to refresh the page I get 404 page (see image).

I thought adding historyApiFallback: true to my webpack config would do it, but I guess I am wrong.

What else Am I missing here? :thinking:

    render(
  <ApolloProvider client={client}>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <div>
          <BrowserRouter>
            {/* <HashRouter> */}
            <Switch>
              <Route exact path="/entrar" name="Login Page" component={Login} />
              <Route exact path="/cadastrar" name="Register Page" component={Register} />
              {/* <Route exact path="/404" name="Page 404" component={Page404} /> */}
              {/* <Route exact path="/500" name="Page 500" component={Page500} /> */}
              {/* <Route path='/' name='Home' component={Full} /> */}
              <Route path="/" name="Home" component={Home} />
            </Switch>
            {/* </HashRouter> */}
          </BrowserRouter>
        </div>
      </ConnectedRouter>
    </Provider>
  </ApolloProvider>,
  target,
)

screenshot_2
screenshot_22888×1890 627 KB

this is my webpack.config.

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const extractCSS = new ExtractTextPlugin('[name].fonts.css');
const extractSCSS = new ExtractTextPlugin('[name].styles.css');

const BUILD_DIR = path.resolve(__dirname, 'build');
const SRC_DIR = path.resolve(__dirname, 'src');

console.log('BUILD_DIR', BUILD_DIR);
console.log('SRC_DIR', SRC_DIR);

module.exports = (env = {}) => {
  return {
    entry: {
      index: [SRC_DIR + '/index.js']
    },
    output: {
      path: BUILD_DIR,
      filename: '[name].bundle.js',
      publicPath: '/',
    },
    // watch: true,
    devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
    devServer: {
      contentBase: BUILD_DIR,
      historyApiFallback: true,
      //   port: 9001,
      // compress: true,
      // hot: true,
      // open: true
    },
    module: {
      noParse: /node_modules\/quill\/dist\/quill.js/,
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['react', 'env']
            }
          }
        },
        {
          test: /\.html$/,
          loader: 'html-loader'
        },
        {
          test: /\.(scss)$/,
          use: ['css-hot-loader'].concat(extractSCSS.extract({
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader',
                options: {alias: {'../img': '../public/img'}}
              },
              {
                loader: 'sass-loader'
              }
            ]
          }))
        },
        {
          test: /\.css$/,
          use: extractCSS.extract({
            fallback: 'style-loader',
            use: 'css-loader'
          })
        },
        {
          test: /\.(png|jpg|jpeg|gif|ico)$/,
          use: [
            {
              // loader: 'url-loader'
              loader: 'file-loader',
              options: {
                name: './img/[name].[hash].[ext]'
              }
            }
          ]
        },
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'file-loader',
          options: {
            name: './fonts/[name].[hash].[ext]'
          }
        }]
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.UglifyJsPlugin({sourceMap: true}),
      new webpack.NamedModulesPlugin(),
      extractCSS,
      extractSCSS,
      new HtmlWebpackPlugin(
        {
          inject: true,
          template: './public/index.html'
        }
      ),
      new CopyWebpackPlugin([
          {from: './public/img', to: 'img'}
        ],
        {copyUnmodified: false}
      )
    ]
  }
};
7

Your last question seems unlreated to your initial topic, I suggest you start a new topic instead.

8