Is there a way to achieve this? I use react.js in the front end only and want to keep it like this.
When you build your application via Yarn/npm, that's what basically you'd be doing. The system will bundle your assets and generates an HTML file. If you open the built index.html you should see your parsed React app in plain JS and HTML.
If you plan to put the build on a CDN, all you need to do is move the assets (JS and CSS) and the index.html wherever you want to host them. Ensure that <script> and <link> are pointing to the bundled assets within your index.html.
<script type="text/javascript" src="/static/js/your-bundle-main.js"></script>
<link href="/static/css/your-bundlemain.0a265734.css" rel="stylesheet">
You can use unpkg, is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:
<script src="unpkg.com/react#15.3.1/dist/react.min.js"></script>
<script src="unpkg.com/react-dom#15.3.1/dist/react-dom.min.js"></script>
Related
i built a Homepage using the Django templating engine and on one page is a js application i wrote. Now i moved to a Frontend <-> Backend architecture with React and Django-rest-framework.
The Application i had in Django was served as a .html file with <script> tags for the js part.
Now i moved to React and i'm serving the html elements through a React component and through React-helmet i'm adding the <script> tags for this specific page. The actual .js files reside in the /public folder of react.
I thought i can replicate this way the old structure. But now i get Errors that the .js files can't import classes from the first external script.
What could be the difference in this setup ?
Django:
<script type="text/javascript" defer src="https://unpkg.com/quantum-circuit"></script>
<script defer src="{% static 'path/to/file.js' %}"></script>
...
React:
<script type="text/javascript" defer src="https://unpkg.com/quantum-circuit"></script>
<script defer src={process.env.PUBLIC_URL + 'path/to/file.js' }></script>
...
The Error Message at React is that my file.js can't find the import from the first <script>. But in Django there is no problem.
the import statement in file.js is:
import { QuantumCircuit } from "quantum-circuit";
Thank you in advance for every answer :)
It seems that the first external script is not ready when my custom scripts are trying to call it.
I fixed the issue using the useEffect hook. It calls the external script and if it's ready i'm calling my custom scripts.
Despite i was able to resolve this issue, i'm wondering why this hasn't happend in Django before.
I am adding js chunks in html using below tag
<script crossorigin defer type="text/javascript" src="<chunk>"></script>
at the end of body tag
The same chunk is being loaded again from the UI script.
I am using v5.4.0 of react-loadable.
Has anyone seen the same behaviour?
I missed this point from the docs. Now all chunk files script tags are added before main script tag.
It is important that the bundles are included before the main bundle,
so that they can be loaded by the browser prior to the app rendering.
I'm using Create React App and I would like to use a JS library that isn't available via npm. How would I go about integrating that into my app? I think I can simply add a script tag for it in public/index.html for development purposes but I'm guessing that won't include it in the final build code. Any suggestions would be welcome.
You can add your script to the public folder and include it in the public/index.html file.
<script type="text/javascript" src="%PUBLIC_URL%/my-script.js"></script>
In my angular project, I am planning to have a separate .js file for each page and a separate .js file for each service.
However, as I begin to code, I realized that I have a lot of import statement in my index.html. This would cause user having to load all the .js file even if they might not need it.
An example of the .js for my index.html
<!-- JS -->
<script src="js/vendor/angular.js"></script>
<script src="js/app/app.js" ></script>
<!-- controllers -->
<script src="js/app/controllers/roomController.js"></script>
<script src="js/app/controllers/dashBoardController.js"></script>
<!-- services -->
<script src="js/app/services/dashBoardService.js"></script>
<script src="js/app/services/roomService.js"></script>
<script src="js/app/services/chatService.js"></script>
<script src="js/app/services/videoService.js"></script>
Is there any solution to this?
It's really a best practice to have each controller, each service, each directive… in a separate file, so you're doing it in the right way.
However, as you notice, it's better for the user (and for the server!) to download a minimal number of files. Your index.html is fine for development, but in production, you must compress all your files in in one, typically with a tool like UglifyJS or YUI Compressor.
This is a known issue, especially with large projects. A viable solution is using RequireJs . You can find plenty of resources on the web about that, for instance you can try this.
I had exactly the same problem so decided to use RequireJS to allow on-demand loading of my angularJS scripts. I created a wrapper called angularAMD that hopefully can help you integrate RequireJS and AngularJS:
http://marcoslin.github.io/angularAMD/
Working with yeoman generator-angular, it assumes that you want to put your css and scripts files in the same server as your index.html file. It generates a dist/index.html file that looks like:
<link rel="stylesheet" href="styles/7d151330.main.css">
<script src="scripts/6f9c9a13.scripts.js"></script>
<script src="scripts/bd6ce9e3.plugins.js"></script>
<script src="scripts/ec88f033.modules.js"></script>
However, I'd like to host the CSS/JS files on a different server and prepended with the URL:
<link rel="stylesheet" href="//mycdn.com/styles/7d151330.main.css">
<script src="//mycdn.com/scripts/6f9c9a13.scripts.js"></script>
<script src="//mycdn.com/scripts/bd6ce9e3.plugins.js"></script>
<script src="//mycdn.com/scripts/ec88f033.modules.js"></script>
I believe this is the YSLOW best practice and is in fact being used by the stackoverflow page you are currently looking at (view source to see their note on https://cdn.sstatic.net/) Having different CDNs doesn't seem to be possible yet with the grunt-google-cdn plugin
My current thought is to perform a search and insert on:
<script src="[INSERTHERE]scripts/
<link rel="stylesheet" href="[INSERTHERE]styles/
UPDATE: There are several grunt plugins that perform a search/replace so this may be the best route.
Any additional suggestions to get a CDN url prepended during a grunt build?
I was looking for the same functionality and it seems like this package would do the job:
https://github.com/tactivos/grunt-cdn
This does the job
https://www.npmjs.org/package/grunt-cdnify
For the standard use case, just set a base string for your URLs – eg, '//cdn.example.com/'. The cdnify task will automatically search for all local URLs in your files, and prefix them with this string. (It will automatically avoid adding double-slashes.)
For more general purpose than just "CDNize" you could use the grunt-preprocess module that allows you to preprocess your source files (html and else).
With this you can build source files depending on any variable.. like different URL by environment, DEBUG code adds, etc ...
More information here : https://github.com/jsoverson/grunt-preprocess
ps: see an another related answer of mine here : How to set AngularjJS base URL dynamically based on fetched environment variable?