I have a local development web with an index.html which is using:
<!-- LESS -->
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
<script src="js/lib/less-1.1.3.min.js" type="text/javascript"></script>
When I am ready editing I commit/push to my development server and the git post-receive hook runs my build.sh and builds my css / requireJS / smartsprites app.
How can I replace the above code in my static HTML file with:
<link rel="stylesheet" type="text/css" href="css/styles.css" />
without switching to server-side scripting (PHP/etc) or on the fly node.js css rendering.
In my build.sh script? With regexp? How? An example would be nice.
You can just use sed:
sed -i -e 's/styles\.less/styles\.css/g' index.html
I haven't used git-post-receive (I didn't even know it existed! thanks :P), but you could just shove it into your build.sh file or whatever file runs when you push your files to the server.
Related
How do i host the browser build?
I do not get it, i run:
npx shadow-cljs release app
npm start?
node app.js is wrong
I cannot launch app.js in the browser. What am i doing wrong?
My shadow-cljs.edn looks like this:
{:source-paths ["src"]
:dependencies [[binaryage/devtools "1.0.6"]
[nrepl "0.9.0"]
[reagent "1.1.1"]]
:builds {:app {:target :browser
:output-dir "public/js"
:asset-path "/js"
:modules {:app {:entries [simpletodo.core]}}
:devtools {:after-load simpletodo.core/mount-root}}}
:dev-http {3000 {:root "public"
:handler user/app}}}
One level higher, i would think the index.html could be the right one, but it looks like this.
I even put in this HTML file and started the HTML, but it would not work. All i get is a white page:
➜ simpletodo cat index.html
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/main.css">
<title>Browser Starter</title>
</head>
<body>
<h1>shadow-cljs - Browser</h1>
<div id="app"></div>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script src="/public/js/app.js"></script>
</body>
</html>
Can you clarify what you mean by "hosting the build"?
If you are just testing stuff you can run npx shadow-cljs server (and keep it running) which will also run the :dev-http servers in the build config. So your files would be accessible via http://localhost:3000, just like they would be with a running watch.
A release build produces an optimized .js file. shadow-cljs is not used in production environments and is out of the picture after producing the files.
Any webserver capable of serving static files will work at that point. Common options include nginx, apache or just a CLJ webserver (eg. jetty).
As you know, technology was introduced as pyscript for the use of Python by html.
if you do not know: What is pyscript?
how do config that in xampp?
Quote from pyscript.net
You don't need to install anything. 😃
To use PyScript you can either download it and follow the
instructions, or add the following lines to your page.
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css"/>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
Click here for more info on how to use PyScript.
If you don't need MySQL you can serve your DocumentRoot even without XAMPP using python itself or any other lightweight webserver:
python3 -m http.server
Then start with a simple html file. PyScript will fetch and cache its needed dependencies automatically:
<html>
<meta charset="utf-8">
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-script>
print('Hello World! 🌍')
</py-script>
</html>
// THIS WORKS ('contact' is the folder we're in)
<link rel="stylesheet" type="text/css" href="../contact/local.css">
// THESE DO NOT WORK (they point to a 'local.css' in the root directory)
<link rel="stylesheet" type="text/css" href="./local.css">
<link rel="stylesheet" type="text/css" href="local.css">
This is only an issue on 'localhost'. It works perfectly well on the web-server I'm using but for testing it would be nice if I can use './'.
I'm using Phpstorm with PHP Built-in Web Server.
This is a known issue for PHP Built-in Webserver.
Currently, the webserver processes the path without trailing / as a file even if it's a directory.
To fix this, please make sure you have a trailing forward slash in your URL.
E.g. Instead of http://localhost/folder, use http://localhost/folder/
I just installed this Create React Apps program from here https://github.com/facebookincubator/create-react-app and I have all the files downloaded and I am able to edit the App.js file, but I already have made some html files for a website, I want to know how to link the App.js file to my current files. The html on the given Index.html, shows no <script> element used. Here is the full html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Inside your project run
npm run build
This create the folder "/build" with the "index.html" file. Inside this you can see how all this magic is done. You can put your other/old stuff also there.
I'm not entirely sure what you are asking, but you can have normal html/css on the same page as React. React is rendering the App component in the div id="root" section of the page. Elsewhere, you can just paste your old html stuff and it should work.
I am learning front-end development and currently try to understand how to use automatisation systems such as gulp, grunt or webpack. I currently picked webpack and the question is targeted to that system.
I understand its general use and built configurations to automate operations such as the compilation of .less files or minification CSS files.
The point which escapes me is that the development version of (as an example) an HTML file should differ from the production version. Specifically, my development file looks like
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="onestyle.css">
<link rel="stylesheet" type="text/css" href="anotherstyle.css">
<link rel="stylesheet" type="text/css" href="bootstrapmaybe.css">
</head>
<body>
Hello World
<script src="somelibrary.js" type="text/javascript"></script>
<script src="myown.js" type="text/javascript"></script>
</body>
</html>
while the production version is rather
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" type="text/css" href="allcssminified.min.css">
</head>
<body>
Hello World
<script src="alljsminified.min.js" type="text/javascript"></script>
</body>
</html>
where allcssminified.min.css and alljsminified.min.js are generated from the the various components of the development file, transformed though the relevant webpack mechanism into a compressed version.
There should however be one HTML file, common to development and production contexts, adapted depending on the context (dev or prod).
How should this be approached with webpack?
Through some kind of HTML templating where an if-then-else condition would include the right section?
Or should the whole <link> or <script> includes sections be somehow generated and included by webpack (which to me looks like a templating approach as well, though the decision is made by webpack?
Or should there just be one include, and the components of this include would be defined in the webpack configuration file (in that case I always get the minified version, which is possibly not optimal for debugging)
Note: there was a similar question for grunt back in 2012-2014 but the solutions listed there are not relevant to webpack and, subjectively, not very aesthetical.
CSS: I would use one main. css file (styles.css) in your application. Then #import all of the other .less or .scss files into styles.css. These will be compiled by WebPack assuming you are using the proper CSS loaders (style-loader, css-loader, less-loader).
JS: Define them in your entry config like so:
entry: ['./path/to/somelibrary.js', './path/to/myown.js']
They will get combined as well into one file.