SAP BTP - Luigi 프로젝트 만들기

25 Apr 2024

프로젝트를 진행하기 위한 프로젝트 폴더를 만든다.

만든 폴더 하위로 폴더를 하나 더 만든다.

아래 링크로 들어가서 내용을 복사하여 package.json을 만든다.
https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-react/package.json

추가 모듈 설치

npm install fundamental-styles @ui5/webcomponents-react --save

npm install style-loader css-loader --save-dev

아래 링크로 들어가서 webpack.config.js도 만들어준다.
https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-react/webpack.config.js

이후 디렉토리 구조를 만들어 준다.

아래 링크를 public/luigi-config.js 에 만들어준다.
https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-react/public/luigi-config.js

아래 링크를 src/views/home.js 에 만들어준다.
https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-react/src/views/home.js

아래 링크를 src/views/sample1.js 에 만들어준다.
https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-react/src/views/sample1.js

아래 링크를 src/views/sample2.js 에 만들어준다.
https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-react/src/views/sample2.js

아래 링크를 public/index.html에 만들어준다. https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-react/public/index.html

아래 링크를 public/sampleapp.html에 만들어준다. https://github.com/SAP/luigi/blob/main/core/examples/luigi-example-react/public/sampleapp.html

아래 소스를 src/index-file.js에 만들어준다.

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import Home from './views/home.js';
import Sample1 from './views/sample1.js';
import Sample2 from './views/sample2.js';
import { addInitListener } from '@luigi-project/client';
import './index.css';

class App extends Component {
  constructor(props) {
    super(props);
    addInitListener(() => {
      console.log('Luigi Client initialized.');
    });
  }
  render() {
    return (
      <BrowserRouter basename={`sampleapp.html#`}>
        <Route path="/home" component={Home} />
        <Route path="/sample1" component={Sample1} />
        <Route path="/sample2" component={Sample2} />
      </BrowserRouter>
    );
  }
}

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

아래 소스를 src/index.js에 만들어준다.

import React from 'react';
import { createRoot } from 'react-dom/client';
import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './views/home.js';
import Sample1 from './views/sample1.js';
import Sample2 from './views/sample2.js';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Router basename='microfrontend'>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/sample1" element={<Sample1 />} />
        <Route path="/sample2" element={<Sample2 />} />
      </Routes>
    </Router>
  </React.StrictMode>
);

이후 react-core-mf 폴더로 이동하여 npm install 후 실행 시켜보자