Here well have some examples using ReactJs features, like components, also there is going to be applied some advanced techniques with webpacker and packages management.
The React script doesn't have much to it right now, because i am building a very complete and reliable wepacker configuration, togheter with a npm package configuration that suits most uses.
The project Can be reused for many purposes, as it generates a html file, with features like defer and async to allow for a very good SEO experience, improvements will be made with time.
- About
- Prerequisites
- Installing
- Usage
- Deployment
- Dependencies
- TODO
- Contributing
- Authors
- Acknowledgments
This repository will be used for studying ReactJs, React native, React router, Webpacker.
These are the softwares you need to start working.
- Node >= 12
- Npm
- Webpacker >= 4
You will need to have installed NodeJs higher than 12.
To show the node verion.
node -v
After installed, navigate to the folder at the command line and run the npm command
npm install
This command will create node_modules folder with all dependencies
After all is done, start the webpacker file wacther using the command.
npm run dev
Or you can use the production command.
npm run build
To start the webpack-dev-server for development environment.
npm run start
By default the server will start at localhost:9000, you can change that in webpack.config.js.
devServer: {
contentBase: path.join(__dirname, '/public'),
host: 'localhost',
compress: true,
port: 9000
}
To edit the content please work with the assets folder.
If needed to create another html page, add another instance of HtmlWebpackPlugin to the webpack.config.js file, like the code below.
new HtmlWebpackPlugin({
filename: '../index.html',
template: 'assets/index.html'
}),
new HtmlWebpackPlugin({
filename: '../test.html',
template: 'assets/test.html'
})
To add or remove any file from the bundle excluding html files, please use all.js inside assets to specify what is loaded.
// DEPENDENCIES //
const file = require('packageName');
// CSS //
const file = require('./css/file.css');
// JS //
const file = require('./js/file.js');
The only script that cannot be changed at all.js is loader.js, this file is responsible for the app loading screen, he is required at webpack.config.js
entry: {
'loader': path.resolve(__dirname, 'loader.js')
}
For production bundle you can use.
npm run build
- @MOB-atheist - Idea & Initial work
See also the list of contributors who participated in this project.
- Hat tip to anyone whose code was used