I want to develop my static web application with React. I have just done with the Tic-tac-toe getting started tutorial. Are there anyways I can "compile" (or whatever the term is) ReactJS straight into my HTML file? So, far to run that ReactJS application I need to run it with a server from Yarn.
I prefer to not use CDN because I want to update and manage the dependencies.
Let say, for my starting point, I want to have that Tic-tac-toe game from official React getting started tutorial to be served with just one HTML file (CSS and JS in that one HTML file). I want to see if this is possible or not, so I don't care about the best practice for this question.
You should have a look at Gatsby JS
It's a static site generator for React. Probably that's what you're looking for.
Run npm run build or yarn build and see the output in the build folder. It generates static HTML, CSS and Javascript.
Sounds like you are using Yarn with create-react-app. If so you are running:
yarn start
Now run:
yarn build
See more info here: https://github.com/facebookincubator/create-react-app
The static web application will be built to a build folder. You will find all of the static assets there like JS, CSS and HTML.
I have tested. yarn build works only with a server. Even python3 -m http.server works. So, no! ReactJS downloaded from non-Bower package manager will not work without server out-of-the-box.
Related
I have a static site reliant on a remote JSON file which is under my control and doesn't change much.
I'm using gulp to build the static site and would like to add a gulp task to automatically get the remote JSON during the build, so I can include it as a local file.
I've not come across a plug-in to do this. Can anybody suggest one?
Found it! https://www.npmjs.com/package/gulp-download-files will allow you to download files locally.
I have setup a custom storefront for my hybris project.
I have added a react project(package.json is the custom storefront's folder) within WEB-INF folder.
Using webpack to bundle and code split my js and css.
Is there a way to host the HTML file within Hybris 6.7?
P.S - can't do a separate frontend project, hence this question.
I'm not sure I understand what you are looking for, but you can create a new extension with a web module. This web module can have a page.
See Extension Modules: https://help.sap.com/viewer/b490bb4e85bc42a7aa09d513d0bcb18e/6.7.0.0/en-US/3a3b92d4900b4b3685157b806a73eab2.html
I made a simple create-react-app project as a test assignment for a new job. I'm already finished with the project, but there's a catch:
I must turn the project in as a single html file with embeded js and css.
How do I turn my create-react-app project into a single file?
Edit: Running npm build doesn't solve my issue, as it builds the project, but the result is not a single html file! - it generates an index.html plus a static/ folder to import sources from.
I could hand-paste those I guess, but am looking for a more elegant solution!
Run this command:
npm run build
I was interested on on Google's web app-Shell. I've downloaded it GitHub. But I found that there is no index.html/index.php file in the whole code. All I mainly found, is the licence file, app.yaml file and app.js file. Link to that page, is here.
I heard,that I can install the project in my web hosting site, by using terminal. But terminal is not an option for my situation. I've stopped using Firebase, because I must have terminal for it. So, is there any other idea to install the project in my website?
Can I have a flat file, so that I could simply past the html,css, JavaScript and other media files into my server?
Unfortunately the Google web app-Shell isn't designed to have an index.html file. There is a views folder that has what you're looking for https://github.com/GoogleChromeLabs/application-shell/tree/master/server/views.
As we can see they're using handlebars for as a templating system. For example, if we look at https://github.com/GoogleChromeLabs/application-shell/blob/master/server/views/layouts/default.handlebars we can see that they have {{> open-page}} and {{{body}}}. If we look at handlebars documentation these partials are rendered into other views.
Essentially, there isn't a single index.html we can point to, but we can reconstruct the app by exploring their views.
I am developing simple website (html, css) and I want to write few tests against it in Protractor.
Is it possible to check that kind of website with Protractor? I have html file on my computer only. Should I run this website locally on server? I don't think I can run test on file directly.
Yes, its possible to open a stand-alone local html file without hosting it on a local server.You have to add this browser.resetUrl = "file:///"in your onPrepare() function and then a browser.get("file:///C:/Users/demo/test.html") would work
There are some good examples #this question - Opening a file with protractor
A common way to do it is to approach it in multiple steps:
build your application
run a local web server from the build directory (I think this is the part you are asking about)
run tests against your app served by the local web server
stop the local web server
Usually, this multi-step process is handled by a task runner like grunt or gulp. We use grunt, grunt-contrib-connect to serve from a directory, grunt-protractor-runner to run protractor from grunt.