I have a bought One ui theme that I'm trying to integrate into Meteor.
I have browsed stack overflow for the solution for hours and I'm stuck.
I have copied the complete assets folder into a newly made imports directory on the client side and tried to use import on the client main.js to import the modules I need. The problem with this is that when I run the server with meteor --port xxxx it hangs up on building web application and just freezes.
I have also tried putting it in a client/compatibility folder for the javascript and it doesn't seem to work.
Does anyone have any insight into this?
For the static html I just created a new template with the html and that worked.
Client/lib is where you put your JS libraries.
rootproject/public is where you put your static assets(images/fonts).
Look for packages on atmosphere.js and check if they are compatible with what you're trying to do. This is the most confusing step because the package names will not exactly be the same as the third party js libs. Trial and error.
Any third party js files you can't find on atmosphere.js you dump the js files in client/lib.
Related
I tried to create a Django web app since the web pages had heavy js files so it took a long time to load the page. To tackle this problem I tried to implement Astro to create a static webpage.
But the problem here is that Django renders .astro files also as HTML.
How do I tell Django to render .astro as an Astro file
Astro is a static site generator built on top of node.js. To have your static site served from your django application you would first need to build astro out, using:
npm run build or yarn build to have your site output in the ./dist directory. From here you can then point your django server to serve those files.
Since Astro files are static they can be deployed in a number of different ways, you can read more about this here
Hope that helped buddy, if you got any more questions you could always come and ask them in the discord channel
I had my react project working correctly in localhost. Then, I decided to deploy it to github pages and it worked perfectly on the server too. Now, I'm trying to work on it again on localhost but it is not showing correctly. For some reason, photos are not loading and some css is not working correctly and after compile it in PowerShell says this:
Compiled successfully!
You can now view myportfolio in the browser.
Local: http://localhost:3000/myportfolio
On Your Network: http://192.168.56.1:3000/myportfolio
Note that the development build is not optimized.
To create a production build, use npm run build.
So if I go to my GitHub pages it is loading correctly but not in localhost (running npm start).
Any suggestion? Thank you in advance and let me know if you need more clarification
I did clone your repositories and found these problems:
You have been directly imported many third-party js given their relative path in the index.html. That doesn't work. You should append %PUBLIC_URL% before them. For e.g.
<script src="%PUBLIC_URL%/js/jquery.flexslider.js"></script> and similary for other script files.
But even this is not the best that you can do. You must not try to use jquery or third party js in a React App. Also, make it a part to install the related JS though npm and make them a part of the package.
You'll have to use <img src={require('/public/images/background.png')}... (Btw, the image name on your gh-pages is different. It's logo.png there)if you want the webpack to compile and make it a part of your project. Also, the path must reside within src and not public folder.
Other errors are are related to keys. Whenever you're mapping and iterating through a list in react you must specify a unique key.
So I am using the following tutorial. I can access the localhost, but I am putting in an html file. The tutorial does not go into depth about setting up a javascript file and getting that file to transpile. Can someone help me with the setup. I have googled this topic and I keep coming across tutorials that talk about needing babel for the transpiling, yet the tutorial says
Now that everything’s ready to go, we can get webpack to watch for
code changes in our directory and transpile.
But I feel like this means it should just bundle up everything in my project since webpack is a bundling product. Further, I am confused by the call to webpack:
CMD webpack --watch --watch-polling
Does this mean I don't need to put in an entry point and endpoint? I thought with webpack I need to provide those two details, but the tutorial again is calling directly to just polling.
Thanks in advance for any help getting my structure setup so I can run webpack, react in docker.
In terms of setting up the files, I had to add
COPY wwwroot ./wwwroot
Just to get the project to display something at localhost. But I want files to be brought over automatically if possible. But I am not sure of the intent of the tutorial with regards to file structure.
Possible duplicates:
Codeigniter and React.JS setup
React.JS setup with Codeigniter
how to implement react js in codeigniter
ReactJS not rendering php codeigniter
Above given links are not working properly.
I followed the procedure to install React Js using facebook-create-app in windows, it works perfectly. But i need to work React Js with in
CodeIgniter. How to install and run it..?
CodeIgniter with React
CodeIgniter code is little bit changed to accommodate theming structure. Also there are significant changes done and some are in progress, to support rendering using React JS.
The changes are done in such a way, which put this repository in the state, in which it can be used in multiple ways, the default being rendering the views using React and it supports the default CodeIgniter views also.
Here you can find much more infos : https://github.com/kala725/CodeIgniter-with-React
Second one
Another example which I tried two years ago I think : https://github.com/Jineshfrancisco/React_Vue_Frontend_Scaffolding
download the repository from github
extract into your codeigniter project folder
link css and js files in public folder into your view file
edit the package.json file and other (watch the Video)
run the command "npm run watch" or "npm run prod"
video tutorial explains almost all you need on youtube : https://www.youtube.com/watch?v=-ba6y3r69VE
Codeigniter + Reactjs – Integration
See this tutorial is well for step by step https://www.tutofox.com/react/codeigniter-reactjs-integracion/
I am using React+ CodeIgniter for a small personal project I am working on currently. React is wonderful for creating dynamic, interactive front-ends. PHP developers are available in plenty to develop the REST backend, with the added advantage of very cheap, shared hosting. Some simple "formsy" admin pages are also done in CodeIgniter, making my bundle size smaller and maybe some added security.
You need to first build the create-react-app project using
npm run build
When it finishes, you will find the 'index.html' and other required files inside the "project_folder/build" folder. Copy everything into the Apache htdocs folder. I put the codeigniter files into "htdocs/api" folder. You will need to do some redirects with '.htaccess'.
I am in the process of converting an existing Rails 3.1 app I made for a client into a Backbone.js app with the Rails app only as a backend server extension. This is only a personal project of mine, to learn more about Backbone.js.
While setting up Backbone.js (using Backbone-on-Rails), I noticed I have some dependencies (like backbone-forms) that come from external sources and are frequently updated.
I've grown accustomed to using Bundler to manage my Ruby gems, but I haven't found anything similar for JavaScript files. I'm wondering if there is any way to do the same for Javascript (and possibly css) files.
Basically I can see three possibilities to solve this issue:
Simply write down all the sources for each JS file and check these sources from time to time to see what has changed.
Use some kind of existing "Bundler for Javascript" type of tool, I've been looking for something like this but have yet to find anything (good).
Since most of these JS files will be coming from Git anyway, use Git to get the files directly and use checkout to get the latest version from time to time.
I prefer the last option, but was hoping on some more input from other people who have gone this route or preferred some other way to tackle this issue (or is this even an issue?).
I figure the Git way seems easy, but I am not quite sure yet how I could make this work nicely with Rails 3.1 and Sprockets. I guess I'd try to checkout a single file using Git and have it be cloned in a directory that is accessible to Sprockets, but I haven't tried this yet.
Any thoughts?
You don't mention it in your alternatives, but ideally you should use something like Maven to manage your dependencies. Unfortunately, there are no public repositories for javascript files. This discussion lists some other options which might be of help to you: JQuery Availability on Maven Repositories
For now I've settled on using the Git solution combined with some guard-shell magic.
The steps I follow:
Create a dependencies directory somewhere on your local drive
Clone the repositories with javascript (or css) files you want to use in the app
Set up a custom guard-shell command to do the following:
group 'dependencies' do
guard 'shell' do
dependencies = '~/path/to/dependencies/'
watch(%r{backbone-forms/src/(backbone\-forms\.js)}) {|m| `cp #{dependencies + m[0]} vendor/assets/javascripts/#{m[1]}` }
end
end
Place the Guardfile at the root of the app directory
It takes some time to set things up, but after that, when you have the Guard running, and you pull changes into your dependencies, the required files are automatically copied to your application directory, which are then part of your repository.
It seems to work great, you need to do some work for each new file you want to include in the asset pipeline, but all that is required is cloning the repository in your dependencies directory and adding a single line to your Guardfile, for example for the backbone-form css:
watch(%r{backbone-forms/src/(backbone\-forms\.css)}) {|m| `cp #{dependencies + m[0]} vendor/assets/stylesheets/#{m[1]}` }
Also, the reason I added this Guard to a group is because I keep my dependencies outside the main application directory, which means guard normally doesn't check my dependencies directory. To make this work, I start up my main Guard processes using bundle exec guard -g main and use bundle exec guard -w ~/path/to/dependencies -g dependencies in a new terminal window/tab to specify the -w(atchdir).