Skip to content

Instantly share code, notes, and snippets.

@buddypia
Created January 30, 2020 02:39
Show Gist options
  • Save buddypia/fb00b01c61adce38267e942e5f2b9811 to your computer and use it in GitHub Desktop.
Save buddypia/fb00b01c61adce38267e942e5f2b9811 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
<% if content_for?(:title) %><%= yield(:title) %> | <%= Settings.service_name %>
<% else %><%= Settings.service_name %>
<% end %></title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" charset="UTF-8">
<%#= javascript_include_tag 'application' %>
<%= csrf_meta_tags %>
<%#= stylesheet_link_tag 'application', media: 'all' %>
<link rel="manifest" href="/manifest.json" />
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation">
<%= link_to Settings.service_name, root_path, class: 'navbar-brand' %>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<% if flash[:error_messages] %>
<% flash[:error_messages].each do |error_message| %>
<div class="alert alert-danger">
<%= error_message %>
</div>
<% end %>
<% end %>
<% if content_for?(:title) %>
<div class="page-header">
<h2><%= yield(:title) %></h2>
</div>
<% end %>
<%= yield %>
</div>
<div id="root"></div>
</body>
<script src="<%= webpack_asset_path('main.js') %>"></script>
</html>
const path = require('path')
const glob = require('glob')
const webpack = require('webpack')
// const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = (env, argv) => {
return {
mode: 'development',
entry: {
main: './frontend/src/index.tsx'
},
devtool: 'inline-source-map',
output: {
filename: 'javascripts/[name].js',
path: path.resolve('./public/assets/')
},
plugins: [
// new MiniCssExtractPlugin({
// filename: 'stylesheets/[name]-[hash].css'
// }),
// new ManifestPlugin({
// writeToFileEmit: true
// }),
// new webpack.HotModuleReplacementPlugin()
],
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
exclude: /node_modules/,
use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
}
]
},
resolve: {
// modules: [
// "node_modules",
// path.resolve('./frontend/src'),
// ],
extensions: [ '.tsx', '.ts', '.js' ],
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /.(c|sa)ss/,
name: 'style',
chunks: 'all',
enforce: true
}
}
},
minimize: true
},
devServer: {
watchContentBase: true,
host: 'localhost',
port: 9000,
hot: true,
publicPath: '/assets/',
historyApiFallback: true,
}
}
}
import Button from '@material-ui/core/Button';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
public render() {
return (
<div>Hello World!!</div>
// <Button>Hello World!!</Button>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
// ReactDOM.render(
// <div>
// aaa</div>,
// document.querySelector('#root'),
// );
{
"name": "PROJECT_NAME",
"private": true,
"dependencies": {
"@material-ui/core": "^4.9.0",
"@material-ui/icons": "^4.5.1",
"@types/react": "^16.9.19",
"@types/react-dom": "^16.9.5",
"axios": "^0.19.2",
"css-loader": "^3.4.2",
"eslint": "^6.8.0",
"file-loader": "^5.0.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts-ts": "^3.1.0"
},
"devDependencies": {
"eslint-config-prettier": "^6.10.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.18.0",
"eslint-plugin-react-hooks": "^2.3.0",
"prettier": "^1.19.1",
"source-map-loader": "^0.2.4",
"style-loader": "^1.1.3",
"ts-loader": "^6.2.1",
"typescript": "^3.7.5",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-manifest-plugin": "^2.2.0"
},
"scripts": {
"dev:webpack:server": "webpack-dev-server --mode development --hot --config ./config/webpack/development.js",
"build": "webpack --mode production --config ./config/webpack/production.js",
"dev:build": "webpack --mode development --config ./config/webpack/development.js",
"start": "webpack-dev-server --hot --mode development --config ./config/webpack/development.js"
}
}
{
"compilerOptions": {
"outDir": "./public/assets/",
"module": "commonjs",
"lib": ["es6", "dom"],
"sourceMap": true,
"jsx": "react",
"esModuleInterop": true
},
"filesGlob": [
"./frontend/src/**/*.tsx",
"./frontend/src/**/*.ts"
],
"exclude": []
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment