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).
Related
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>
I have a Vue/Webpack application that uses an external-referencing, embedded CSS link in my index.html file. It looks something like:
<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="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
/>
...
</head>
If I run npm run build in the project directory, the resulting dist/index.html file will contain this link.
However, I am deploying my project in a Docker container. At the end of that container building process, this CSS link and others like it will be gone in the generated index.html file, causing several elements on my page to break graphically.
What settings in the webpack/Docker config could cause this to happen?
I have found the solution - it seems that my Dockerfile included a copy of the src and resources folders for the working directory, but not the public folder which contained the favicon as well as the base index.html. This meant that the index.html that was autogenerated as part of npm run build would never take the above lines of code into account.
The margin is different between <button> elements depending on if its rendered by react or if it's just plain old html. Plain old html adds a small margin between the buttons, while react completely removes it.
Does anyone know why these are different? And is there a way to bring back that default margin in React?
Details
Here is the result from a simple react app created with create react app at 500% zoom:
I took the source html that react generated, copied it, and put into another index.html file that I opened on my browser. Again at 500% this is what it shows:
Note there is no additional CSS that is added. The developer tools look exactly the same.
Steps to replicate:
React
Create a react app with npx create-react-app <some name>
Remove all css from generated index.css
Use the following jsx in the index.js file:
<React.StrictMode>
<button>Vanilla</button>
<button>Vanilla</button>
</React.StrictMode>
Plain Html
I copied the html that was rendered in the browser from the react app and pasted it into a separate index.html file. The html looked like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<!--
Notice the use of 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", "/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">
<button>Vanilla</button>
<button>Vanilla</button>
</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`.
-->
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
</html>
Thanks to G-Cyrillus, we found out that the problem occurs because react is minifying the html. So the jsx:
<React.StrictMode>
<button>Vanilla</button>
<button>Vanilla</button>
</React.StrictMode>
once minified, turns into:
<button>Vanilla</button><button>Vanilla</button>
The solution I found to keep the gap is to write the jsx like this:
<React.StrictMode>
<button>Vanilla</button> <button>Vanilla</button>
</React.StrictMode>
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 just started with Polymer and I'm using paper-icon-button to test this out. I think I set things up correctly because the button I used have ripple effect; when I set the src property, my intended picture showed up.
<!-- This works -->
<paper-icon-button src="http://placekitten.org/g/50/50"></paper-icon-button>
However, I failed to use default icon, for example:
<!-- This does not work. There is a blank icon.
However, ripple effect still works on click -->
<paper-icon-button icon="menu"></paper-icon-button>
I ran the polymer project on a Linux server. The demo doesn't work on my computer either. Here is what the demo should look like: https://elements.polymer-project.org/elements/paper-icon-button?view=demo:demo/index.html
Here is the demo running on my polyserve:
I setup paper-icon-button using bower command instead of zip file so I would assume that all the dependencies are there. Not sure what is missing :s please help me out thanks!
You also need to import iron-icons. Look at this demo
and this example repository.
Proper way to initialize project on Windows:
Install yarn
open git bash
mkdir -p /c/projects/polymer && cd /c/projects/polymer
yarn add --dev bower
./node_modules/.bin/bower init
If you see: "bower ENOINT Register requires an interactive shell" run above command in cmd.exe. More.
./node_modules/.bin/bower install --save PolymerElements/iron-icons
./node_modules/.bin/bower install --save PolymerElements/paper-icon-button
Create index.html with content at the end of this post
yarn add --dev http-server
./node_modules/http-server
Open http://127.0.0.1:8080 in web browser
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
</head>
<body>
<paper-icon-button icon="favorite" title="heart"></paper-icon-button>
</body>
</html>