Frontend of the previous project DeLorean Rental backend created. The goal of the project is to understand how work JS in its base level and how it communicates with the DOM through the DOM api. This project has been the deep introduction that all of us need if we want to understand how the DOM works and JS fundamental concepts.
This project complement really well the last one, to be honest I think that both of them should be developed, of course if you like more the backend than the frontend or other way round you'll choose one over the other. But to start to masterize yourself in Web Software Development, I think you must know what happens on the backend and the frontend.
I'll advise these two projects to anyone that feel brave enough to try them. If you don't feel brave enough to start with the Backend don't worry, you could clone them and use it as it is already.
Good luck !
- Webpack
- Motivation
- Project Goals
- Dependencies to install with webpack
- Compile your code with webpack
- Create a server with Webpack and run compiled code
- Technologies Implemented
- Instalaltion
- Links to Project Documentation
- Acknowledgment
- License
To install Webpack do it as a development dependency because it is just required to compile the code you're going to send to the server but once is compiled you won't need webpack any more. And WebpackPlugin, is a plugin of webpack to be able to compile as well the HTML code, otherwise we will be just getting the JavaScript code compiled.
I should start telling you that I have not had as much time as I would like, or better I should say that I had more than enough time, but I've been through one of the hardest stages of my life and I couldn't find the right moment to sit down myself and start to code. When I did it, I tried to develop all the project with the minimum dependencies required and this in my head was something like "I'm going to do this just with HTML, CSS, JS vanilla and node" and of course I've been through lot of troubles until one night of desperation and doing tech spiked I've found Webpack and I have to say that saved this project because what was exactly what I was looking for, but I didn't even thought about it. Then finally when I had a consistent idea about how I wanted to do it I start to develop all of this in just three days, because the fourth restarted the nightmare I was just living and I came back to find some time to sit down to code, I just don't want to force it because I really fucking enjoyed this last three days and I don't want to change this really nice vibe I get when I code. But the main motivation of this project was tried to do the same kind of web frontEnd development I do at my job with React just with JS Vanilla and I had to say that it was incredibly satisfying.
[x] Usage of DOM API
[x] Dynamically add class, styles, html...
[x] NodeElements and NodeLists
[x] Dialog windows
[x] LocalStorage, SessionStorage or cookies
[x] Fetch GET, POST, DELETE and PUT
[x] Async/await and Promises
[x] Form data handling
These dependencies are to compile the code for the server
$ npm i webpack -D
$ npm i html-webpack-plugin -D
These dependencies are to be able to run a server just with Webpack
$ npm i webpack-dev-server -D
These dependencies are to be able to load the stylesheets
$ npm i css-loader -D
$ npm i style-loader -D
This dependecy allows you to have multiple CSS files
$ npm install --save-dev mini-css-extract-plugin
These dependencies are to be able to load the HTML
$ npm i html-loader -D
This dependency allows us to see images
$ npm install file-loader --save-dev
The -D indicates is going to be installed as a development dependency
To compile the code, run the following command from your terminal after you've installed webpack:
$ npx webpack
Or if u want this compiled code turn into a readable human format run instead:
$ npx webpack -d
To create a server where you can run your compiled code, run the following command on your terminal:
$ npx webpack-dev-server
- HTML5
- CSS3
- JS Vanilla
- Webpack
- Node
- NPM
To be able to run this project you just will have to create an account into MongoDB, clone this project and run the command $ npm i to install all the required dependencies. Finally, create a .env file in the root directory of your project and fill the credentials specified in the .env template that you'll find below. Enjoy !
I would like to acknowledge the help and support of:
MIT License
Copyright (c) 2020 AntoniPizarro and Pau Llinàs
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.