Skip to content

Commit

Permalink
React setup (SAP#993)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ndricimrr @pekura
ndricimrr authored and pekura committed Dec 12, 2019
1 parent bdb3d30 commit ec68727
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 1 deletion.
39 changes: 38 additions & 1 deletion docs/application-setup.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@ Choose the framework to build your application:
[Application setup without a framework](#application-setup-for-an-application-not-using-a-framework)
[Angular 6](#application-setup-for-angular-6)
[SAPUI5/OpenUI5](#application-setup-for-sapui5openui5)
[VUE.JS](#application-setup-for-vuejs)
[VUE.JS](#application-setup-for-vuejs)
[React](#application-setup-for-react)

## Basic application setup

Expand Down Expand Up @@ -177,3 +178,39 @@ $ curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-sa
$ echo "const webpack=require('webpack');const CopyWebpackPlugin=require('copy-webpack-plugin');module.exports={pages:{sampleapp:{entry:'src/main.js',template:'public/vue.html',filename:'vue.html'}},lintOnSave:true,runtimeCompiler:true,outputDir:'dist',configureWebpack:{plugins:[new CopyWebpackPlugin([{context:'public',to:'index.html',from:'index.html'},{context:'node_modules/@kyma-project/luigi-core',to:'./luigi-core',from:{glob:'**',dot:true}},{context:'node_modules/@kyma-project/luigi-client',to:'./luigi-client',from:{glob:'**',dot:true}}],{ignore:['.gitkeep','**/.DS_Store','**/Thumbs.db'],debug:'warning'})]}};" > vue.config.js
$ npm run serve
````


<a name="reactjs"></a>

### Application setup for React

1. Use the installer to create your application, install Luigi, make assets available, and serve your application:
````
bash <(curl -s https://raw.githubusercontent.com/SAP/luigi/master/scripts/setup/react.sh)
````
or execute these commands manually to get the same result:
````
$ npx create-react-app my-react-app && cd my-react-app
$ echo yes | npm run eject
$ npm i -P @kyma-project/luigi-core @kyma-project/luigi-client fiori-fundamentals react-router-dom
$ npm i copy-webpack-plugin --save-dev
$ sed "s/const HtmlWebpackPlugin = require('html-webpack-plugin');/const HtmlWebpackPlugin = require('html-webpack-plugin');const CopyWebpackPlugin = require('copy-webpack-plugin');/g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
$ sed "s/new HtmlWebpackPlugin(/new CopyWebpackPlugin([{context: 'public', to: 'index.html', from: 'index.html' },{context: 'node_modules\/@kyma-project\/luigi-core',to: '.\/luigi-core',from: {glob: '**',dot: true}}],{ignore: ['.gitkeep', '**\/.DS_Store', '**\/Thumbs.db'],debug: 'warning'}),new HtmlWebpackPlugin(/g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
$ sed "s/template: paths.appHtml,/template: paths.appHtml, filename: 'sampleapp.html',/g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
$ sed "s/public\/index.html/public\/sampleapp.html/g" config/paths.js > config/paths.tmp.js && mv config/paths.tmp.js config/paths.js
$ sed "s/publicUrl + '\/index.html',/publicUrl + '\/sampleapp.html',/g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
$ sed "s/const isWsl = require('is-wsl');//g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
$ sed "s/!isWsl/true/g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
$ mv public/index.html public/react.html
$ curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/public/index.html > public/index.html
$ curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/public/logo.png > public/logo.png
$ curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/public/sampleapp.html > public/sampleapp.html
$ curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/public/luigi-config.js > public/luigi-config.js
$ curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/src/index.js > src/index.js
$ curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/src/index.css > src/index.css
$ mkdir src/views
$ curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/src/views/home.js > src/views/home.js
$ curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/src/views/sample1.js > src/views/sample1.js
$ curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/src/views/sample2.js > src/views/sample2.js
$ npm start
````
Empty file modified scripts/setup/openui5.sh
100644 → 100755
View file
Empty file.
45 changes: 45 additions & 0 deletions scripts/setup/react.sh
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
#!/bin/bash
echo ""
echo "Installing Luigi with React specification"
echo ""
read -p "Luigi project folder name: " folder
echo "Creating luigified react app: " $folder

# create sample react app
npx create-react-app $folder && cd $folder

# eject project to customize webpack configs
echo yes | npm run eject

#install dependencies
npm i -P @kyma-project/luigi-core @kyma-project/luigi-client fiori-fundamentals react-router-dom
npm i copy-webpack-plugin --save-dev

# replace strings in some places
sed "s/const HtmlWebpackPlugin = require('html-webpack-plugin');/const HtmlWebpackPlugin = require('html-webpack-plugin');const CopyWebpackPlugin = require('copy-webpack-plugin');/g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
sed "s/new HtmlWebpackPlugin(/new CopyWebpackPlugin([{context: 'public', to: 'index.html', from: 'index.html' },{context: 'node_modules\/@kyma-project\/luigi-core',to: '.\/luigi-core',from: {glob: '**',dot: true}}],{ignore: ['.gitkeep', '**\/.DS_Store', '**\/Thumbs.db'],debug: 'warning'}),new HtmlWebpackPlugin(/g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
sed "s/template: paths.appHtml,/template: paths.appHtml, filename: 'sampleapp.html',/g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
sed "s/public\/index.html/public\/sampleapp.html/g" config/paths.js > config/paths.tmp.js && mv config/paths.tmp.js config/paths.js
sed "s/publicUrl + '\/index.html',/publicUrl + '\/sampleapp.html',/g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
sed "s/const isWsl = require('is-wsl');//g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js
sed "s/!isWsl/true/g" config/webpack.config.js > config/webpack.config.tmp.js && mv config/webpack.config.tmp.js config/webpack.config.js

# downloads
mv public/index.html public/react.html
curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/public/index.html > public/index.html
curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/public/logo.png > public/logo.png
curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/public/sampleapp.html > public/sampleapp.html
curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/public/luigi-config.js > public/luigi-config.js

# add index.js
curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/src/index.js > src/index.js
curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/src/index.css > src/index.css

#add views
mkdir src/views
curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/src/views/home.js > src/views/home.js
curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/src/views/sample1.js > src/views/sample1.js
curl https://raw.githubusercontent.com/SAP/luigi/master/core/examples/luigi-example-react/src/views/sample2.js > src/views/sample2.js

npm i
npm start
5 changes: 5 additions & 0 deletions scripts/setup/vue.sh
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
#!/bin/bash
if ! command -v vue 2>/dev/null; then
echo "Vue CLI required, please install it globally and try again."
echo "npm i -g @vue/cli."
exit 1;
fi
echo ""
echo "Installing Luigi with static files and basic configuration"
echo ""
Expand Down

0 comments on commit ec68727

Please sign in to comment.