Create first web lab with no build configuration.
Create Web Lab works on macOS, Windows, and Linux.
If something doesn’t work, please file an issue.
To create a new lab, you may choose one of the following methods:
npx create-web-lab my-lab(npx is a package runner tool that comes with npm 5.2+ and higher)
npm i -g create-web-lab
create-web-lab my-lab(But I wouldn't recommend this method, keep calm and use npx)
It will create a directory called my-lab inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:
my-lab
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── index.html
├── assets
│ ├── favicon.ico
│ └── logo.png
├── server
│ └── server.php
├── js
│ └── script.js
└── style
└── style.(css|scss)
No configuration or complicated folder structures, only the files you need to build your app.
If you run create-web-lab -h in terminal, you will recognise, that there several templates, on which you
can build your lab:
- Simple template (no keys)
- Webpack template (key: -w)
- Typescript template based on webpack (key: -t)
Also, during making your app you will be asked questions:
- Do you want to add Jquery to template
- What styles do you want to use (now only CSS and SCSS)
To make it, run (also choose CSS as default style):
npx create-web-lab my-labmy-lab
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── index.html
├── assets
│ ├── favicon.ico
│ └── logo.png
├── server
│ └── server.php
├── js
│ └── script.js
└── style
└── style.css
In the project directory, you can run:
Runs the app in the development mode.
Your lab will automatically open in your default browser.
Learn more here
To make it, run (also choose SCSS as default style):
npx create-web-lab my-labmy-lab
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── index.html
├── assets
│ ├── favicon.ico
│ └── logo.png
├── server
│ └── server.php
├── js
│ └── script.js
└── style
└── style.scss
In the project directory, you can run:
Runs the app in the development mode.
Your lab will automatically open in your default browser.
Compile default sass file to css.
Learn more here
In that template you won't have some troubles with production and development build, like in the simple template.
Development doesn't change from style choose.
To make it, run:
npx create-web-lab my-lab -wmy-lab
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── webpack.congig.js
├── src
│ ├── styles
│ │ └── style.css || style.scss
│ └── index.js
├── server
│ └── server.php
└── public
├── index.html
├── logo.png
└── favicon.ico
In the project directory, you can run:
Runs the app in the development mode.
Your lab will automatically open in your default browser.
Build your lab in development mode (files will be readable and won't be hashed).
Check your build in root/build/
Build your lab in production mode (files won't be readable and will be hashed).
Check your build in root/build/
Learn more here
In that template you won't have some troubles with production and development build, like in the simple template.
Development doesn't change from style choose.
To make it, run:
npx create-web-lab my-lab -tmy-lab
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── webpack.congig.js
├── src
│ ├── styles
│ │ └── style.css || style.scss
│ └── index.ts
├── server
│ └── server.php
└── public
├── index.html
├── logo.png
└── favicon.ico
In the project directory, you can run:
Runs the app in the development mode.
Your lab will automatically open in your default browser.
Build your lab in development mode (files will be readable and won't be hashed).
Check your build in root/build/
Build your lab in production mode (files won't be readable and will be hashed).
Check your build in root/build/
Learn more here
I'll describe you how to develop your lab using PhpStorm.
Only for simple CSS template
If you run app using npm start, notice that php script wouldn't work. That's because live-server, which
is installed as devDependency can't work with php, but it is especially good to make up front-end of your lab.
When your front will be ready, to check working capacity of your back-end you will need to use built in PhpStorm
local server (go to index.html file and in the right top you will see bar with browsers). Also, you need
to configure php in PhpStorm.
Only for simple SCSS template
If you run app using npm start, notice that php script wouldn't work. That's because live-server, which
is installed as devDependency can't work with php, but it is especially good to make up front-end of your lab.
When your front will be ready, to check working capacity of your back-end you will need to use built in PhpStorm
local server (go to index.html file and in the right top you will see bar with browsers). Also, you need
to configure php in PhpStorm.
Before checking php scripts you should run npm run sass to compile your SCSS file to CSS.
Only for webpack template
If you run app using npm start, notice that php script wouldn't work. That's because dev-server, which
is installed as devDependency can't work with php, but it is especially good to make up front-end of your lab.
When your front will be ready, to check working capacity of your back-end you will need to use built in PhpStorm
local server. For checking back, run npm run dev and go to build. Press on index.html file and in the right
top you will see bar with browsers. Also, you need to configure php in PhpStorm.
Only for typescript template
If you run app using npm start, notice that php script wouldn't work. That's because dev-server, which
is installed as devDependency can't work with php, but it is especially good to make up front-end of your lab.
When your front will be ready, to check working capacity of your back-end you will need to use built in PhpStorm
local server. For checking back, run npm run dev and go to build. Press on index.html file and in the right
top you will see bar with browsers. Also, you need to configure php in PhpStorm.
Create Web Lab is open source software licensed as MIT.