I've been trying to learn AWS's CDK and one of my attempts involved using a seperate repositories for both the infrastructure and the application itself.
My application repository is the bog standard vite#latest install. No changes.
I'm having issues where when i deploy, the build is crashing with codeBuilds log stating src/App.tsx(2,23): error TS2307: Cannot find module './assets/react.svg' or its corresponding type declarations.
I've tried adjusting the tsconfig to include an #types folder with declarations for svg but this didn't work at all. It just gave more typescript errors.
I feel like i'm missing something really silly.
My CDK Pipeline:
const pipeline = new CodePipeline(this, "CahmFrontendPipeline", {
pipelineName: "CahmFrontendPipeline",
synth: new ShellStep("Synth", {
input: CodePipelineSource.gitHub("myuser/myrepo", "master", {
authentication: cdk.SecretValue.secretsManager("MY_SECRET"),
}),
primaryOutputDirectory: "dist",
commands: [
"cd frontend",
"npm i",
"npm run build",
"npx cdk synth",
],
}),
});
This all works right till the codebuild. I've tried changing the image it's using as well but to no avail. Has anyone had this problem and might be able to point me in the right direction?
Things get confusing because paths act differently between dev and build (prod). I created a very simple example sandbox to help visual things using the Vite starter app. I would also recommend reading the Static Asset Handling. Also incredibly useful are the Vite Build Options which let you change where files are output.
Ideally, you want to use import reactSVG from './assets/react.svg' at the top of your component, then reference that src in the render using src={reactSVG). Both dev and build will be happy with that.
Or you should use an absolute path like /assets/react.svg, removing the . in front.
Besides the sandbox above, I wrote detailed notes on what's happening inline above each image to help the understanding.
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";
function App() {
const [count, setCount] = useState(0);
return (
<div className="App">
<div>
<a href="https://vitejs.dev" target="_blank">
{/**
* In dev, /vite.svg defaults to the "/public/vite.svg"
* In build/prod, /vite.svg defaults to "/dist/vite.svg"
* Use absolute paths or imports (below) when possible.
*/}
<img
src="/vite.svg"
className="logo"
alt="Vite logo"
width="25"
height="25"
/>
</a>
<a href="https://reactjs.org" target="_blank">
{/**
* Due to import magic, this works in both dev / build (prod)
* Use imports or absolute paths when possible.
*/}
<img
src={reactLogo}
className="logo react"
alt="React logo"
width="25"
height="25"
/>
</a>
{/**
* Here is where things go wrong with the default configuration:
*
* Example --- src="./assets/react.svg" won't work by default. Why?
* In development, "./" equates to your project root, "/"
*
* In a basic Vite project, root contains "src", "public", and "dist", if you ran the `npm run build` command.
* As you can see, there is no "assets" folder in project root. It's only contained
* within "src" or the "dist" folder. This is where things get interesting:
*
* When you "build" your app, Vite appends unique strings at the end of your compiled .js
* files in order to avoid cache side-effects on new deployments in the front-end.
*
* So in the built app folder ("dist"), your assets will look something like this:
*
* /dist/assets/react-35ef61ed.svg
* /dist/assets/index-d526a0c5.css
* /dist/assets/index-07a082e1.js
*
* As you can see, there is no "/assets/react.svg". It does not exist in the build,
* which is why it's recommended that you import images at the top of your component
* for local assets. You can use remote assets as inline string paths. ("https://...")
*/}
<a href="https://vitejs.dev" target="_blank">
<img
src="./assets/react.svg"
className="logo"
alt="Never be visible"
width="25"
height="25"
style={{ border: "1px red solid" }}
/>
</a>
{/* only works in dev, non-build */}
<a href="https://vitejs.dev" target="_blank">
<img
src="/src/assets/react.svg"
className="logo"
alt="Visible in dev"
width="25"
height="25"
style={{ border: "1px solid green" }}
/>
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.jsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</div>
);
}
export default App;
So to those who find this question i've put here, the problem was from 2 different sources for me.
First, The version of the image used for the codebuild was defaulting to version 1 every time I redeployed as i hadn't chosen a specific image to use.
Secondly, this pipeline function isn't made for what i wanted it to do. For context, if you are wanting to build a source => build => deploy framework, make sure to use aws_codePipeline.Pipeline to build out each step.
You can find good examples of this in their documentation.
import React from 'react'
import { NavLink } from 'react-router-dom';
function Header() {
return (
<div className='header'>
<NavLink to="/">
<img className='header_logo' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMXl_zkdU92_MYc2tqty6pIjvG4JMAtJoQ5yA0dE4UfbS2R5l-RUiMczSNtQ1OAKcv-ZU&usqp=CAU'></img>
</NavLink>
<div className='header_nav'>
<NavLink to="/checkout">
<div className='header_optionBasket'>
<ShoppingBasketIcon />
<span className='header_linetwo header_basketCount'>
{basket.length}
</span>
</div>
</NavLink>
</div>
</div>
)
}
export default Header;
here after using navlink my url is changing but it not loading the components.Please someone help. I donot know where the problem is coming
I reinstalled using below command :
npm install react-router-dom --save
I don’t know how it happened but "--save" works for me
I had the same problem, I solved it by installing the latest version
npm install react-router-dom
I'm adding internalization to one of my projects, and facing the issue with eslint, *.ejs and i18n.
<li class="nav-item">
<a class="nav-link" href="/products">
<i class="ni ni-tv-2 text-primary"></i> <%= __('Products')%>
</a>
</li>
gives me the errors:
eslint: error
prettier/prettier - Replace `·__('Products')` with `__('Products');⏎`
eslint: error
no-undef - '__' is not defined.
Trying to find some already existed integrations of eslint with i18n and ejs and no luck yet.
Any recommendations how to fix it?
PS. editor: sublime 3, lang: nodejs
in my sharepoint home page am using a image slider. so am saved some images in this path C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\images. so in this folder there are some images. but in browser am getting only 2 images. Remaining images are not displaying.Means they are appering as some crashed image. but in folder am able to all the images. but in browser only 2 images(new and mutual) are displaying,other 3.jpg and 1.jpg are not displaying.
<div id="slideshow">
<div class="container">
<div class="row">
<div class="col-md-8 can" >
<div id="featured-slider">
<a href="#">
<img src="../../images/new.jpg" class="img-responsive" alt=""/> </a>
<a href="#">
<img src="../../images/mutual.jpg" class="img-responsive" alt=""/> </a>
<a href="#">
<img src="../../images/3.jpg" class="img-responsive" alt=""/> </a>
<a href="#">
<img src="../../images/1.jpg" class="img-responsive" alt=""/> </a> </div>
</div>
</div>
</div>
</div>
I noticed your tags are missing the closing .
Also, you might try changing the names of 3.jpg and 1.jpg because SharePoint might have trouble with those names in this context.
How can I generate this HTML using Jade
<a class="btn btn-primary btn-large" data-toggle="modal" href="#websiteModal">
<i class=" icon-map-marker icon-white"></i>
Configure for Website</a>
I tried
a.btn.btn-primary.btn-large(data-toggle="modal",href="#websiteModal") Configure for Website
i.icon-map-marker.icon-white
But it puts the <i> after "Configure for Website" text.
You can either do:
a.btn.btn-primary.btn-large(data-toggle="modal",href="#websiteModal")
i.icon-map-marker.icon-white
| Configure for Website
Or if you are feeling fancy:
a.btn.btn-primary.btn-large(data-toggle="modal",href="#websiteModal")='Configure for Website'
i.icon-map-marker.icon-white