Minimal Electron, React, PostCSS and Webpack boilerplate to help you get started with building your next app.
Minimal Electron, React, PostCSS and Webpack boilerplate to help you get started with building your next app.
git clone https://github.com/alexdevero/electron-react-webpack-boilerplate.git
npm install
or
yarn
npm run start
or
yarn start
npm run package
or
yarn package
npm run build
or
yarn build
npm run build
|| yarn run build
)npm run prod
yarn prod
Adding Sass to boilerplate requires updating webpack configs and adding necessary loaders.
webpack.build.config.js
and webpack.dev.config.js
add new object to rules
:{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' }],
include: defaultInclude
}
Install additional loaders for sass, sass-loader
and node-sass
.
Rename all CSS file to .scss
.
If you don't want to do all these steps, you can clone This Repository and you are good to go.
Adding TainwindCSS to boilerplate requires adding all the dependencies listed on the tailwindcss website for create react app
Official Guide. OR follow these steps
tailwindcss
, postcss
and autoprefixer
.npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
craco
.npm install @craco/craco
Open package.json
file, find start
and build
scripts under scripts
.
Add && craco start
at the end in start
and build
scripts. You also have to add build-css
script to build the CSS styles using tailwindCSS. "build-css": "npx tailwindcss build -o src/styles/main.css",
. You can choose output folder of your own choice. Here are the three scripts after changing/adding.
"start": "cross-env NODE_ENV=development webpack serve --hot --host 0.0.0.0 --config=./webpack.dev.config.js --mode development && craco start",
"build": "cross-env NODE_ENV=production webpack --config webpack.build.config.js --mode production && craco build",
"build-css": "npx tailwindcss build -o src/styles/main.css",
craco.config.js
file in your project at root of your project and add the following.module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
npx tailwindcss-cli@latest init
This will create a minimal tailwind.config.js file at the root of your project.
tailwind.config.js
file, configure the purge option with the paths to all of your components so Tailwind can tree-shake unused styles in production builds: // tailwind.config.js
module.exports = {
purge: [],
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
main.css
file in app.js
. Make sure you choose correct path for CSS file.import '../styles/main.css'
npm install tailwindcss@latest postcss@latest autoprefixer@latest
if you face different version issues.This boilerplate uses HTML Webpack Plugin to generate the HTML file of the app. Changing app title is possible only through webpack configs, webpack.build.config.js
and webpack.dev.config.js
. App title can be changed by adding objects of options.
In webpack.build.config.js
:
plugins: [
new HtmlWebpackPlugin({title: 'New app title '}),// Add this (line 41)
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'bundle.css',
chunkFilename: '[id].css'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new BabiliPlugin()
],
In webpack.dev.config.js
:
plugins: [
new HtmlWebpackPlugin({title: 'New app title '}),// Add this (line 36)
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
],
I want your feedback! Here's a list of different ways to me and request help:
If you feel generous and want to show some extra appreciation:
Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
MIT © Alex Devero.